popover-dialog-appearance-ref.html (908B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Dialog-Popover appearance</title> 4 <link rel="author" href="mailto:masonf@chromium.org"> 5 6 <p>Both dialogs should have the same shades of background.</p> 7 <p>The popover should have a completely-transparent ::backdrop.</p> 8 <dialog popover id=d1>This is a modal dialog</dialog> 9 <dialog popover id=d2>This is a dialog popover</dialog> 10 11 <style> 12 dialog { 13 left: 50px; 14 right: auto; 15 bottom: auto; 16 } 17 #d1 {top:100px;} 18 #d2 {top:150px;} 19 /* Force backdrop to spec: */ 20 #d1::backdrop { 21 /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */ 22 background-color: rgba(0, 0, 0, 0.1); 23 } 24 #d2::backdrop { 25 /* When shown as a popover, backdrop must be transparent */ 26 background-color: transparent; 27 } 28 </style> 29 30 <script> 31 document.getElementById('d1').showModal(); 32 document.getElementById('d2').showPopover(); 33 </script>