| <!DOCTYPE html> |
| <style> |
| .test { position: absolute; } |
| .pos1 { left: 50px; top: 50px;} |
| .pos2 { left: 250px; top: 50px;} |
| .pos3 { left: 50px; top: 300px;} |
| |
| .multicol { |
| border: 0 solid black; |
| background-color: red; |
| width: 100px; |
| height: 100px; |
| -webkit-column-gap: 0; |
| -webkit-columns: 2; |
| } |
| .multicol > div { |
| background-color: green; |
| } |
| |
| .horizontal_tb { |
| -webkit-writing-mode: horizontal-tb; |
| border-bottom-width: 50px; |
| } |
| .vertical_rl { |
| -webkit-writing-mode: vertical-rl; |
| border-left-width: 50px; |
| } |
| .vertical_lr { |
| -webkit-writing-mode: vertical-lr; |
| border-right-width: 50px; |
| } |
| .horizontal_bt > div, .horizontal_tb > div { |
| height: 100px; |
| } |
| .vertical_lr > div, .vertical_rl > div { |
| width: 100px; |
| } |
| .break_before { |
| -webkit-column-break-before: always; |
| } |
| </style> |
| <p> |
| There should be four green squares below, plus a large black border on one side, as |
| indicated. There should be no red. |
| </p> |
| <div class="test pos1"> |
| <p>Border below</p> |
| <div class="multicol horizontal_tb"> |
| <div></div><div class="break_before"></div> |
| </div> |
| </div> |
| <div class="test pos2"> |
| <p>Border left</p> |
| <div class="multicol vertical_rl"> |
| <div></div><div class="break_before"></div> |
| </div> |
| </div> |
| <div class="test pos3"> |
| <p>Border right</p> |
| <div class="multicol vertical_lr"> |
| <div></div><div class="break_before"></div> |
| </div> |
| </div> |
