| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| #sibling, #child { background-color: green } |
| custom-one:not(:defined) #child, |
| custom-two:not(:defined) + #sibling { |
| background-color: red |
| } |
| </style> |
| |
| <custom-one> |
| <div></div> |
| <div id="child"></div> |
| </custom-one> |
| |
| <custom-two> |
| <div></div> |
| <div></div> |
| </custom-two> |
| <div id="sibling"></div> |
| |
| <script> |
| const RED = "rgb(255, 0, 0)"; |
| const GREEN = "rgb(0, 128, 0)"; |
| |
| test(() => { |
| // Initially :not(:defined). |
| assert_equals(getComputedStyle(child).backgroundColor, RED); |
| assert_equals(getComputedStyle(sibling).backgroundColor, RED); |
| |
| document.body.offsetTop; // force recalc |
| |
| customElements.define("custom-one", class extends HTMLElement {}); |
| if (window.internals) |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
| assert_equals(getComputedStyle(child).backgroundColor, GREEN); |
| |
| document.body.offsetTop; // force recalc |
| |
| customElements.define("custom-two", class extends HTMLElement {}); |
| if (window.internals) |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
| assert_equals(getComputedStyle(sibling).backgroundColor, GREEN); |
| |
| }, "Use invalidation sets for :defined pseudo class.") |
| </script> |
