src/third_party/WebKit/LayoutTests/compositing/self-painting-layers.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Self painting layers</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     </style>
  29
  30     <script src="resources/media-testing.js"></script>
  31     <script src="../media/media-file.js"></script>
  32
  33     <script type="text/javascript" charset="utf-8">
  34       function testDone()
  35       {
  36         if (window.testRunner)
  37           testRunner.notifyDone();
  38       }
  39
  40       function modifyDocument()
  41       {
  42         document.getElementById('details').scrollTop = 24;
  43       }
  44
  45       function doTest()
  46       {
  47         var video = document.getElementsByTagName('video')[0];
  48         setupVideo(video, 'resources/video', modifyDocument, testDone);
  49       }
  50     </script>
  51   </head>
  52   <body onload="doTest()">
  53       <p>You should not see double text when the div scrolls</p>
  54         <div id="container">
  55           <video id="video" width="300" height="200"></video>
  56         </div>
  57
  58         <div id="details">
  59             <div>
  60               Scrolled<br>text<br>here.
  61             </div>
  62         </div>
  63
  64   </body>
  65 </html>