| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| * { |
| background-color: rgb(0, 0, 0); |
| } |
| :nth-last-child(n of foo, bar, *, .target) { |
| background-color: rgb(255, 255, 255); |
| } |
| :root { |
| background-color: rgb(255, 255, 255); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="test-case"> |
| <parent id="parent1"> |
| <target></target> |
| <target id="target1"></target> |
| </parent> |
| </div> |
| <div class="test-case" style="display:none;"> |
| <parent id="parent2"> |
| <target></target> |
| <target id="target2"></target> |
| </parent> |
| </div> |
| </body> |
| <script> |
| description('Verify that style invalidation of elements affected by :nth-last-child() no not cause an invalidation storm.'); |
| |
| // Force a layout. |
| document.documentElement.offsetTop; |
| |
| // Nothing should need a style recalc. |
| var allContent = document.querySelectorAll("*"); |
| for (var i = 0; i < allContent.length; ++i) { |
| if (internals.nodeNeedsStyleRecalc(allContent[i])) { |
| testFailed("Invalid initial state, node " + i + " has dirty style."); |
| break; |
| } |
| } |
| |
| // Change the class of target1, this could change the order of rules and need to cause a style recalc. |
| var target1 = document.getElementById('target1'); |
| target1.className = 'target'; |
| |
| var allContent = document.querySelectorAll("*"); |
| for (var i = 0; i < allContent.length; ++i) { |
| var node = allContent[i]; |
| if (internals.nodeNeedsStyleRecalc(node)) { |
| if (node !== target1 && node !== target1.previousElementSibling) { |
| testFailed("Invalidating the style of target1 should never invalidate more than target1 and its siblings."); |
| break; |
| } |
| } |
| } |
| |
| document.documentElement.offsetTop; |
| |
| // Change the class of target1, this could change the order of rules and need to cause a style recalc. |
| var target2 = document.getElementById('target2'); |
| target2.className = 'target'; |
| |
| var allContent = document.querySelectorAll("*"); |
| for (var i = 0; i < allContent.length; ++i) { |
| var node = allContent[i]; |
| if (internals.nodeNeedsStyleRecalc(node)) { |
| if (node !== target2 && node !== target2.previousElementSibling) { |
| testFailed("Invalidating the style of target2 should never invalidate more than target1 and its siblings."); |
| break; |
| } |
| } |
| } |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
