layers-split-across-columns-expected.html

<!DOCTYPE html>
<style>
  .container {
    margin-right: 4px;
    position: absolute;
    will-change: transform;
  }
  .multicol {
    width: 110px;
    height: 150px;
    border: 5px solid black;
  }
  .multicol > div {
    float: left;
    width: 50px;
    height: 50px;
  }

  .row1_left { background-color: black; }
  .row1_right { background-color: #0000b0; }
  .row2_left { background-color: #0000f0; }
  .row2_right { background-color: #000090; }
  .row3_left { background-color: #0000d0; }
  .row3_right { background-color: black; }

  .row1_right,
  .row2_right,
  .row3_right {
    margin-left: 10px;
  }

  #opacity .row1_right,
  #opacity .row2_left,
  #opacity .row2_right,
  #opacity .row3_left {
    opacity: 0.99;
  }

  .pos1 { left: 10px; top: 10px; }
  .pos2 { left: 150px; top: 10px; }
  .pos3 { left: 10px; top: 200px; }
  .pos4 { left: 150px; top: 200px; }
</style>

<div class="container pos1">
  Overflow:
  <div class="multicol">
    <div class="row1_left"></div>
    <div class="row1_right"></div>
    <div class="row2_left"></div>
    <div class="row2_right"></div>
    <div class="row3_left"></div>
    <div class="row3_right"></div>
  </div>
</div>

<div class="container pos2">
  Transforms:
  <div class="multicol">
    <div class="row1_left"></div>
    <div class="row1_right"></div>
    <div class="row2_left"></div>
    <div class="row2_right"></div>
    <div class="row3_left"></div>
    <div class="row3_right"></div>
  </div>
</div>

<div class="container pos3">
  Relative Pos.:
  <div class="multicol">
    <div class="row1_left"></div>
    <div class="row1_right"></div>
    <div class="row2_left"></div>
    <div class="row2_right"></div>
    <div class="row3_left"></div>
    <div class="row3_right"></div>
  </div>
</div>

<div class="container pos4" id="opacity">
  Opacity:
  <div class="multicol">
    <div class="row1_left"></div>
    <div class="row1_right"></div>
    <div class="row2_left"></div>
    <div class="row2_right"></div>
    <div class="row3_left"></div>
    <div class="row3_right"></div>
  </div>
</div>
chromium/third_party/blink/web_tests/fast/multicol/layers-split-across-columns-expected.html
