popover-stacking-anchor-attribute.tentative.html (3608B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:masonf@chromium.org"> 4 <link rel=help href="https://www.w3.org/TR/css-anchor-position-1/#implicit"> 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 9 <!-- Once this test is made non-tentative, it can be folded back into popover-stacking.html --> 10 11 <div class="example"> 12 <p>anchor attribute relationship</p> 13 <div id=anchor1 popover class=ancestor><p>Ancestor popover</p></div> 14 <div anchor=anchor1 popover class=child><p>Child popover</p></div> 15 </div> 16 17 <div class="example"> 18 <p>indirect anchor attribute relationship</p> 19 <div popover class=ancestor> 20 <p>Ancestor popover</p> 21 <div> 22 <div> 23 <span id=anchor2>Anchor</span> 24 </div> 25 </div> 26 </div> 27 <div anchor=anchor2 popover class=child><p>Child popover</p></div> 28 </div> 29 30 <!-- Other examples --> 31 32 <div popover id=p1 anchor=b1><p>This is popover #1</p> 33 <button id=b2 onclick='p2.showPopover()'>Popover 2</button> 34 <button id=b4 onclick='p4.showPopover()'>Popover 4</button> 35 </div> 36 <div popover id=p2 anchor=b2><p>This is popover #2</p> 37 <button id=b3 onclick='p3.showPopover()'>Popover 3</button> 38 </div> 39 <div popover id=p3 anchor=b3><p>This is popover #3</p></div> 40 <div popover id=p4 anchor=b4><p>This is popover #4</p></div> 41 <button id=b1 onclick='p1.showPopover()'>Popover 1</button> 42 43 <dialog id=d1>This is a dialog<button onclick='this.parentElement.close()'>Close</button></dialog> 44 <button id=b5 onclick='d1.showPopover()'>Dialog</button> 45 46 <script> 47 // Test basic ancestor relationships 48 for(let example of document.querySelectorAll('.example')) { 49 const descr = example.querySelector('p').textContent; 50 const ancestor = example.querySelector('[popover].ancestor'); 51 const child = example.querySelector('[popover].child'); 52 const clickToActivate = example.querySelector('.clickme'); 53 test(function() { 54 assert_true(!!descr && !!ancestor && !!child); 55 assert_false(ancestor.matches(':popover-open')); 56 assert_false(child.matches(':popover-open')); 57 ancestor.showPopover(); 58 if (clickToActivate) 59 clickToActivate.click(); 60 else 61 child.showPopover(); 62 assert_true(child.matches(':popover-open')); 63 assert_true(ancestor.matches(':popover-open')); 64 ancestor.hidePopover(); 65 assert_false(ancestor.matches(':popover-open')); 66 assert_false(child.matches(':popover-open')); 67 },descr); 68 } 69 70 const popovers = [p1, p2, p3, p4]; 71 72 function assertState(...states) { 73 assert_equals(popovers.length,states.length); 74 for(let i=0;i<popovers.length;++i) { 75 assert_equals(popovers[i].matches(':popover-open'),states[i],`Popover #${i+1} incorrect state`); 76 } 77 } 78 test(function() { 79 assertState(false,false,false,false); 80 p1.showPopover(); 81 assertState(true,false,false,false); 82 p2.showPopover(); 83 assertState(true,true,false,false); 84 p3.showPopover(); 85 assertState(true,true,true,false); 86 // P4 is a sibling of P2, so showing it should 87 // close P2 and P3. 88 p4.showPopover(); 89 assertState(true,false,false,true); 90 // P2 should close P4 now. 91 p2.showPopover(); 92 assertState(true,true,false,false); 93 // Hiding P1 should hide all. 94 p1.hidePopover(); 95 assertState(false,false,false,false); 96 }, "more complex nesting, all using anchor ancestry") 97 </script> 98 99 <style> 100 #p1 { top:350px; } 101 #p2 { top:350px; left:200px; } 102 #p3 { top:500px; } 103 #p4 { top:500px;left:200px; } 104 </style>