| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| * { |
| color: black; |
| } |
| target.Case1 { |
| color: rgb(0, 1, 2); |
| } |
| target:matches(foo, .Case2, bar) { |
| color: rgb(3, 4, 5); |
| } |
| target:matches(foo1, :matches(foo2, .Case3, bar1), bar2) { |
| color: rgb(6, 7, 8); |
| } |
| target:matches(foo1, :matches(foo2, :matches(foo3, .Case4, bar1), bar2), bar3) { |
| color: rgb(9, 10, 11); |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <!-- With renderer --> |
| <target></target> |
| </div> |
| <div style="display:none;"> |
| <!-- Without renderer --> |
| <target></target> |
| </div> |
| </body> |
| <script> |
| |
| description('Test that we do not invalidate the style of an element if we are changing a class that is not used by the stylesheet.'); |
| |
| 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 addClass(name) { |
| var allTargets = document.querySelectorAll("target"); |
| allTargets[0].classList.add(name); |
| allTargets[1].classList.add(name); |
| } |
| |
| function checkStyle(expectedColor) { |
| var allTargets = document.querySelectorAll("target"); |
| shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[0]).color', expectedColor); |
| shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[1]).color', expectedColor); |
| } |
| // Force a layout to ensure we don't have dirty styles. |
| var offsetTop = document.documentElement.offsetTop; |
| shouldNeedStyleRecalc(false); |
| |
| addClass('NotThere'); |
| shouldNeedStyleRecalc(false); |
| |
| addClass('Case1'); |
| shouldNeedStyleRecalc(true); |
| checkStyle('rgb(0, 1, 2)'); |
| shouldNeedStyleRecalc(false); |
| |
| addClass('case1'); |
| shouldNeedStyleRecalc(false); |
| |
| addClass('Case2'); |
| shouldNeedStyleRecalc(true); |
| checkStyle('rgb(3, 4, 5)'); |
| shouldNeedStyleRecalc(false); |
| |
| addClass('case2'); |
| shouldNeedStyleRecalc(false); |
| |
| addClass('Case3'); |
| shouldNeedStyleRecalc(true); |
| checkStyle('rgb(6, 7, 8)'); |
| shouldNeedStyleRecalc(false); |
| |
| addClass('case3'); |
| shouldNeedStyleRecalc(false); |
| |
| addClass('Case4'); |
| shouldNeedStyleRecalc(true); |
| checkStyle('rgb(9, 10, 11)'); |
| shouldNeedStyleRecalc(false); |
| |
| addClass('case4'); |
| shouldNeedStyleRecalc(false); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
