summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/popovers/popover-move-documents.html
blob: 11f52c2f2f0d14c74649cc7c52ac6e5ac68058b1 (plain)
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
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/whatwg/html/issues/9177">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<script>
async function iframeLoaded(iframe) {
  return new Promise(resolve => {
    if (iframe.contentWindow.document.readyState == 'complete') {
      resolve();
    } else {
      iframe.onload = resolve;
    }
  });
}
</script>

<iframe id=myframe srcdoc="<p>iframe</p>"></iframe>
<div id=p1 popover=auto>p1</div>
<script>
promise_test(async () => {
  await iframeLoaded(myframe);
  await new Promise(resolve => {
    if (myframe.contentWindow.document.readyState == 'complete') {
      resolve();
    } else {

    }
  });
  p1.addEventListener('beforetoggle', () => {
    myframe.contentWindow.document.body.appendChild(p1);
  });
  assert_throws_dom('InvalidStateError', () => p1.showPopover());
}, 'Moving popovers between documents while showing should throw an exception.');
</script>

<iframe id=myframe2 srcdoc="<p>iframe</p>"></iframe>
<div id=p2 popover=auto>p2</div>
<script>
promise_test(async () => {
  await iframeLoaded(myframe2);
  const p2 = document.getElementById('p2');
  p2.showPopover();
  p2.addEventListener('beforetoggle', () => {
    myframe2.contentWindow.document.body.appendChild(p2);
  });
  assert_true(p2.matches(':popover-open'),
    'The popover should be open after calling showPopover()');

  p2.hidePopover();
  assert_false(p2.matches(':popover-open'),
    'The popover should be closed after moving it between documents.');
}, 'Moving popovers between documents while hiding should not throw an exception.');
</script>

<iframe id=myframe3 srcdoc="<p>iframe</p>"></iframe>
<div id=p3 popover=auto>
  p3
  <div id=p4 popover=auto>p4</div>
  <div id=p5 popover=auto>p5</div>
</div>
<script>
promise_test(async () => {
  await iframeLoaded(myframe3);
  p3.showPopover();
  p4.showPopover();
  p4.addEventListener('beforetoggle', event => {
    if (event.newState === 'closed') {
      assert_true(p3.matches(':popover-open'),
        'p3 should be showing in the event handler.');
      assert_true(p4.matches(':popover-open'),
        'p4 should be showing in the event handler.');
      assert_equals(event.target, p4,
        'The events target should be p4.');
      myframe3.contentWindow.document.body.appendChild(p5);
    }
  });
  assert_true(p3.matches(':popover-open'),
    'p3 should be open after calling showPopover on it.');
  assert_true(p4.matches(':popover-open'),
    'p4 should be open after calling showPopover on it.');

  const p5 = document.getElementById('p5');
  assert_throws_dom('InvalidStateError', () => p5.showPopover());
  assert_false(p5.matches(':popover-open'),
    'p5 should be closed after moving it between documents.');
}, 'Moving popovers between documents during light dismiss should throw an exception.');
</script>