src/third_party/WebKit/LayoutTests/compositing/overflow/composited-scrolling-paint-phases.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   5   <title>Composited scrolling paint phases</title>
   6   <style type="text/css" media="screen">
   7     .container {
   8       width: 200px;
   9       height: 200px;
  10       overflow: scroll;
  11       margin: 20px;
  12       border: 1px solid black;
  13     }
  14
  15     .composited {
  16       width: 80px;
  17       height: 10px;
  18       position: relative;
  19       top: 10px;
  20       -webkit-transform: translateZ(0);
  21       background-color: green;
  22       z-index: -1;
  23     }
  24
  25     .not-composited {
  26       width: 80px;
  27       height: 20px;
  28       margin: 5px;
  29       background-color: blue;
  30     }
  31   </style>
  32   <script>
  33     if (window.testRunner)
  34       window.testRunner.dumpAsText();
  35
  36     if (window.internals)
  37       window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  38
  39     function write(str)
  40     {
  41       var pre = document.getElementById('console');
  42       var text = document.createTextNode(str + '\n');
  43       pre.appendChild(text);
  44     }
  45
  46     function doTest()
  47     {
  48       write(window.internals.layerTreeAsText(document, window.internals.LAYER_TREE_INCLUDES_PAINTING_PHASES));
  49       if (window.testRunner)
  50         window.testRunner.notifyDone();
  51     }
  52
  53     window.addEventListener('load', doTest, false);
  54
  55     if (window.testRunner)
  56       window.testRunner.waitUntilDone();
  57   </script>
  58 </head>
  59 <body>
  60   <div class="container">
  61     <div class="composited"></div>
  62     <div class="not-composited"></div>
  63     <div class="not-composited"></div>
  64     <div class="not-composited"></div>
  65     <div class="not-composited"></div>
  66     <div class="not-composited"></div>
  67     <div class="not-composited"></div>
  68     <div class="not-composited"></div>
  69     <div class="not-composited"></div>
  70     <div class="not-composited"></div>
  71     <div class="not-composited"></div>
  72     <div class="not-composited"></div>
  73     <div class="not-composited"></div>
  74     <div class="not-composited"></div>
  75     <div class="not-composited"></div>
  76     <div class="not-composited"></div>
  77     <div class="not-composited"></div>
  78     <div class="not-composited"></div>
  79     <div class="not-composited"></div>
  80     <div class="not-composited"></div>
  81     <div class="not-composited"></div>
  82     <div class="not-composited"></div>
  83     <div class="not-composited"></div>
  84     <div class="not-composited"></div>
  85     <div class="not-composited"></div>
  86     <div class="not-composited"></div>
  87     <div class="not-composited"></div>
  88     <div class="not-composited"></div>
  89     <div class="not-composited"></div>
  90   </div>
  91   <pre id="console"></pre>
  92 </body>
  93 </html>
  94