third_party/WebKit/LayoutTests/compositing/geometry/composited-in-columns.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4   <style>
   5     body {
   6       overflow: hidden;
   7     }
   8     .container {
   9       width: 500px;
  10       height: 300px;
  11       -webkit-column-count: 2;
  12       column-count: 2;
  13       column-fill: auto;
  14       border: 1px solid black;
  15     }
  16
  17     .block {
  18       display: inline-block;
  19       width: 200px;
  20       height: 50px;
  21       margin: 10px;
  22       background-color: silver;
  23       outline: 5px solid transparent; /* increases compositing layer bounds to test bounds math */
  24     }
  25
  26     .composited {
  27       transform: translateZ(0);
  28       background-color: blue;
  29     }
  30
  31     .box {
  32       height: 50px;
  33       width: 50px;
  34       background-color: green;
  35     }
  36
  37     #layers {
  38       opacity: 0; /* hide from pixel result */
  39     }
  40   </style>
  41   <script>
  42     if (window.testRunner)
  43       testRunner.dumpAsTextWithPixelResults();
  44
  45     function dumpLayers()
  46     {
  47       if (window.testRunner)
  48         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  49     }
  50
  51     window.addEventListener('load', dumpLayers, false);
  52   </script>
  53 <head>
  54 </head>
  55 <body>
  56
  57   <div class="container">
  58     <div class="block"></div>
  59     <div class="block"></div>
  60     <div class="composited block">
  61       <div class="composited box"></div>
  62     </div>
  63     <div class="block"></div>
  64     <div class="block"></div>
  65     <div class="composited block">
  66       <div class="composited box"></div>
  67     </div>
  68     <div class="block"></div>
  69     <div class="block"></div>
  70   </div>
  71
  72 <pre id="layers">Layer tree goes here in DRT</pre>
  73 </body>
  74 </html>