src/third_party/WebKit/LayoutTests/compositing/visibility/visibility-simple-video-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       .box {
   6           height: 150px;
   7           width: 150px;
   8       }
   9
  10       div {
  11           width: 150px;
  12           margin: 5px;
  13           padding: 5px;
  14           border: 1px solid black;
  15       }
  16
  17       .hidden {
  18           visibility: hidden;
  19       }
  20
  21       .visible {
  22           visibility: visible;
  23           background-color: green;
  24       }
  25
  26       .composited {
  27           transform: translateZ(1px);
  28       }
  29     </style>
  30
  31     <script src="../resources/media-testing.js"></script>
  32     <script src="../../media/media-file.js"></script>
  33     <script type="text/javascript" charset="utf-8">
  34       if (window.testRunner)
  35           testRunner.dumpAsTextWithPixelResults();
  36
  37       var counter = 0;
  38       function notifyVideoDone() {
  39           counter = counter + 1;
  40           if ((counter === 3) && (window.testRunner))
  41               testRunner.notifyDone();
  42       }
  43
  44       function doTest()
  45       {
  46           setupVideo(document.getElementsByTagName('video')[0], '../resources/video', notifyVideoDone);
  47           setupVideo(document.getElementsByTagName('video')[1], '../resources/video', notifyVideoDone);
  48           setupVideo(document.getElementsByTagName('video')[2], '../resources/video', notifyVideoDone);
  49       }
  50     </script>
  51   </head>
  52
  53   <body onload="doTest()">
  54     <!-- Tests CSS visibility flag for composited video layers. -->
  55     <!-- Pixel test only. Only the top video should be visible, the other two should be hidden (borders should remain visible) -->
  56     <div><video class="visible composited box"></video></div>
  57     <div><video class="hidden box"></video></div>
  58     <div><video class="hidden composited box"></video></div>
  59   </body>
  60 </html>