third_party/WebKit/LayoutTests/fast/multicol/composited-layer-multiple-fragments-translated.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     line-height: 20px;
  10 }
  11 .square {
  12     width: 20px;
  13     height: 20px;
  14     background: red;
  15 }
  16 .layer { transform: translateZ(0) translateY(20px); }
  17 .layer .square { background: green; }
  18 </style>
  19
  20 <p>There should be two small green squares below, and no red.</p>
  21 <div class="multicol">
  22     <br>
  23     <br>
  24     <br>
  25     <br>
  26     <br>
  27     <div class="layer"> <!-- from second to third column -->
  28         <div class="square"></div>
  29         <br>
  30         <div class="square"></div>
  31     </div>
  32     <div class="square"></div>
  33 </div>