popover-appearance.html (888B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover element appearance</title> 4 <link rel="author" href="mailto:masonf@chromium.org"> 5 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 6 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> 7 <link rel="match" href="popover-appearance-ref.html"> 8 9 <style> 10 [popover] {top: 100px; bottom: auto;} 11 [popover=""] {left: -300px} 12 [popover=auto] {left: -100px; } 13 [popover=manual] {left: 100px; } 14 [popover=invalid] {left: 300px; } 15 </style> 16 17 <p>There should be four popovers with similar appearance.</p> 18 <div popover>Blank 19 <div popover=auto>Auto</div> 20 </div> 21 <div popover=manual>Manual</div> 22 <!-- This ensures unsupported popover values are treated as popover=manual --> 23 <div popover=invalid>Invalid</div> 24 <script> 25 document.querySelectorAll('[popover]').forEach(p => p.showPopover()); 26 </script>