wpt/css/selectors/invalidation/has-pseudo-element-subject-child-mutation.html at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!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>