| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| dialog div { |
| position: absolute; |
| top: 150px; |
| left: 150px; |
| height: 150px; |
| width: 150px; |
| background: pink; |
| } |
| |
| dialog { |
| top: 150px; |
| left: 150px; |
| margin: 0; |
| height: 200px; |
| width: 200px; |
| padding: 0; |
| border: 0; |
| background: green; |
| } |
| |
| dialog::backdrop { |
| top: 125px; |
| left: 125px; |
| height: 250px; |
| width: 250px; |
| position: absolute; |
| background: yellow; |
| } |
| |
| embed { |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| } |
| </style> |
| <body> |
| <p>This tests that plugins do not appear on top of top layer elements. The test |
| passes if you see four boxes, whose stacking order is (from top to bottom): |
| pink, green, yellow, blue. The pink box is positioned in a way to make it clear |
| that it is on top of everything else.</p> |
| <embed src="../../LayoutTests/plugins/resources/simple_blank.swf" |
| type="application/x-shockwave-flash" |
| width="300" height="300" loop="false"> |
| <dialog> |
| <div></div> |
| </dialog> |
| <script> |
| function dialogIsEnabled() { |
| return !!document.createElement('dialog').showModal; |
| } |
| |
| function test() { |
| if (!dialogIsEnabled()) { |
| document.body.innerText = 'ERROR: <dialog> is not enabled. This test requires <dialog>.'; |
| return; |
| } |
| |
| dialog = document.querySelector('dialog'); |
| dialog.showModal(); |
| } |
| |
| test(); |
| </script> |
| </body> |
| </html> |
| |
