| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| * { |
| color: black; |
| } |
| root.style1 target { |
| color: rgb(1, 1, 1); |
| } |
| |
| root.style2 > inert target { |
| color: rgb(2, 2, 2); |
| } |
| |
| root.style3 inert + target { |
| color: rgb(3, 3, 3); |
| } |
| |
| root.style4 > target inert { |
| color: rgb(4, 4, 4); |
| } |
| |
| root:not(.style5) target { |
| color: rgb(5, 5, 5); |
| } |
| |
| root.dynamicStyle notTarget { |
| color: rgb(99, 99, 99); |
| } |
| |
| </style> |
| </head> |
| <body> |
| <root> |
| <!-- With renderer --> |
| <inert> |
| <inert> |
| <inert></inert> |
| <target> |
| <inert></inert> |
| <target></target> |
| </target> |
| </inert> |
| <target></target> |
| <inert></inert> |
| </inert> |
| </root> |
| <root style="display:none;"> |
| <!-- Without renderer --> |
| <inert> |
| <inert> |
| <inert></inert> |
| <target> |
| <inert></inert> |
| <target></target> |
| </target> |
| </inert> |
| <target></target> |
| <inert></inert> |
| </inert> |
| </root> |
| </body> |
| <script> |
| |
| description('Test that we invalidate the element subtree minimally on class attribute change'); |
| |
| function testStyleChangeType(tag, type) |
| { |
| var elements = document.querySelectorAll(tag); |
| for (var i = 0; i < elements.length; ++i) { |
| if (window.internals.styleChangeType(elements[i]) != type) |
| return false; |
| } |
| return true; |
| } |
| |
| function testStyleInvalidation(expectedDescendantStyleChange) { |
| // Ideally we would't invalidate the root at all. |
| shouldBeTrue('testStyleChangeType("root", "NoStyleChange") || testStyleChangeType("root", "InlineStyleChange")'); |
| |
| shouldBeTrue('testStyleChangeType("target", "' + expectedDescendantStyleChange +'")'); |
| |
| shouldBeTrue('testStyleChangeType("inert", "NoStyleChange")'); |
| } |
| |
| function addClass(name) { |
| debug("Adding class " + name); |
| var allRoots = document.querySelectorAll("root"); |
| allRoots[0].classList.add(name); |
| allRoots[1].classList.add(name); |
| } |
| |
| function removeClass(name) { |
| debug("Removing class " + name); |
| var allRoots = document.querySelectorAll("root"); |
| allRoots[0].classList.remove(name); |
| allRoots[1].classList.remove(name); |
| } |
| |
| function checkStyle(n) { |
| document.documentElement.offsetTop; |
| |
| hasExpectedStyle = true; |
| expectedColor = 'rgb('+n+', '+n+', '+n+')'; |
| var targets = document.querySelectorAll("target"); |
| for (var i = 0; i < targets.length; ++i) { |
| hasExpectedStyle = getComputedStyle(targets[i]).color == expectedColor; |
| if (!hasExpectedStyle) |
| break; |
| } |
| shouldBeTrue("hasExpectedStyle"); |
| } |
| |
| addClass('style5'); |
| |
| checkStyle(0); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(0); |
| |
| addClass('NotThere'); |
| testStyleInvalidation("NoStyleChange"); |
| |
| addClass('style1'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| addClass('style2'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(2); |
| |
| removeClass('style2'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| addClass('style3'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(3); |
| |
| removeClass('style3'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| addClass('style4'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(1); |
| |
| removeClass('NotThere'); |
| testStyleInvalidation("NoStyleChange"); |
| |
| removeClass('style1'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(0); |
| |
| removeClass('style5'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(5); |
| |
| addClass('style5'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(0); |
| |
| addClass('dynamicStyle'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(0); |
| |
| removeClass('dynamicStyle'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(0); |
| |
| var dynamicSheet = document.createElement("style"); |
| dynamicSheet.innerHTML = "root.dynamicStyle target { color:rgb(6, 6, 6); }" |
| debug("Inserting stylesheet '" + dynamicSheet.innerHTML + "'"); |
| document.head.appendChild(dynamicSheet); |
| |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(0); |
| |
| addClass('dynamicStyle'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(6); |
| |
| removeClass('dynamicStyle'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(0) |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
