Home | History | Annotate | Download | only in plugins 
      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <style>
      5 dialog div {
      6   position: absolute;
      7   top: 150px;
      8   left: 150px;
      9   height: 150px;
     10   width: 150px;
     11   background: pink;
     12 }
     13 
     14 dialog {
     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 
     25 dialog::backdrop {
     26   top: 125px;
     27   left: 125px;
     28   height: 250px;
     29   width: 250px;
     30   position: absolute;
     31   background: yellow;
     32 }
     33 
     34 embed {
     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
     42 passes if you see four boxes, whose stacking order is (from top to bottom):
     43 pink, green, yellow, blue. The pink box is positioned in a way to make it clear
     44 that 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>
     52 function dialogIsEnabled() {
     53   return !!document.createElement('dialog').showModal;
     54 }
     55 
     56 function 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 
     66 test();
     67 </script>
     68 </body>
     69 </html>
     70 
     71