<!DOCTYPE html>
<html>
  <head>
    <title>CSS Selectors Invalidation: :defined</title>
    <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-defined-pseudo">
    <meta name="assert" content="This tests that the :defined selector is effective">
    <link rel="help" href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-defined">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <style>
      #container {
        color: gray;
      }

      #a1:defined {
        color: blue;
      }
      :defined + #b1 {
        color: green;
      }
      :defined > #c1 {
        color: red;
      }
      div + :defined + * #d1 {
        color: yellow;
      }
  </style>
  </head>
  <body>
    <section id="container">
      <elucidate-late id="a1"></elucidate-late>
      <div id="b1"></div>
      <elucidate-late>
        <div id="c1"></div>
      </elucidate-late>
      <div>
        <div id="d1"></div>
      </div>
    </section>

    <script>
      const gray = "rgb(128, 128, 128)";
      const blue = "rgb(0, 0, 255)";
      const green = "rgb(0, 128, 0)";
      const red = "rgb(255, 0, 0)";
      const yellow = "rgb(255, 255, 0)";

      function assertGray(a, b, c, d) {
        assert_equals(getComputedStyle(a).color, gray);
        assert_equals(getComputedStyle(b).color, gray);
        assert_equals(getComputedStyle(c).color, gray);
        assert_equals(getComputedStyle(d).color, gray);
      }

      function assertColorful(a, b, c, d) {
        assert_equals(getComputedStyle(a).color, blue);
        assert_equals(getComputedStyle(b).color, green);
        assert_equals(getComputedStyle(c).color, red);
        assert_equals(getComputedStyle(d).color, yellow);
      }

      class ElucidateLate extends HTMLElement {
        constructor() {
          super();
        }
      }

      test(() => {
        assertGray(a1, b1, c1, d1);
        customElements.define('elucidate-late', ElucidateLate);
        assertColorful(a1, b1, c1, d1);
      }, ":defined selector is effective");

    </script>
  </body>
</html>