| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| fieldset { |
| color: black; |
| } |
| fieldset:invalid { |
| color: rgb(0, 1, 2); |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <!-- With renderer --> |
| <fieldset id="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"> |
| </fieldset> |
| </div> |
| <div style="display:none;"> |
| <!-- Without renderer --> |
| <fieldset id="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"> |
| </fieldset> |
| </div> |
| </body> |
| <script> |
| |
| description('Test that we do not invalidate the style of <fieldset> excessively when matching :invalid based on the descendants.'); |
| |
| function shouldNeedStyleRecalc(expected) { |
| var testFunction = expected ? shouldBeTrue : shouldBeFalse; |
| testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("with-renderer"))'); |
| testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("without-renderer"))'); |
| } |
| |
| function checkStyle(expectedColor) { |
| shouldBeEqualToString('getComputedStyle(document.getElementById("with-renderer")).color', expectedColor); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("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 fieldset should also become invalid. |
| var inputs3 = document.querySelectorAll('.input3'); |
| inputs3[0].value = ''; |
| inputs3[1].value = ''; |
| |
| shouldNeedStyleRecalc(true); |
| checkStyle('rgb(0, 1, 2)'); |
| |
| // Making more fields invalid should not invalidate the fieldset'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, fieldset 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, fieldset 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("with-renderer").style.display = 'none'; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
