LayoutTests/compositing/video/video-background-color.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <title>Video with background color</title>
   6   <style type="text/css" media="screen">
   7     body {
   8       outline: 10px solid transparent; /* affects layer sizes */
   9     }
  10     video, .wrapper {
  11       display: block;
  12       margin: 20px;
  13       height: 180px;
  14       width: 260px;
  15       background-color: rgba(0, 0, 128, 0.5);
  16     }
  17
  18     .wrapper > img {
  19       position: relative;
  20       left: 30px;
  21     }
  22   </style>
  23   <script type="text/javascript" charset="utf-8">
  24     if (window.layoutTestController)
  25       layoutTestController.waitUntilDone();
  26   </script>
  27 </head>
  28 <body>
  29
  30   <div class="wrapper">
  31     <img src="../resources/alpha-gradient-small.png">
  32   </div>
  33   <video autoplay loop></video>
  34
  35   <p>Top and bottom should look the same.</p>
  36
  37   <script type="text/javascript" charset="utf-8">
  38     var video = document.getElementsByTagName('video')[0];
  39     video.src = '../resources/alpha-gradient-small.' + (video.canPlayType('video/ogg') ? 'ogv' : 'mov');
  40     video.addEventListener('canplaythrough', function() {
  41       if (window.layoutTestController)
  42         layoutTestController.notifyDone();
  43     }, false);
  44   </script>
  45
  46 </body>
  47 </html>