has-pseudo-element-subject-child-mutation.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/selectors/invalidation/has-pseudo-element-subject-child-mutation.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Selectors Test: :has() invalidation for child mutation when subject is a pseudo-element</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<link rel="help" href="https://drafts.csswg.org/selectors/#relational">

<style>

  .box::before {

    content: " ";

    display: inline-block;

    width: 5px;

    height: 5px;

  #attr:has(> [width="16"][height="16"])::before { width: 50px; }

  #childClass:has(> .trigger)::before { width: 50px; }

  #descendantClass:has(.trigger)::before { width: 50px; }

</style>

<div class="box" id="attr"></div>

<div class="box" id="childClass"></div>

<div class="box" id="descendantClass"></div>

<script>

  function beforeWidth(element) {

    return getComputedStyle(element, "::before").width;

  test(() => {

    assert_equals(beforeWidth(attr), "5px");

    assert_equals(beforeWidth(childClass), "5px");

    assert_equals(beforeWidth(descendantClass), "5px");

  }, "Initially 5px");

  test(() => {

    const child = document.createElementNS("http://www.w3.org/2000/svg", "svg");

    child.setAttribute("width", "16");

    child.setAttribute("height", "16");

    attr.appendChild(child);

    assert_equals(beforeWidth(attr), "50px");

  }, "Pseudo-element ::before invalidates when a matching child is added (attribute selector, child combinator)");

  test(() => {

    const child = document.createElement("div");

    child.className = "trigger";

    childClass.appendChild(child);

    assert_equals(beforeWidth(childClass), "50px");

  }, "Pseudo-element ::before invalidates when a matching child is added (class selector, child combinator)");

  test(() => {

    const child = document.createElement("div");

    child.className = "trigger";

    descendantClass.appendChild(child);

    assert_equals(beforeWidth(descendantClass), "50px");

  }, "Pseudo-element ::before invalidates when a matching descendant is added (class selector, descendant combinator)");

</script>