popover-backdrop-appearance-ref.html (1243B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover ::backdrop pseudo element appearance</title> 4 <link rel="stylesheet" href="resources/popover-styles.css"> 5 6 <style> 7 #bottom { top: 70px; left: 70px; } 8 #middle { top: 120px; left: 120px; } 9 #top { top: 170px; left: 170px; } 10 .fake-popover-backdrop { 11 height: 200px; 12 width: 200px; 13 } 14 #bottom-backdrop { 15 top: 50px; 16 left: 50px; 17 background-color: rgb(0, 50, 0); 18 } 19 #middle-backdrop { 20 top: 100px; 21 left: 100px; 22 background-color: rgb(0, 130, 0); 23 } 24 #top-backdrop { 25 top: 150px; 26 left: 150px; 27 background-color: rgb(0, 210, 0); 28 } 29 .fake-popover { 30 margin:0; 31 } 32 </style> 33 <p>Test for [popover]::backdrop presence and stacking order. The test passes 34 if there are 3 stacked boxes, with the brightest green on top.</p> 35 <div popover id=bottom>Bottom 36 <div popover id=middle>Middle 37 <div popover=manual id=top>Top</div> 38 </div> 39 </div> 40 <div id="bottom-backdrop" class="fake-popover-backdrop"></div> 41 <div id="bottom" class="fake-popover">Bottom</div> 42 <div id="middle-backdrop" class="fake-popover-backdrop"></div> 43 <div id="middle" class="fake-popover">Middle</div> 44 <div id="top-backdrop" class="fake-popover-backdrop"></div> 45 <div id="top" class="fake-popover">Top</div>