wpt/css/selectors/invalidation/has-pseudoclass-only.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<title>CSS Selectors Invalidation: :has() containing :empty, :first-child, :last-child, pseudoclasses only</title>
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<link rel="help" href="https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/selectors/#relational">
<link rel="help" href="https://un5h208565ak8emkwgjjkgb49yug.julianrbryant.com/show_bug.cgi?id=1931432">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#subject {
  color: grey;
}

#subject.empty:has(:empty) {
  color: red;
}

#subject.first:has(:first-child) {
  color: orange;
}

#subject.last:has(:last-child) {
  color: yellow;
}

/* :empty :empty never matches, so use something else. */
#subject.empty-subtree:has(:first-child :empty) {
  color: green;
}

#subject.first-subtree:has(:first-child :first-child) {
  color: blue;
}

#subject.last-subtree:has(:last-child :last-child) {
  color: purple;
}
</style>
<div id="subject"></div>
<script>
const grey = "rgb(128, 128, 128)";
const red = "rgb(255, 0, 0)";
const orange = "rgb(255, 165, 0)";
const yellow = "rgb(255, 255, 0)";
const green = "rgb(0, 128, 0)";
const blue = 'rgb(0, 0, 255)';
const purple = 'rgb(128, 0, 128)';

function testColor(test_name, color) {
  test(function() {
    assert_equals(getComputedStyle(subject).color, color);
  }, test_name);
}

function runTest(test_class, child, insert, color_after_add, desc) {
  subject.classList.add(test_class);
  testColor(desc + ' color initial', grey);
  insert(child);
  testColor(desc + ' color after adding', color_after_add);
  subject.replaceChildren();
  testColor(desc + ' color after removing', grey);
  subject.classList.remove(test_class);
}

function createSimpleTree() {
  const root = document.createElement('div');
  root.replaceChildren(document.createElement('div'), document.createElement('div'));
  return root;
}

const tests = {
  ':empty': {cls: 'empty', child: document.createElement('div'), color_after_add: red},
  ':first-child': {cls: 'first', child: document.createElement('div'), color_after_add: orange},
  ':last-child': {cls: 'last', child: document.createElement('div'), color_after_add: yellow},
  ':empty subtree': {cls: 'empty-subtree', child: createSimpleTree(), color_after_add: green},
  ':first-child subtree': {cls: 'first-subtree', child: createSimpleTree(), color_after_add: blue},
  ':last-child subtree': {cls: 'last-subtree', child: createSimpleTree(), color_after_add: purple},
};

const element = document.createElement('div');
for (const [t, options] of Object.entries(tests)) {
  runTest(options.cls, options.child, (e) => subject.appendChild(e), options.color_after_add, t + ' append');
  runTest(options.cls, options.child, (e) => subject.insertBefore(e, null), options.color_after_add, t + ' insert');
}
</script>