popover-backdrop-appearance.html (1393B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover ::backdrop pseudo 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-backdrop-appearance-ref.html"> 8 9 <style> 10 #bottom { top: 70px; left: 70px; } 11 #middle { top: 120px; left: 120px; } 12 #top { top: 170px; left: 170px; } 13 ::backdrop { height: 200px; width: 200px; } 14 #bottom::backdrop { 15 top: 50px; 16 left: 50px; 17 background-color: rgb(0, 50, 0); 18 z-index: 100; /* z-index has no effect. */ 19 } 20 #middle::backdrop { 21 top: 100px; 22 left: 100px; 23 background-color: rgb(0, 130, 0); 24 z-index: -100; /* z-index has no effect. */ 25 } 26 #top::backdrop { 27 top: 150px; 28 left: 150px; 29 background-color: rgb(0, 210, 0); 30 z-index: 0; /* z-index has no effect. */ 31 } 32 [popover] { 33 margin:0; 34 } 35 </style> 36 <p>Test for [popover]::backdrop presence and stacking order. The test passes 37 if there are 3 stacked boxes, with the brightest green on top.</p> 38 <div popover id=bottom>Bottom 39 <div popover=hint id=middle>Middle 40 <div popover=manual id=top>Top</div> 41 </div> 42 </div> 43 <script> 44 document.getElementById('bottom').showPopover(); 45 document.getElementById('middle').showPopover(); 46 document.getElementById('top').showPopover(); 47 </script>