wpt/css/selectors/invalidation/open-pseudo-class-in-has.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Selectors Invalidation: :modal pseudo class in :has()</title>
<link rel="author" title="Luke Warlow" href="mailto:lwarlow@igalia.com">
<link rel="help" href="https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/selectors/#relational">
<link rel="help" href="https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/selectors-4/#open-state">
<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>
<style>
  #subject:has(#dialog:open) { color: green; }
  #subject:has(#details:open) { color: blue; }
  #subject:has(#select:open) { color: red; }
</style>
<div id="subject">
  This is some text.
  <dialog id="dialog">This is a dialog</dialog>
  <details id="details">This is a details</details>
  <select id="select"><option>1</option></select>
</div>
<script>
    // Dialog tests
  test(function() {
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black");
    dialog.show();
    assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)",
                  "ancestor should be green since dialog is open");
    dialog.close();
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black since dialog is closed");
  }, ":open pseudo-class invalidation with dialog.show() + dialog.close()");
  test(function() {
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black ");
    dialog.show();
    assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)",
                  "ancestor should be green since dialog is open");
    dialog.requestClose();
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black since dialog is closed");
  }, ":open pseudo-class invalidation with dialog.show() + dialog.requestClose()");
  test(function(t) {
    t.add_cleanup(() => {
      dialog.open = true;
      dialog.close();
    });
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black");
    dialog.show();
    assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)",
                  "ancestor should be green since dialog is open");
    dialog.open = false;
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black since dialog is closed");
  }, ":open pseudo-class invalidation with dialog.show() + dialog.open = false");
  test(function() {
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black");
    dialog.showModal();
    assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)",
                  "ancestor should be green since dialog is open");
    dialog.close();
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black since dialog is closed");
  }, ":open pseudo-class invalidation with dialog.showModal() + dialog.close()");
  test(function() {
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black");
    dialog.showModal();
    assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)",
                  "ancestor should be green since dialog is shown modally");
    dialog.requestClose();
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black since dialog is closed");
  }, ":open pseudo-class invalidation with dialog.showModal() + dialog.requestClose()");
  test(function(t) {
    t.add_cleanup(() => {
      dialog.open = true;
      dialog.close();
    });
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black");
    dialog.showModal();
    assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)",
                  "ancestor should be green since dialog is open");
    dialog.open = false;
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black since dialog is closed");
  }, ":open pseudo-class invalidation with dialog.showModal() + dialog.open = false");
  test(function(t) {
    t.add_cleanup(() => {
      dialog.open = true;
      dialog.close();
    });
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black");
    dialog.open = true;
    assert_equals(getComputedStyle(subject).color, "rgb(0, 128, 0)",
                  "ancestor should be green since dialog is open");
    dialog.open = false;
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black since dialog is closed");
  }, ":open pseudo-class invalidation with dialog.open = true/false");
  // Details tests
  test(function() {
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black");
    details.open = true;
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 255)",
                  "ancestor should be green since details is open");
      details.open = false;
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black since details is closed");
  }, ":open pseudo-class invalidation with details.open = true/false");
  // Select tests
  promise_test(async t => {
    assert_equals(getComputedStyle(subject).color, "rgb(0, 0, 0)",
                  "ancestor should be black");
    await test_driver.bless('show picker');
    select.showPicker();
    assert_equals(getComputedStyle(subject).color, "rgb(255, 0, 0)",
                  "ancestor should be green since select is open");
  }, ":open pseudo-class invalidation with select.showPicker()");
</script>