OLD | NEW |
| 1 <!DOCTYPE html> |
1 <style> | 2 <style> |
2 div.test { | 3 .test { |
3 width: 100px; | 4 width: 100px; |
4 height: 100px; | 5 height: 100px; |
5 -webkit-writing-mode: vertical-lr; | 6 -webkit-writing-mode: vertical-lr; |
6 -webkit-columns: 2; | 7 -webkit-columns: 2; |
7 -webkit-column-rule: 50 solid orange; | 8 -webkit-column-rule: 50px solid orange; |
8 -webkit-column-gap: 50px; | 9 -webkit-column-gap: 50px; |
9 columns: 2; | |
10 column-rule: 50 solid orange; | |
11 column-gap: 50px; | |
12 column-fill: auto; | |
13 } | 10 } |
14 | 11 |
15 div.test div { width: 200px; } | 12 .before { -webkit-border-before: 50px solid blue; } |
| 13 .after { -webkit-border-after: 50px solid blue; } |
| 14 |
| 15 .test div { width: 200px; } |
16 </style> | 16 </style> |
17 <div class="test" style="-webkit-border-before: 50px solid blue;"><div></div></d
iv> | 17 <p>There should be a 50px blue border to the left of an orange rectangle:</p> |
18 <div class="test" style="-webkit-border-after: 50px solid blue;"><div></div></di
v> | 18 <div class="test before"><div></div></div> |
| 19 <p>There should be a 50px blue border to the right of an orange rectangle:</p> |
| 20 <div class="test after"><div></div></div> |
OLD | NEW |