Blitz - WPT: has-slotted-functional-changing-004.tentative.html

wpt / css / css-shadow / has-slotted-functional-changing-004.tentative.html
Enable JavaScript in test iframe
/css/css-shadow/has-slotted-functional-changing-004.tentative.html
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>Changing content targetting :has-slotted(...) through a single shadow root</title>
  <link rel="help" href="https://github.com/w3c/csswg-drafts/pull/10586">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script src="/resources/testdriver-actions.js"></script>
</head>

<body>


  <div id="test">
    <template shadowrootmode="open">
      <div id="inner">
        <template shadowrootmode="open">
          <slot></slot>
          <p id="target">This text will be styled.</p>
          <style>
            p {
              color: rgb(0 255 0);
            }
            slot:not(:has-slotted(span)) + p {
              color: rgb(0 0 255);
            }
            slot:not(:has-slotted(div)) + p {
              color: rgb(255 0 255);
            }
          </style>
        </template>
      </div>
    </template>
  </div>


  <script>
    const blue = 'rgb(0, 0,  255)';
    const green = 'rgb(0, 255, 0)';
    const fuchsia = 'rgb(255, 0, 255)';
    test(function () {
      const test = document.getElementById('test');
      const inner = test.shadowRoot.getElementById('inner');
      const target = inner.shadowRoot.getElementById('target');
      let styles = getComputedStyle(target);
      assert_equals(styles.getPropertyValue('color'), green);
      const span = document.createElement('span');
      test.append(span);
      styles = getComputedStyle(target);
      assert_equals(styles.getPropertyValue('color'), blue);
      test.removeChild(span);
      styles = getComputedStyle(target);
      assert_equals(styles.getPropertyValue('color'), green);
      test.innerHTML = '<div></div>';
      styles = getComputedStyle(target);
      assert_equals(styles.getPropertyValue('color'), fuchsia);
      test.replaceChildren(span);
      styles = getComputedStyle(target);
      assert_equals(styles.getPropertyValue('color'), blue);
      span.remove();
      styles = getComputedStyle(target);
      assert_equals(styles.getPropertyValue('color'), green);
    });
  </script>
</body>

</html>