| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| * { |
| color: black; |
| } |
| [CamelCase] { |
| color: pink; |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <!-- With renderer --> |
| <target></target> |
| </div> |
| <div style="display:none;"> |
| <!-- Without renderer --> |
| <target></target> |
| </div> |
| </body> |
| <script> |
| // It is okay to increase the amount of invalidation in this test for correctness if necessary. |
| description('Test that we only invalidate the style when changing an attribute referenced by a stylesheet. This test requires the internals object to work properly.'); |
| |
| function shouldNeedStyleRecalc(expected) { |
| var testFunction = expected ? shouldBeTrue : shouldBeFalse; |
| testFunction("window.internals.nodeNeedsStyleRecalc(document.querySelectorAll(\"target\")[0])"); |
| testFunction("window.internals.nodeNeedsStyleRecalc(document.querySelectorAll(\"target\")[1])"); |
| } |
| |
| function setAttribute(name, value) { |
| var allTargets = document.querySelectorAll("target"); |
| allTargets[0].setAttribute(name, value); |
| allTargets[1].setAttribute(name, value); |
| } |
| |
| function removeAttribute(name) { |
| var allTargets = document.querySelectorAll("target"); |
| allTargets[0].removeAttribute(name); |
| allTargets[1].removeAttribute(name); |
| } |
| |
| function getStyle() { |
| var allTargets = document.querySelectorAll("target"); |
| getComputedStyle(allTargets[0]).color; |
| getComputedStyle(allTargets[1]).color; |
| } |
| |
| // Force a layout to ensure we don't have dirty styles. |
| var offsetTop = document.documentElement.offsetTop; |
| shouldNeedStyleRecalc(false); |
| |
| debug("Changing the attribute 'foo', it is not referenced by any stylesheet and should not cause any invalidation."); |
| setAttribute("foo", "bar"); |
| shouldNeedStyleRecalc(false); |
| |
| debug("Changing the attribute 'CamelCase'. It is used by the stylesheet and should cause the target to be invalidated."); |
| setAttribute("CamelCase", ""); |
| shouldNeedStyleRecalc(true); |
| |
| debug("Getting the computed style should for the style to be resolved."); |
| getStyle(); |
| shouldNeedStyleRecalc(false); |
| |
| debug("Removing the attribute should also invalidate the style."); |
| removeAttribute("CamelCase"); |
| shouldNeedStyleRecalc(true); |
| |
| debug("Getting the computed style should for the style to be resolved."); |
| getStyle(); |
| shouldNeedStyleRecalc(false) |
| |
| debug("Changing the attribute 'camelcase'. It is not used as such by the stylesheet, but in HTML attribute names are case-insensitive and we should still invalidate the style."); |
| setAttribute("camelcase", ""); |
| shouldNeedStyleRecalc(true); |
| |
| debug("Getting the computed style should for the style to be resolved."); |
| getStyle(); |
| shouldNeedStyleRecalc(false); |
| |
| debug("Removing the attribute should also invalidate the style."); |
| removeAttribute("CamelCase"); |
| shouldNeedStyleRecalc(true); |
| |
| debug("Getting the computed style should for the style to be resolved."); |
| getStyle(); |
| shouldNeedStyleRecalc(false) |
| |
| debug("Changing the attribute 'CAMELCASE'. It is not used as such by the stylesheet, but in HTML attribute names are case-insensitive and we should still invalidate the style."); |
| setAttribute("CAMELCASE", ""); |
| shouldNeedStyleRecalc(true); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
