popover-anchor-idl-property.tentative.html (1721B)
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 9 <div> 10 <button id=b1>This is an anchor button</button> 11 <div popover id=p1 anchor=b1>This is a popover</div> 12 <button id=b2 popovertarget=p1>This button invokes the popover but isn't an anchor</button> 13 </div> 14 15 <script> 16 test(function() { 17 assert_equals(p1.anchorElement,b1); 18 }, "popover anchorElement IDL property returns the anchor element"); 19 20 test(function() { 21 assert_equals(p1.anchorElement,b1); 22 p1.anchorElement = b2; 23 assert_equals(p1.anchorElement,b2); 24 assert_equals(p1.getAttribute('anchor'),'','Idref is empty after setting element'); 25 p1.anchorElement = b1; // Reset 26 }, "popover anchorElement is settable"); 27 </script> 28 29 <div> 30 <button id=b3>button</button> 31 <div id=p2>Anchored div</div> 32 </div> 33 <style> 34 * {margin:0;padding:0;} 35 #b3 {width: 200px;} 36 #p2 { 37 position: absolute; 38 left: anchor(right); 39 } 40 </style> 41 42 <script> 43 test(function() { 44 assert_equals(p2.anchorElement,null); 45 const button = document.getElementById('b3'); 46 assert_true(!!button); 47 p2.anchorElement = button; 48 assert_equals(p2.getAttribute('anchor'),'','Idref should be empty after setting element'); 49 assert_equals(p2.anchorElement,button,'Element reference should be button'); 50 assert_equals(p2.offsetLeft, 200, 'The anchor relationship should be functional'); 51 }, "anchorElement affects anchor positioning"); 52 </script>