popover-move-documents.html (2939B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/9177"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <script> 8 async function iframeLoaded(iframe) { 9 return new Promise(resolve => { 10 if (iframe.contentWindow.document.readyState == 'complete') { 11 resolve(); 12 } else { 13 iframe.onload = resolve; 14 } 15 }); 16 } 17 </script> 18 19 <iframe id=myframe srcdoc="<p>iframe</p>"></iframe> 20 <div id=p1 popover=auto>p1</div> 21 <script> 22 promise_test(async () => { 23 await iframeLoaded(myframe); 24 await new Promise(resolve => { 25 if (myframe.contentWindow.document.readyState == 'complete') { 26 resolve(); 27 } else { 28 29 } 30 }); 31 p1.addEventListener('beforetoggle', () => { 32 myframe.contentWindow.document.body.appendChild(p1); 33 }); 34 assert_throws_dom('InvalidStateError', () => p1.showPopover()); 35 }, 'Moving popovers between documents while showing should throw an exception.'); 36 </script> 37 38 <iframe id=myframe2 srcdoc="<p>iframe</p>"></iframe> 39 <div id=p2 popover=auto>p2</div> 40 <script> 41 promise_test(async () => { 42 await iframeLoaded(myframe2); 43 const p2 = document.getElementById('p2'); 44 p2.showPopover(); 45 p2.addEventListener('beforetoggle', () => { 46 myframe2.contentWindow.document.body.appendChild(p2); 47 }); 48 assert_true(p2.matches(':popover-open'), 49 'The popover should be open after calling showPopover()'); 50 51 p2.hidePopover(); 52 assert_false(p2.matches(':popover-open'), 53 'The popover should be closed after moving it between documents.'); 54 }, 'Moving popovers between documents while hiding should not throw an exception.'); 55 </script> 56 57 <iframe id=myframe3 srcdoc="<p>iframe</p>"></iframe> 58 <div id=p3 popover=auto> 59 p3 60 <div id=p4 popover=auto>p4</div> 61 <div id=p5 popover=auto>p5</div> 62 </div> 63 <script> 64 promise_test(async () => { 65 await iframeLoaded(myframe3); 66 p3.showPopover(); 67 p4.showPopover(); 68 p4.addEventListener('beforetoggle', event => { 69 if (event.newState === 'closed') { 70 assert_true(p3.matches(':popover-open'), 71 'p3 should be showing in the event handler.'); 72 assert_true(p4.matches(':popover-open'), 73 'p4 should be showing in the event handler.'); 74 assert_equals(event.target, p4, 75 'The events target should be p4.'); 76 myframe3.contentWindow.document.body.appendChild(p5); 77 } 78 }); 79 assert_true(p3.matches(':popover-open'), 80 'p3 should be open after calling showPopover on it.'); 81 assert_true(p4.matches(':popover-open'), 82 'p4 should be open after calling showPopover on it.'); 83 84 const p5 = document.getElementById('p5'); 85 assert_throws_dom('InvalidStateError', () => p5.showPopover()); 86 assert_false(p5.matches(':popover-open'), 87 'p5 should be closed after moving it between documents.'); 88 }, 'Moving popovers between documents during light dismiss should throw an exception.'); 89 </script>