layers-split-across-columns.html | Explore in Territory

<!DOCTYPE html>
<style>
  .container {
    width: 120px;
    position: absolute;
    will-change: transform;
  }
  .multicol {
    columns: 2;
    column-gap: 10px;
    column-fill: auto;
    height: 150px;
    border: 5px solid black;
  }
  .block {
    width: 50px;
    height: 50px;
  }
  .layer {
    width: 50px;
    height: 200px;
  }
  .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="block" style="background-color:black"></div>
    <div style="overflow:clip;" class="layer">
      <div class="block" style="background-color: #0000f0"></div>
      <div class="block" style="background-color: #0000d0"></div>
      <div class="block" style="background-color: #0000b0"></div>
      <div class="block" style="background-color: #000090"></div>
    </div>
    <div class="block" style="background-color:black"></div>
  </div>
</div>

<div class="container pos2">
  Transforms:
  <div class="multicol">
    <div class="block" style="background-color:black"></div>
    <div style="margin-left: -100px; transform: translate(100px, 0);" class="layer">
      <div class="block" style="background-color: #0000f0"></div>
      <div class="block" style="background-color: #0000d0"></div>
      <div class="block" style="background-color: #0000b0"></div>
      <div class="block" style="background-color: #000090"></div>
    </div>
    <div class="block" style="background-color:black"></div>
  </div>
</div>

<div class="container pos3">
  Relative Pos.:
  <div class="multicol">
    <div class="block" style="background-color:black"></div>
    <div style="position:relative; margin-left:-100px; left:100px" class="layer">
      <div class="block" style="background-color: #0000f0"></div>
      <div class="block" style="background-color: #0000d0"></div>
      <div class="block" style="background-color: #0000b0"></div>
      <div class="block" style="background-color: #000090"></div>
    </div>
    <div class="block" style="background-color:black"></div>
  </div>
</div>

<div class="container pos4">
  Opacity:
  <div class="multicol">
    <div class="block" style="background-color:black"></div>
    <div style="opacity:0.99;" class="layer">
      <div class="block" style="background-color: #0000f0"></div>
      <div class="block" style="background-color: #0000d0"></div>
      <div class="block" style="background-color: #0000b0"></div>
      <div class="block" style="background-color: #000090"></div>
    </div>
    <div class="block" style="background-color:black"></div>
  </div>
</div>
chromium/third_party/blink/web_tests/fast/multicol/layers-split-across-columns.html
