defined-pseudo.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/css/invalidation/defined-pseudo.html
