popover-alignment-002.html (876B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>Tests that popover alignment responds to anchor positioning</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#conditional-centering"> 5 <link rel="match" href="popover-alignment-002-ref.html"> 6 <link rel="author" href="mailto:tabatkins@google.com"> 7 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 8 9 <style> 10 button { 11 border: solid blue 15px; 12 margin: 25px; 13 } 14 [popover] { 15 border: solid orange 10px; 16 } 17 </style> 18 19 Orange box should be centered vertically against the left edge of the blue box. 20 <button popovertarget=p3></button> 21 <div id="p3" popover style="position-area: left span-all"></div> 22 23 <script> 24 document.querySelector("[popover]").showPopover({ source: document.querySelector("button") }); 25 document.documentElement.removeAttribute("class"); 26 </script>