src/third_party/WebKit/LayoutTests/compositing/layers-inside-overflow-scroll.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Layers inside overflow-scroll</title>
   5
   6     <style type="text/css" media="screen">
   7
   8     #container {
   9       width: 300px;
  10       margin: 10px;
  11       border: 1px solid black;
  12     }
  13
  14     #details {
  15      width: 300px;
  16      height: 150px;
  17      margin: 10px;
  18      overflow: auto;
  19      border: 1px solid black;
  20     }
  21
  22     #details > div {
  23       width: 100%;
  24       height: 500px;
  25       font-size: 24pt;
  26       line-height: 150%;
  27     }
  28
  29     .compositing {
  30       height: 100px;
  31       width: 100px;
  32       background-color: red;
  33       transform: translateZ(0);
  34     }
  35     </style>
  36     <script src="resources/media-testing.js"></script>
  37     <script src="../media/media-file.js"></script>
  38
  39     <script type="text/javascript" charset="utf-8">
  40       function testDone()
  41       {
  42         document.getElementById('details').scrollTop = 100;
  43         if (window.testRunner)
  44           testRunner.notifyDone();
  45       }
  46
  47       function doTest()
  48       {
  49           var video = document.getElementsByTagName('video')[0];
  50           setupVideo(video, 'resources/video', testDone);
  51       }
  52     </script>
  53   </head>
  54   <body onload="doTest()">
  55       <p>The red box in the overflow:scroll div should be scrolled out of view.</p>
  56         <div id="container">
  57           <video width="300" height="200"></video>
  58         </div>
  59
  60         <div id="details">
  61             <div>
  62               <div class="compositing"></div>
  63             </div>
  64         </div>
  65
  66   </body>
  67 </html>