third_party/WebKit/LayoutTests/fast/multicol/layers-split-across-columns.html

   1 <!DOCTYPE html>
   2 <style>
   3 .container {  width:120px; position: absolute; }
   4 .multicol { -moz-column-width:50px; -moz-column-gap:10px; -webkit-column-width:50px; -webkit-column-gap:10px; column-width:50px; column-gap:10px; column-fill:auto; height:150px; border:5px solid black; }
   5 .block { width:50px; height:50px }
   6 .block:hover { background-color: maroon !important; }
   7 .layer { height:200px; width:50px }
   8 .line2 { position: absolute; top: 343px; left: 8px; }
   9 .pos1 { left: 10px; top: 10px; }
  10 .pos2 { left: 150px; top: 10px; }
  11 .pos3 { left: 10px; top: 200px; }
  12 .pos4 { left: 150px; top: 200px; }
  13 </style>
  14 <div class="container pos1">
  15 Overflow:
  16 <div class="multicol">
  17 <div class="block" style="background-color:black"></div>
  18 <div style="overflow:hidden;" class="layer">
  19 <div class="block" style="background-color: #0000f0"></div>
  20 <div class="block" style="background-color: #0000d0"></div>
  21 <div class="block" style="background-color: #0000b0"></div>
  22 <div class="block" style="background-color: #000090"></div>
  23 </div>
  24 <div class="block" style="background-color:black"></div>
  25 </div>
  26 </div>
  27
  28 <div class="container pos2">
  29 Transforms:
  30
  31 <div class="multicol">
  32 <div class="block" style="background-color:black"></div>
  33 <div style="margin-left: -100px; transform: translate(100px, 0);" class="layer">
  34 <div class="block" style="background-color: #0000f0"></div>
  35 <div class="block" style="background-color: #0000d0"></div>
  36 <div class="block" style="background-color: #0000b0"></div>
  37 <div class="block" style="background-color: #000090"></div>
  38 </div>
  39 <div class="block" style="background-color:black"></div>
  40 </div>
  41 </div>
  42 </div>
  43
  44 <div class="container pos3">
  45 Relative Pos.:
  46 <div class="multicol">
  47 <div class="block" style="background-color:black"></div>
  48 <div style="position:relative; margin-left:-100px; left:100px" class="layer">
  49 <div class="block" style="background-color: #0000f0"></div>
  50 <div class="block" style="background-color: #0000d0"></div>
  51 <div class="block" style="background-color: #0000b0"></div>
  52 <div class="block" style="background-color: #000090"></div>
  53 </div>
  54 <div class="block" style="background-color:black"></div>
  55 </div>
  56 </div>
  57
  58 <div class="container pos4">
  59 Opacity:
  60
  61 <div class="multicol">
  62 <div class="block" style="background-color:black"></div>
  63 <div style="opacity:0.99;" class="layer">
  64 <!-- The extra &nbsp;s below force the creation of transparency layers in Skia to work
  65      around optimizations that would cause blending differences between the test and the
  66      expectation. -->
  67 <div class="block" style="background-color: #0000f0">&nbsp;</div>
  68 <div class="block" style="background-color: #0000d0">&nbsp;</div>
  69 <div class="block" style="background-color: #0000b0">&nbsp;</div>
  70 <div class="block" style="background-color: #000090">&nbsp;</div>
  71 </div>
  72 <div class="block" style="background-color:black"></div>
  73 </div>
  74 </div>