popover-shadow-dom-anchor.tentative.html (3472B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:masonf@chromium.org"> 4 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="resources/popover-utils.js"></script> 9 10 <!-- Once anchor positioning lands in the spec, the tests in this file can 11 be re-inserted into popover-shadow-dom.html. --> 12 13 <script> 14 function findPopovers(root) { 15 let popovers = []; 16 if (!root) 17 return popovers; 18 if (root instanceof Element && root.matches('[popover]')) 19 popovers.push(root); 20 popovers.push(...findPopovers(root.shadowRoot)); 21 root.childNodes.forEach(child => { 22 popovers.push(...findPopovers(child)); 23 }) 24 return popovers; 25 } 26 function getPopoverReferences(testId) { 27 const testRoot = document.querySelector(`#${testId}`); 28 assert_true(!!testRoot); 29 return findPopovers(testRoot); 30 } 31 </script> 32 33 <div id=test1> 34 <button id=t2b1>Test 1 Popover 1</button> 35 <div popover anchor=t2b1 style="top: 200px;"> 36 <p>Popover 1</p> 37 <button id=t2b2>Test 1 Popover 2</button> 38 </div> 39 <my-element> 40 <template shadowrootmode=open> 41 <div popover anchor=t2b2 style="top: 400px;"> 42 <p>Hiding this popover will hide *all* open popovers,</p> 43 <p>because t2b2 doesn't exist in this context.</p> 44 </div> 45 </template> 46 </my-element> 47 </div> 48 49 <script> 50 test(function() { 51 const [popover1,popover2] = getPopoverReferences('test1'); 52 popover1.showPopover(); 53 assert_true(popover1.matches(':popover-open')); 54 assert_true(isElementVisible(popover1)); 55 popover2.showPopover(); 56 assert_false(popover1.matches(':popover-open'), 'popover1 open'); // P1 was closed by P2 57 assert_false(isElementVisible(popover1), 'popover1 visible'); 58 assert_true(popover2.matches(':popover-open'), 'popover2 open'); // P2 is open 59 assert_true(isElementVisible(popover2), 'popover2 visible'); 60 popover2.hidePopover(); // Cleanup 61 }, "anchor references do not cross shadow boundaries"); 62 </script> 63 64 65 <div id=test2> 66 <my-element> 67 <template shadowrootmode=open> 68 <button id=t3b1>Test 2 Popover 1</button> 69 <div popover anchor=t3b1> 70 <p>This popover will stay open when popover2 shows.</p> 71 <slot></slot> 72 </div> 73 </template> 74 <button id=t3b2>Test 2 Popover 2</button> 75 </my-element> 76 <div popover anchor=t3b2>Popover 2</div> 77 </div> 78 79 <script> 80 promise_test(async function() { 81 const [popover1,popover2] = getPopoverReferences('test2'); 82 popover1.showPopover(); 83 assert_true(popover1.matches(':popover-open')); 84 assert_true(isElementVisible(popover1)); 85 // Showing popover2 should not close popover1, since it is a flat 86 // tree ancestor of popover2's anchor button. 87 popover2.showPopover(); 88 assert_true(popover2.matches(':popover-open')); 89 assert_true(isElementVisible(popover2)); 90 assert_true(popover1.matches(':popover-open')); 91 assert_true(isElementVisible(popover1)); 92 popover1.hidePopover(); 93 await waitForRender(); 94 assert_false(popover1.matches(':popover-open')); 95 assert_false(isElementVisible(popover1)); 96 assert_false(popover2.matches(':popover-open')); 97 assert_false(isElementVisible(popover2)); 98 }, "anchor references use the flat tree not the DOM tree"); 99 </script>