| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| form { |
| color: black; |
| } |
| form:invalid { |
| color: rgb(0, 1, 2); |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <!-- With renderer --> |
| <form id="form1-with-renderer"> |
| <input class="input1" required value="Valid"> |
| <input class="input2" required value="Valid"> |
| <input class="input3" required value="Valid"> |
| <input class="input4" required value="Valid"> |
| </form> |
| <form id="form2-with-renderer"> |
| <input class="input5" required value="Valid"> |
| <input class="input6" required value="Valid"> |
| <input class="input7" required value="Valid"> |
| <input class="input8" required value="Valid"> |
| </form> |
| <input class="input1" required value="Valid" form="form2-with-renderer"> |
| <input class="input2" required value="Valid" form="form2-with-renderer"> |
| <input class="input3" required value="Valid" form="form2-with-renderer"> |
| <input class="input4" required value="Valid" form="form2-with-renderer"> |
| </div> |
| <div style="display:none;"> |
| <!-- Without renderer --> |
| <form id="form1-without-renderer"> |
| <input class="input1" required value="Valid"> |
| <input class="input2" required value="Valid"> |
| <input class="input3" required value="Valid"> |
| <input class="input4" required value="Valid"> |
| </form> |
| <form id="form2-without-renderer"> |
| <input class="input5" required value="Valid"> |
| <input class="input6" required value="Valid"> |
| <input class="input7" required value="Valid"> |
| <input class="input8" required value="Valid"> |
| </form> |
| <input class="input1" required value="Valid" form="form2-without-renderer"> |
| <input class="input2" required value="Valid" form="form2-without-renderer"> |
| <input class="input3" required value="Valid" form="form2-without-renderer"> |
| <input class="input4" required value="Valid" form="form2-without-renderer"> |
| </div> |
| </body> |
| <script> |
| |
| description('Test that we do not invalidate the style of <form> excessively when matching :invalid based on the associated elements.'); |
| |
| function shouldNeedStyleRecalc(expected) { |
| var testFunction = expected ? shouldBeTrue : shouldBeFalse; |
| testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-with-renderer"))'); |
| testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-with-renderer"))'); |
| testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form1-without-renderer"))'); |
| testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("form2-without-renderer"))'); |
| } |
| |
| function checkStyle(expectedColor) { |
| shouldBeEqualToString('getComputedStyle(document.getElementById("form1-with-renderer")).color', expectedColor); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("form2-with-renderer")).color', expectedColor); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("form1-without-renderer")).color', expectedColor); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("form2-without-renderer")).color', expectedColor); |
| } |
| |
| // Force a layout to ensure we don't have dirty styles. |
| var offsetTop = document.documentElement.offsetTop; |
| |
| // Initial state. |
| shouldNeedStyleRecalc(false); |
| checkStyle('rgb(0, 0, 0)'); |
| |
| // Make input3 invalid, the form should also become invalid. |
| var inputs3 = document.querySelectorAll('.input3'); |
| for (var i = 0; i < inputs3.length; ++i) |
| inputs3[i].value = ''; |
| |
| shouldNeedStyleRecalc(true); |
| checkStyle('rgb(0, 1, 2)'); |
| |
| // Making more fields invalid should not invalidate the form's style. |
| var inputs = document.querySelectorAll(':matches(.input2, .input4)'); |
| for (var i = 0; i < inputs.length; ++i) |
| inputs[i].value = ''; |
| |
| shouldNeedStyleRecalc(false); |
| checkStyle('rgb(0, 1, 2)'); |
| |
| // Removing valid fields should not invalidate the style. |
| var inputs1 = document.querySelectorAll(':matches(.input1)'); |
| for (var i = 0; i < inputs1.length; ++i) |
| inputs1[i].parentNode.removeChild(inputs1[i]); |
| |
| // Making all fields valid but one, form still does not need to be invalidated. |
| var inputs = document.querySelectorAll(':matches(.input2, .input3)'); |
| for (var i = 0; i < inputs.length; ++i) |
| inputs[i].removeAttribute('required'); |
| |
| shouldNeedStyleRecalc(false); |
| checkStyle('rgb(0, 1, 2)'); |
| |
| // Making the last input valid. The style must update, form must be invalidated. |
| var inputs = document.querySelectorAll(':matches(.input4)'); |
| for (var i = 0; i < inputs.length; ++i) |
| inputs[i].removeAttribute('required'); |
| |
| shouldNeedStyleRecalc(true); |
| checkStyle('rgb(0, 0, 0)'); |
| |
| document.getElementById("form1-without-renderer").style.display = 'none'; |
| document.getElementById("form2-without-renderer").style.display = 'none'; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
