third_party/WebKit/LayoutTests/compositing/repaint/newly-composited-on-scroll.html

   1 <html>
   2 <head>
   3     <title>Reduction</title>
   4     <style>
   5     #content-container {
   6         position:absolute;
   7         top:48px;
   8         bottom:0;
   9         left:0;
  10         right:0;
  11         margin-left:225px;
  12     }
  13
  14     #composited {
  15         height: 38px;
  16         transform:translate3d(0px, 0px, 0px);
  17     }
  18
  19     #positioned-2 {
  20         position:absolute;
  21         top:40px;
  22         bottom:0;
  23         left:0;
  24         right:0;
  25     }
  26
  27     .positioned-3 {
  28         position:absolute;
  29         top:0;
  30         bottom:0;
  31         left:0;
  32         right:0;
  33     }
  34
  35     #transformed-container {
  36         transform: translateX(0);
  37         height:300px;
  38         width:600px;
  39     }
  40
  41     #overflow {
  42         overflow:auto;
  43         border: 2px solid black;
  44     }
  45
  46     .positioned-4 {
  47         position:absolute;
  48         top:20px;
  49         height:80px;
  50         right:20px;
  51         width:80px;
  52     }
  53     </style>
  54 </head>
  55
  56 <script src="../../resources/run-after-layout-and-paint.js"></script>
  57
  58 <script>
  59     if (window.testRunner) {
  60         testRunner.dumpAsTextWithPixelResults();
  61         testRunner.waitUntilDone();
  62     }
  63
  64     function repaintTest() {
  65         runAfterLayoutAndPaint(function() {
  66             document.getElementById('overflow').scrollTop = 30;
  67             runAfterLayoutAndPaint(function() {
  68                 document.getElementById('overflow').scrollTop = 50;
  69                 testRunner.notifyDone();
  70             });
  71         });
  72     }
  73
  74 </script>
  75
  76 <body onload="repaintTest()">
  77     <div id="content-container">
  78         <div id="composited"></div>
  79         <div id="positioned-2">
  80             <div id="transformed-container" class="positioned-3">
  81                 <div id="overflow" class="positioned-3">
  82                     <div class="positioned-4"></div>
  83
  84                     <div style="background-color:purple; width:50px; height:300px;"></div>
  85                     <br/>
  86                     <div style="width:500px; height:50px; background-color:green;"></div>
  87                 </div>
  88             </div>
  89         </div>
  90     </div>
  91 </body>
  92 </html>