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

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5     div {
   6         -webkit-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.dumpAsTextWithPixelResults();
  29         testRunner.waitUntilDone(true);
  30     }
  31     var video = document.querySelector('video');
  32     video.onerror = endTest;
  33     video.src = "bogus.ogv";
  34 }
  35
  36 function endTest() {
  37     if (window.testRunner)
  38         testRunner.notifyDone();
  39 }
  40 </script>
  41 <body onload="runTest()">
  42         <!-- video controls should appear in their own layer -->
  43         <video controls>
  44         </video>
  45
  46         <!-- this div is beneath the video in a stacking context and should through the video into compositing due to overlap -->
  47         <div></div>
  48     </body>
  49 </html>
  50