| <!doctype html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <style> |
| rightmost .target { |
| color:rgb(0,0,0); |
| background-color:rgb(0, 0, 0); |
| } |
| rightmost .target:last-child { |
| color:rgb(1,2,3); |
| } |
| rightmost .target:not(:last-child) { |
| background-color:rgb(4, 5, 6); |
| } |
| |
| ancestor .target { |
| color:rgb(255, 255, 255); |
| background-color:rgb(255, 255, 255); |
| } |
| ancestor .parent:last-child .target { |
| color:rgb(7, 8, 9); |
| } |
| ancestor .parent:not(:last-child) .target { |
| background-color:rgb(10, 11, 12); |
| } |
| </style> |
| </head> |
| <body> |
| <div style="display:none"> |
| <rightmost> |
| <span id="target1" class="target"></span> |
| <span id="target2" class="target"></span> |
| <span id="target3" class="target"></span> |
| </rightmost> |
| <ancestor> |
| <span class="parent"> |
| <span id="target4" class="target"></span> |
| </span> |
| <span class="parent"> |
| <span id="target5" class="target"></span> |
| </span> |
| <span class="parent"> |
| <span id="target6" class="target"></span> |
| </span> |
| </ancestor> |
| </div> |
| </body> |
| <script> |
| description("When updating the tree, the style needs to be invalidated when the :last-child changes, even if there is no renderer."); |
| |
| debug("Base case for rightmost element with :last-child"); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).color', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(4, 5, 6)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(4, 5, 6)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(0, 0, 0)'); |
| |
| |
| var target3 = document.getElementById("target3"); |
| var parentElement = target1.parentElement; |
| parentElement.removeChild(target3); |
| |
| debug("Removed first child (target3)"); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(4, 5, 6)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(0, 0, 0)'); |
| |
| parentElement.insertBefore(target3, parentElement.firstChild); |
| |
| debug("Add back target3 at the start"); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(4, 5, 6)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(4, 5, 6)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(0, 0, 0)'); |
| |
| debug("Base case for a styled element with an ancestor affected by :last-child"); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).color', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).color', 'rgb(7, 8, 9)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(10, 11, 12)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(10, 11, 12)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(255, 255, 255)'); |
| |
| var target6Parent = document.getElementById("target6").parentElement; |
| var parentElement = target6Parent.parentElement; |
| parentElement.removeChild(target6Parent); |
| |
| debug("Removed last child (target6's parent)"); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).color', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(7, 8, 9)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(10, 11, 12)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(255, 255, 255)'); |
| debug("Add back target6's parent at the end"); |
| parentElement.insertBefore(target6Parent, parentElement.firstChild); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).color', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).color', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(7, 8, 9)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(10, 11, 12)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(10, 11, 12)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(255, 255, 255)'); |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </html> |
