third_party/WebKit/ManualTests/plugins/plugin-occlusion-with-plugin-in-top-layer.html

   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>