| 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-rl; | 6 -webkit-writing-mode: vertical-rl; |
| 6 -webkit-columns: 2; | 7 -webkit-columns: 2; |
| 7 -webkit-column-rule: 50px 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: 50px 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 |