1<!DOCTYPE html> 2<html> 3<head> 4<style> 5dialog div { 6 position: absolute; 7 top: 150px; 8 left: 150px; 9 height: 150px; 10 width: 150px; 11 background: pink; 12} 13 14dialog { 15 top: 150px; 16 left: 150px; 17 margin: 0; 18 height: 200px; 19 width: 200px; 20 padding: 0; 21 border: 0; 22 background: green; 23} 24 25dialog::backdrop { 26 top: 125px; 27 left: 125px; 28 height: 250px; 29 width: 250px; 30 position: absolute; 31 background: yellow; 32} 33 34embed { 35 position: absolute; 36 top: 100px; 37 left: 100px; 38} 39</style> 40<body> 41<p>This tests that plugins do not appear on top of top layer elements. The test 42passes if you see four boxes, whose stacking order is (from top to bottom): 43pink, green, yellow, blue. The pink box is positioned in a way to make it clear 44that it is on top of everything else.</p> 45<embed src="../../LayoutTests/plugins/resources/simple_blank.swf" 46 type="application/x-shockwave-flash" 47 width="300" height="300" loop="false"> 48<dialog> 49 <div></div> 50</dialog> 51<script> 52function dialogIsEnabled() { 53 return !!document.createElement('dialog').showModal; 54} 55 56function test() { 57 if (!dialogIsEnabled()) { 58 document.body.innerText = 'ERROR: <dialog> is not enabled. This test requires <dialog>.'; 59 return; 60 } 61 62 dialog = document.querySelector('dialog'); 63 dialog.showModal(); 64} 65 66test(); 67</script> 68</body> 69</html> 70 71