has-slotted-functional-changing-001.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-001.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>Changing content targetting :has-slotted(...) and :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) + 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 = ' ';

      styles = getComputedStyle(target);

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

      test.replaceChildren();;

      styles = getComputedStyle(target);

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

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

      test.append(div);

      styles = getComputedStyle(target);

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

      const node = document.createTextNode(' ');

      test.replaceChildren(node);

      styles = getComputedStyle(target);

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

      test.innerHTML = '';

      styles = getComputedStyle(target);

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

});

  </script>

</body>

</html>