| OLD | NEW |
|---|
| 1 <!DOCTYPE html> |
| 1 <style> | 2 <style> |
| 2 div.outer { border-width: 0; border-color: green; border-style: solid; backg
round-color: red; width: 100px; height: 100px; -webkit-column-gap: 0; -webkit-co
lumns: 2; } | 3 .test { position: absolute; } |
| 3 div.outer div { background-color: green; } | 4 .pos1 { left: 50px; top: 50px;} |
| 5 .pos2 { left: 250px; top: 50px;} |
| 6 .pos3 { left: 50px; top: 300px;} |
| 7 .pos4 { left: 250px; top: 300px;} |
| 8 |
| 9 .multicol { |
| 10 border: 0 solid black; |
| 11 background-color: red; |
| 12 width: 100px; |
| 13 height: 100px; |
| 14 -webkit-column-gap: 0; |
| 15 -webkit-columns: 2; |
| 16 } |
| 17 .multicol > div { |
| 18 background-color: green; |
| 19 } |
| 20 |
| 21 .horizontal_bt { |
| 22 -webkit-writing-mode: horizontal-bt; |
| 23 border-top-width: 50px; |
| 24 } |
| 25 .horizontal_tb { |
| 26 -webkit-writing-mode: horizontal-tb; |
| 27 border-bottom-width: 50px; |
| 28 } |
| 29 .vertical_rl { |
| 30 -webkit-writing-mode: vertical-rl; |
| 31 border-left-width: 50px; |
| 32 } |
| 33 .vertical_lr { |
| 34 -webkit-writing-mode: vertical-lr; |
| 35 border-right-width: 50px; |
| 36 } |
| 37 .horizontal_bt > div, .horizontal_tb > div { |
| 38 height: 100px; |
| 39 } |
| 40 .vertical_lr > div, .vertical_rl > div { |
| 41 width: 100px; |
| 42 } |
| 43 .break_before { |
| 44 -webkit-column-break-before: always; |
| 45 } |
| 4 </style> | 46 </style> |
| 5 | 47 <p> |
| 6 <div class="outer" style="-webkit-writing-mode: horizontal-bt; border-top-width:
50px;"> | 48 There should be four green squares below, plus a large black border on one s
ide, as |
| 7 <div style="height: 100px;"></div> | 49 indicated. There should be no red. |
| 8 <div style="height: 100px; -webkit-column-break-before: always;"></div> | 50 </p> |
| 51 <div class="test pos1"> |
| 52 <p>Border above</p> |
| 53 <div class="multicol horizontal_bt"> |
| 54 <div></div><div class="break_before"></div> |
| 55 </div> |
| 9 </div> | 56 </div> |
| 10 | 57 <div class="test pos2"> |
| 11 <div class="outer" style="-webkit-writing-mode: horizontal-tb; border-bottom-wid
th: 50px;"> | 58 <p>Border below</p> |
| 12 <div style="height: 100px;"></div> | 59 <div class="multicol horizontal_tb"> |
| 13 <div style="height: 100px; -webkit-column-break-before: always;"></div> | 60 <div></div><div class="break_before"></div> |
| 61 </div> |
| 14 </div> | 62 </div> |
| 15 | 63 <div class="test pos3"> |
| 16 <div class="outer" style="-webkit-writing-mode: vertical-rl; border-left-width:
50px;"> | 64 <p>Border left</p> |
| 17 <div style="width: 100px;"></div> | 65 <div class="multicol vertical_rl"> |
| 18 <div style="width: 100px; -webkit-column-break-before: always;"></div> | 66 <div></div><div class="break_before"></div> |
| 67 </div> |
| 19 </div> | 68 </div> |
| 20 | 69 <div class="test pos4"> |
| 21 <div class="outer" style="-webkit-writing-mode: vertical-lr; border-right-width:
50px;"> | 70 <p>Border right</p> |
| 22 <div style="width: 100px;"></div> | 71 <div class="multicol vertical_lr"> |
| 23 <div style="width: 100px; -webkit-column-break-before: always;"></div> | 72 <div></div><div class="break_before"></div> |
| 73 </div> |
| 24 </div> | 74 </div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 669603003:
Convert fast/multicol/flipped-blocks-border-after to reftest. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master