third_party/WebKit/LayoutTests/compositing/overflow/overflow-compositing-descendant.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5
   6     .movie {
   7         position: absolute;
   8         overflow: hidden;
   9         height: 200px;
  10         width: 110px;
  11         padding: 10px;
  12         background-color: white;
  13         border: 1px solid black;
  14     }
  15
  16     video {
  17         background-color: black;
  18     }
  19
  20     .box {
  21       width: 100px;
  22       height: 100px;
  23     }
  24
  25     .test {
  26         position: relative;
  27         margin-top: -100px;
  28         background-color: green;
  29     }
  30
  31     .indicator {
  32         background-color: red;
  33     }
  34   </style>
  35   <script type="text/javascript" charset="utf-8">
  36     if (window.testRunner)
  37       testRunner.waitUntilDone();
  38   </script>
  39 </head>
  40 <body>
  41
  42     <p>You should see a green box under the video. If you see red, the test failed.</p>
  43     <div class="movie content">
  44         <video height="100" width="100"></video>
  45         <div class="indicator box"></div>
  46         <div class="test box"></div>
  47     </div>
  48
  49     <script type="text/javascript" charset="utf-8">
  50       var video = document.getElementsByTagName('video')[0];
  51       video.src = '../resources/video.' + (video.canPlayType('video/ogg') ? 'ogv' : 'mp4');
  52       video.addEventListener('canplaythrough', function() {
  53         if (window.testRunner)
  54           testRunner.notifyDone();
  55       }, false);
  56     </script>
  57
  58 </body>
  59 </html>