Home | History | Annotate | Download | only in plugins 
      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <style>
      5 dialog {
      6   margin: 0;
      7   padding: 0;
      8   border: 0;
      9 }
     10 
     11 dialog::backdrop, embed {
     12   position: absolute;
     13 }
     14 
     15 dialog.top {
     16   top: 150px;
     17   left: 150px;
     18   height: 200px;
     19   width: 200px;
     20   background: green;
     21 }
     22 
     23 dialog.top::backdrop {
     24   top: 140px;
     25   left: 140px;
     26   height: 220px;
     27   width: 220px;
     28   background: yellow;
     29 }
     30 
     31 dialog.bottom embed {
     32   top: 10px;
     33   left: 10px;
     34 }
     35 
     36 dialog.bottom {
     37   top: 120px;
     38   left: 120px;
     39   height: 260px;
     40   width: 260px;
     41   background: green;
     42 }
     43 
     44 dialog.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
     59 top layer elements.  The test passes if you see six boxes stacked on each other,
     60 in 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>
     76 function dialogIsEnabled() {
     77   return !!document.createElement('dialog').showModal;
     78 }
     79 
     80 function 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 
     92 test();
     93 </script>
     94 </body>
     95 </html>
     96