| <!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:first-child { |
| color:rgb(1,2,3); |
| } |
| rightmost .target:not(:first-child) { |
| background-color:rgb(4, 5, 6); |
| } |
| |
| ancestor .target { |
| color:rgb(255, 255, 255); |
| background-color:rgb(255, 255, 255); |
| } |
| ancestor .parent:first-child .target { |
| color:rgb(7, 8, 9); |
| } |
| ancestor .parent:not(:first-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 :first-child changes, even if there is no renderer."); |
| |
| debug("Base case for rightmost element with :first-child"); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).color', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(4, 5, 6)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(4, 5, 6)'); |
| |
| |
| var target1 = document.getElementById("target1"); |
| var parentElement = target1.parentElement; |
| parentElement.removeChild(target1); |
| |
| debug("Removed first child (target1)"); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(4, 5, 6)'); |
| |
| parentElement.appendChild(target1); |
| |
| debug("Add back target1 at the end"); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(1, 2, 3)'); |
| 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")).backgroundColor', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(4, 5, 6)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(4, 5, 6)'); |
| |
| |
| debug("Base case for a styled element with an ancestor affected by :first-child"); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).color', 'rgb(7, 8, 9)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).color', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(10, 11, 12)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(10, 11, 12)'); |
| |
| var target4Parent = document.getElementById("target4").parentElement; |
| var parentElement = target4Parent.parentElement; |
| parentElement.removeChild(target4Parent); |
| |
| debug("Removed first child (target4's parent)"); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(7, 8, 9)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).color', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(10, 11, 12)'); |
| |
| debug("Add back target4's parent at the end"); |
| parentElement.appendChild(target4Parent); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(7, 8, 9)'); |
| 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")).backgroundColor', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(10, 11, 12)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(10, 11, 12)'); |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </html> |
