| <style> |
| div.test { |
| -webkit-logical-width: 50px; |
| -webkit-logical-height: 100px; |
| background-color: red; |
| } |
| |
| div.float { |
| float: left; |
| -webkit-logical-height: 50px; |
| -webkit-logical-width: 50px; |
| background-color: blue; |
| } |
| |
| div.clear { |
| clear: left; |
| } |
| |
| div.green { |
| background-color: green; |
| -webkit-logical-height: 25px; |
| } |
| |
| div.lr { |
| -webkit-writing-mode: vertical-lr; |
| } |
| |
| div.rl { |
| -webkit-writing-mode: vertical-rl; |
| } |
| </style> |
| <div class="test lr"> |
| <div class="float"></div> |
| <div class="clear"></div> |
| <div class="green"></div> |
| <div class="green"></div> |
| </div> |
| |
| <div class="test lr"> |
| <div class="float"></div> |
| <div class="clear green"></div> |
| <div class="green"></div> |
| </div> |
| |
| <div class="test rl"> |
| <div class="float"></div> |
| <div class="clear"></div> |
| <div class="green"></div> |
| <div class="green"></div> |
| </div> |
| |
| <div class="test rl"> |
| <div class="float"></div> |
| <div class="clear green"></div> |
| <div class="green"></div> |
| </div> |