third_party/WebKit/LayoutTests/fast/multicol/composited-layer-single-fragment.html

   1 <!DOCTYPE html>
   2 <style>
   3 .multicol {
   4     width: 60px;
   5     -webkit-column-width: 20px;
   6     -webkit-column-gap: 0;
   7     column-fill: auto;
   8     height: 60px;
   9 }
  10 .square {
  11     width: 20px;
  12     height: 20px;
  13     background: green;
  14 }
  15 .layer { will-change: transform; }
  16 </style>
  17
  18 <p>There should a green square below.</p>
  19 <div class="multicol">
  20     <div class="square"></div>
  21     <div class="square"></div>
  22     <div class="layer"> <!-- bottom of first column -->
  23         <div class="square"></div>
  24     </div>
  25     <div class="square"></div>
  26     <div class="layer"> <!-- middle of second column -->
  27         <div class="square"></div>
  28     </div>
  29     <div class="square"></div>
  30     <div class="layer"> <!-- entire third column -->
  31         <div class="square"></div>
  32         <div class="square"></div>
  33         <div class="square"></div>
  34     </div>
  35 </div>