third_party/WebKit/ManualTests/plugins/plugin-is-occluded-by-top-layer.html

   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