1<!DOCTYPE html> 2<html> 3<head> 4<style> 5dialog { 6 margin: 0; 7 padding: 0; 8 border: 0; 9} 10 11dialog::backdrop, embed { 12 position: absolute; 13} 14 15dialog.top { 16 top: 150px; 17 left: 150px; 18 height: 200px; 19 width: 200px; 20 background: green; 21} 22 23dialog.top::backdrop { 24 top: 140px; 25 left: 140px; 26 height: 220px; 27 width: 220px; 28 background: yellow; 29} 30 31dialog.bottom embed { 32 top: 10px; 33 left: 10px; 34} 35 36dialog.bottom { 37 top: 120px; 38 left: 120px; 39 height: 260px; 40 width: 260px; 41 background: green; 42} 43 44dialog.bottom::backdrop { 45 top: 110px; 46 left: 110px; 47 height: 280px; 48 width: 280px; 49 background: yellow; 50} 51 52#bottom-embed { 53 top: 100px; 54 left: 100px; 55} 56</style> 57<body> 58<p>This tests that plugins in the top layer are occluded only by higher-stacked 59top layer elements. The test passes if you see six boxes stacked on each other, 60in order (from top to bottom): green, yellow, blue, green, yellow, blue. 61</p> 62 63<embed id="bottom-embed" 64 src="../../LayoutTests/plugins/resources/simple_blank.swf" 65 type="application/x-shockwave-flash" 66 width="300" height="300" loop="false"> 67 68<dialog class="bottom"> 69 <embed src="../../LayoutTests/plugins/resources/simple_blank.swf" 70 type="application/x-shockwave-flash" 71 width="240" height="240" loop="false"> 72</dialog> 73 74<dialog class="top"></dialog> 75<script> 76function dialogIsEnabled() { 77 return !!document.createElement('dialog').showModal; 78} 79 80function test() { 81 if (!dialogIsEnabled()) { 82 document.body.innerText = 'ERROR: <dialog> is not enabled. This test requires <dialog>.'; 83 return; 84 } 85 86 dialogBottom = document.querySelector('dialog.bottom'); 87 dialogBottom.showModal(); 88 dialogTop = document.querySelector('dialog.top'); 89 dialogTop.showModal(); 90} 91 92test(); 93</script> 94</body> 95</html> 96