third_party/WebKit/LayoutTests/compositing/reflections/load-video-in-reflection.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6
   7     .container {
   8       width: 300px;
   9       -webkit-animation: spin 18s infinite linear;
  10     }
  11
  12     video {
  13       -webkit-box-reflect: below;
  14       background-color: red;
  15     }
  16
  17     @-webkit-keyframes spin {
  18       from { transform: rotate(0); }
  19       to   { transform: rotate(0); }
  20     }
  21
  22   </style>
  23   <script src="../resources/media-testing.js"></script>
  24   <script src="../../media/media-file.js"></script>
  25   <script type="text/javascript" charset="utf-8">
  26     function testDone()
  27     {
  28       if (window.testRunner)
  29         testRunner.notifyDone();
  30     }
  31
  32     function doTest()
  33     {
  34       var video = document.getElementsByTagName('video')[0];
  35       setupVideo(video, '../resources/video', testDone);
  36     }
  37   </script>
  38 </head>
  39 <body onload="doTest()">
  40   <p>You should see a reflected video below, rather than the red video background.</p>
  41   <div class="container">
  42     <video></video>
  43   </div>
  44 </body>
  45 </html>