| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| * { |
| color: black; |
| } |
| #id1 target { |
| color: rgb(1, 1, 1); |
| } |
| |
| #id2 > inert target { |
| color: rgb(2, 2, 2); |
| } |
| |
| #id3 { |
| color: rgb(3, 3, 3); |
| } |
| |
| #id4 { |
| color: rgb(4, 4, 4); |
| } |
| |
| |
| </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 basic style invalidation optimization on id mutation'); |
| |
| function testStyleChangeType(tag, type) |
| { |
| var elements = document.querySelectorAll(tag); |
| for (var i = 0; i < elements.length; ++i) { |
| debug(window.internals.styleChangeType(elements[i])); |
| if (window.internals.styleChangeType(elements[i]) != type) |
| return false; |
| } |
| return true; |
| } |
| |
| function testStyleInvalidation(expectedDescendantStyleChange) { |
| shouldBeTrue('testStyleChangeType("root", "' + expectedDescendantStyleChange +'")'); |
| } |
| |
| function setId(name) { |
| debug("Setting id " + name); |
| var allRoots = document.querySelectorAll("root"); |
| allRoots[0].id = name; |
| allRoots[1].id = 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"); |
| } |
| |
| checkStyle(0); |
| testStyleInvalidation("NoStyleChange"); |
| |
| setId('NotThere'); |
| testStyleInvalidation("NoStyleChange"); |
| |
| setId('id1'); |
| testStyleInvalidation("FullStyleChange"); |
| checkStyle(1); |
| |
| setId('id2'); |
| testStyleInvalidation("FullStyleChange"); |
| checkStyle(2); |
| |
| setId('id1'); |
| testStyleInvalidation("FullStyleChange"); |
| checkStyle(1); |
| |
| setId('id3'); |
| testStyleInvalidation("FullStyleChange"); |
| checkStyle(0); |
| |
| setId('id4'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(0); |
| |
| setId('id4'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(0); |
| |
| setId('NotThere'); |
| testStyleInvalidation("InlineStyleChange"); |
| |
| setId('id1'); |
| testStyleInvalidation("FullStyleChange"); |
| checkStyle(1); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
