wpt/css/selectors/active-toplayer-001.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
127
128
<!DOCTYPE html>
<meta charset="utf-8">
<title>Selectors: :active should not propagate past top layer elements</title>
<link rel="help" href="https://drafts.csswg.org/selectors/#the-active-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#top-layer">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
  dialog::backdrop {
    background: transparent;
  }
</style>

<div id="outer">
  <dialog id="dialog">
    <div id="inner">click target</div>
  </dialog>
</div>

<div id="popoverOuter">
  <div id="popover" popover>
    <div id="popoverInner">click target</div>
  </div>
</div>

<div id="nestOuter">
  <dialog id="nestDialog">
    <div id="nestPopover" popover>
      <div id="nestInner">click target</div>
    </div>
  </dialog>
</div>

<script>
function captureActiveState(elements, target) {
  return new Promise(resolve => {
    target.addEventListener('mousedown', () => {
      const result = {};
      for (const [name, el] of Object.entries(elements)) {
        result[name] = el.matches(':active');
      }
      resolve(result);
    }, {once: true});
  });
}

promise_test(async t => {
  const dialog = document.getElementById('dialog');
  dialog.showModal();
  t.add_cleanup(() => dialog.close());

  const inner = document.getElementById('inner');
  const outer = document.getElementById('outer');

  const statePromise = captureActiveState({
    inner, dialog, outer, body: document.body
  }, inner);

  await new test_driver.Actions()
    .pointerMove(1, 1, {origin: inner})
    .pointerDown()
    .pointerUp()
    .send();

  const state = await statePromise;
  assert_true(state.inner, 'inner element should match :active');
  assert_true(state.dialog, 'dialog (top layer) should match :active');
  assert_false(state.outer, 'ancestor outside top layer should not match :active');
  assert_false(state.body, 'body should not match :active');
}, 'Clicking inside a modal dialog should not propagate :active beyond the dialog.');

promise_test(async t => {
  const popover = document.getElementById('popover');
  popover.showPopover();
  t.add_cleanup(() => popover.hidePopover());

  const popoverInner = document.getElementById('popoverInner');
  const popoverOuter = document.getElementById('popoverOuter');

  const statePromise = captureActiveState({
    popoverInner, popover, popoverOuter, body: document.body
  }, popoverInner);

  await new test_driver.Actions()
    .pointerMove(1, 1, {origin: popoverInner})
    .pointerDown()
    .pointerUp()
    .send();

  const state = await statePromise;
  assert_true(state.popoverInner, 'inner element should match :active');
  assert_true(state.popover, 'popover (top layer) should match :active');
  assert_false(state.popoverOuter, 'ancestor outside top layer should not match :active');
  assert_false(state.body, 'body should not match :active');
}, 'Clicking inside a popover should not propagate :active beyond the popover.');

promise_test(async t => {
  const nestDialog = document.getElementById('nestDialog');
  nestDialog.showModal();
  t.add_cleanup(() => nestDialog.close());

  const nestPopover = document.getElementById('nestPopover');
  nestPopover.showPopover();
  t.add_cleanup(() => nestPopover.hidePopover());

  const nestInner = document.getElementById('nestInner');
  const nestOuter = document.getElementById('nestOuter');

  const statePromise = captureActiveState({
    nestInner, nestPopover, nestDialog, nestOuter, body: document.body
  }, nestInner);

  await new test_driver.Actions()
    .pointerMove(1, 1, {origin: nestInner})
    .pointerDown()
    .pointerUp()
    .send();

  const state = await statePromise;
  assert_true(state.nestInner, 'inner element should match :active');
  assert_true(state.nestPopover, 'popover (innermost top layer) should match :active');
  assert_false(state.nestDialog, 'dialog (outer top layer) should not match :active');
  assert_false(state.nestOuter, 'ancestor outside both top layers should not match :active');
}, 'With nested top layer elements, :active should stop at the innermost top layer boundary.');
</script>