popover-dialog-appearance.html (829B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Dialog-Popover 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-dialog-appearance-ref.html"> 8 9 <p>Both dialogs should have the same shades of background.</p> 10 <p>The popover should have a completely-transparent ::backdrop.</p> 11 <dialog popover id=d1>This is a modal dialog</dialog> 12 <dialog popover id=d2>This is a dialog popover</dialog> 13 14 <style> 15 dialog { 16 left: 50px; 17 right: auto; 18 bottom: auto; 19 } 20 #d1 {top:100px;} 21 #d2 {top:150px;} 22 </style> 23 24 <script> 25 document.getElementById('d1').showModal(); 26 document.getElementById('d2').showPopover(); 27 </script>