| <!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; |
| } |
| |
| .layer { transform: translateZ(0); } |
| |
| </style> |
| <p>If no compositing were present, there should be two green squares below. Since some elements are composited, and therefore not fragmented, the output is different.</p> |
| <!-- composited layer in composited layer: --> |
| <div class="multicol"> |
| <div class="square"></div> |
| <div class="layer"> <!-- from first to second column --> |
| <div class="square"></div> |
| <div class="layer"> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| <div class="square"></div> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| |
| <!-- composited layer in composited layer in composited layer: --> |
| <div class="multicol"> |
| <div class="layer"> <!-- all columns --> |
| <div class="layer"> <!-- from first to second column --> |
| <div class="square"></div> |
| <div class="square"></div> |
| <div class="layer"> <!-- from first to second column --> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| </div> |
| <div class="square"></div> |
| <div class="layer"> <!-- from second to third column --> |
| <div class="layer"> <!-- from second to third column --> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| <div class="square"></div> |
| </div> |
| </div> |
| </div> |
