popover-open-overflow-display-2.html (2394B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/popover-utils.js"></script> 7 <script> 8 async function checkStatus(p) { 9 p.showPopover(); 10 await waitForRender(); 11 assert_true(p.matches(":popover-open")); 12 p.hidePopover(); 13 await waitForRender(); 14 } 15 </script> 16 17 <div id=container style="overflow: hidden; position: absolute;"> 18 <div popover="auto" id=p1 style="position: absolute; top: 100px;">Absolute popover inside absolute element</div> 19 </div> 20 <script> 21 promise_test(async () => { 22 await checkStatus(document.querySelector("#p1")); 23 }, "Absolute popover inside absolute element"); 24 </script> 25 26 <div id=p2 popover="auto" style="overflow: hidden; position: absolute;"> 27 <div style="position: absolute; top: 100px;">Absolute element inside absolute popover</div> 28 </div> 29 <script> 30 promise_test(async () => { 31 await checkStatus(document.querySelector("#p2")); 32 }, "Absolute element inside absolute popover"); 33 </script> 34 35 <div id=container style="overflow: hidden; position: fixed;"> 36 <div popover="auto" id=p3 style="position: fixed; top: 100px;">Fixed popover inside fixed element</div> 37 </div> 38 <script> 39 promise_test(async () => { 40 await checkStatus(document.querySelector("#p3")); 41 }, "Fixed popover inside fixed element"); 42 </script> 43 44 <div id=p4 popover="auto" style="overflow: hidden; position: fixed;"> 45 <div style="position: fixed; top: 100px;">Fixed element inside fixed popover</div> 46 </div> 47 <script> 48 promise_test(async () => { 49 await checkStatus(document.querySelector("#p4")); 50 }, "Fixed element inside fixed popover"); 51 </script> 52 53 <div id=container style="overflow: hidden; position: fixed;"> 54 <div popover="auto" id=p5 style="position: absolute; top: 100px;">Absolute popover inside fixed element</div> 55 </div> 56 <script> 57 promise_test(async () => { 58 await checkStatus(document.querySelector("#p5")); 59 }, "Absolute popover inside fixed element"); 60 </script> 61 62 <div id=p6 popover="auto" style="overflow: hidden; position: absolute;"> 63 <div style="position: fixed; top: 100px;">Fixed element inside absolute popover</div> 64 </div> 65 <script> 66 promise_test(async () => { 67 await checkStatus(document.querySelector("#p6")); 68 }, "Fixed element inside absolute popover"); 69 </script>