| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| * { |
| background-color: rgb(255, 254, 253); |
| } |
| foo.property+padding+padding+padding+bar { |
| background-color: rgb(1, 2, 3); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="test-case"> |
| <foo class="foo property bar"></foo> |
| <padding></padding> |
| <padding></padding> |
| <padding></padding> |
| <bar id="bar-with-renderer"></bar> |
| </div> |
| <div class="test-case" style="display:none;"> |
| <foo class="foo property bar"></foo> |
| <padding></padding> |
| <padding></padding> |
| <padding></padding> |
| <bar id="bar-without-renderer"></bar> |
| </div> |
| </body> |
| <script> |
| description('Selectors\' sibling combinators ("+" or "~") create style update relation between elements. This test the case were such relation exists and is removed. This test relies on WebCore\'s internals.'); |
| |
| function testUnrelatedElementsAreUnchanged() |
| { |
| var others = document.querySelectorAll("foo, padding"); |
| for (var i = 0; i < others.length; ++i) |
| shouldBeEqualToString('getComputedStyle(document.querySelectorAll("foo, padding")[' + i + ']).backgroundColor', 'rgb(255, 254, 253)'); |
| } |
| |
| debug("Initially, the direct adjacent relation is satisfied and we have a match."); |
| testUnrelatedElementsAreUnchanged(); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| |
| |
| debug("We remove <bar>, there is nothing matching the rightmost compound selector."); |
| var barWithRenderer = document.getElementById("bar-with-renderer"); |
| barWithRenderer.parentElement.removeChild(barWithRenderer); |
| var barWithoutRenderer = document.getElementById("bar-without-renderer"); |
| barWithoutRenderer.parentElement.removeChild(barWithoutRenderer); |
| |
| // No element should be dirty after the removal. This is testing the invalidation optimization, not correctness. |
| if (window.internals) { |
| var allContent = document.querySelectorAll(".test-case, .test-case *"); |
| for (var i = 0; i < allContent.length; ++i) |
| shouldBeFalse('internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[' + i + '])'); |
| } |
| |
| shouldBeNull('document.getElementById("bar-with-renderer")'); |
| shouldBeNull('document.getElementById("bar-without-renderer")'); |
| testUnrelatedElementsAreUnchanged(); |
| |
| |
| debug("Now we change a property of <foo>. Doing that can invalidate foo, but not the other elements."); |
| |
| var allFoos = document.querySelectorAll("foo"); |
| for (var i = 0; i < allFoos.length; ++i) |
| allFoos[i].classList.remove("property"); |
| |
| // No element should be dirty after the removal. This is testing the invalidation optimization, not correctness. |
| if (window.internals) { |
| var allContent = document.querySelectorAll(".test-case, .test-case :not(foo)"); |
| for (var i = 0; i < allContent.length; ++i) |
| shouldBeFalse('internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[' + i + '])'); |
| } |
| |
| shouldBeNull('document.getElementById("bar-with-renderer")'); |
| shouldBeNull('document.getElementById("bar-without-renderer")'); |
| testUnrelatedElementsAreUnchanged(); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
