| <!DOCTYPE html> |
| <style> |
| .multicol { |
| margin: 3em 0; |
| width: 60px; |
| -webkit-column-width: 20px; |
| -webkit-column-gap: 0; |
| column-fill: auto; |
| height: 60px; |
| } |
| .square { |
| width: 20px; |
| height: 20px; |
| background: green; |
| } |
| #test1 .layer { will-change: transform; } |
| #test2 .layer { will-change: opacity; } |
| #test3 .layer { will-change: top; position: relative; } |
| </style> |
| |
| <p>There should be three green squares below.</p> |
| <div id="test1" class="multicol"> |
| <div class="layer"> <!-- first column --> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| <div class="layer"> <!-- from first to second column --> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| <div class="layer"> <!-- from second to third column --> |
| <div class="square"></div> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| </div> |
| |
| <div id="test2" class="multicol"> |
| <div class="layer"> <!-- first column --> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| <div class="layer"> <!-- from first to second column --> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| <div class="layer"> <!-- from second to third column --> |
| <div class="square"></div> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| </div> |
| |
| <div id="test3" class="multicol"> |
| <div class="layer"> <!-- first column --> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| <div class="layer"> <!-- from first to second column --> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| <div class="layer"> <!-- from second to third column --> |
| <div class="square"></div> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| </div> |
