third_party/WebKit/LayoutTests/compositing/geometry/video-opacity-overlay.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     video {
   6       width: 100%;
   7       height: 100%;
   8     }
   9
  10     .container {
  11       position: relative;
  12       width: 400px;
  13       height: 300px;
  14       border: 1px solid black;
  15     }
  16
  17     .controls {
  18       opacity: 0.8;
  19       height: 10px;
  20       width: 10px;
  21       background-color: green;
  22     }
  23
  24     #control-bar {
  25       position: absolute;
  26       left: 0;
  27       bottom: 0px;
  28       width: 100%;
  29       height: 60px;
  30       background-color: orange;
  31     }
  32   </style>
  33   <script src="../resources/media-testing.js"></script>
  34   <script src="../../media/media-file.js"></script>
  35   <script type="text/javascript" charset="utf-8">
  36     function testDone()
  37     {
  38       if (window.testRunner)
  39         testRunner.notifyDone();
  40     }
  41
  42     function doTest()
  43     {
  44       var video = document.getElementsByTagName('video')[0];
  45       setupVideo(video, '../resources/video', testDone);
  46     }
  47   </script>
  48 </head>
  49 <body onload="doTest()">
  50   <p>The orange bar should be in front of the video.</p>
  51   <div class="container">
  52     <video></video>
  53     <div class="controls" id="controls">
  54       <div id="control-bar"></div>
  55     </div>
  56   </div>
  57
  58 </body>
  59 </html>