third_party/WebKit/LayoutTests/compositing/video/video-controls-layer-creation-squashing.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5     div {
   6         transform:translateZ(0);
   7         position: absolute;
   8         top: 100px;
   9         left: 0px;
  10         width: 300px;
  11         height: 300px;
  12         background-color: green;
  13         z-index: 2;
  14     }
  15     video {
  16         position: absolute;
  17         top: 0px;
  18         left: 0px;
  19         width: 272px;
  20         height: 153px;
  21         z-index: 3;
  22     }
  23 </style>
  24 </head>
  25 <script>
  26 function runTest() {
  27     if (window.testRunner)
  28         testRunner.waitUntilDone(true);
  29
  30     var video = document.querySelector('video');
  31     video.onerror = endTest;
  32     video.src = "bogus.ogv";
  33 }
  34
  35 function endTest() {
  36     if (window.testRunner)
  37         testRunner.notifyDone();
  38 }
  39 </script>
  40 <body onload="runTest()">
  41         <!-- video controls should appear in their own layer -->
  42         <video controls>
  43         </video>
  44
  45         <!-- this div is beneath the video in a stacking context and should through the video into compositing due to overlap -->
  46         <div></div>
  47     </body>
  48 </html>
  49