has-slotted-functional-changing-002.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-scoping/has-slotted-functional-changing-002.tentative.html - WPT Dashboard Interop Dashboard

<!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">

      <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>

  <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 target = test.shadowRoot.getElementById('target');

      let styles = getComputedStyle(target);

      assert_equals(styles.getPropertyValue('color'), green);

      test.innerHTML = '<span></span>';

      styles = getComputedStyle(target);

      assert_equals(styles.getPropertyValue('color'), blue);

      test.textContent = '';

      styles = getComputedStyle(target);

      assert_equals(styles.getPropertyValue('color'), green);

      const div = document.createElement('div');

      test.replaceChild(div, test.firstElementChild);

      styles = getComputedStyle(target);

      assert_equals(styles.getPropertyValue('color'), fuchsia);

      const span = document.createElement('span');

      test.replaceChildren(span);

      styles = getComputedStyle(target);

      assert_equals(styles.getPropertyValue('color'), blue);

      test.replaceChildren();

      styles = getComputedStyle(target);

      assert_equals(styles.getPropertyValue('color'), green);

});

  </script>

</body>

</html>