| <!DOCTYPE html> |
| <html> |
| <link href="resources/flexbox.css" rel="stylesheet"> |
| <style> |
| .vertical { |
| -webkit-writing-mode: vertical-lr; |
| writing-mode: vertical-lr; |
| } |
| </style> |
| |
| <script src="../../resources/check-layout.js"></script> |
| <body onload="checkLayout('.inline-flexbox')"> |
| |
| <p>Tests that we calculate correct intrinsic widths when orthogonal flows are involved.</p> |
| |
| <div class="inline-flexbox" data-expected-width="20"> |
| <div class="vertical" style="width: 20px; height: 50px;"></div> |
| </div> |
| |
| <div class="inline-flexbox" data-expected-width="20"> |
| <div class="vertical" style="line-height: 20px;">Some text</div> |
| </div> |
| |
| |
| <!-- This should really have a width of 20. However intrinsic widths with |
| orthogonal flows are tricky. This now matches behavior of regular |
| (inline-)blocks. |
| http://crbug.com/473429 |
| --> |
| <div class="inline-flexbox" data-expected-width="0"> |
| <span class="vertical" data-expected-width="20" style="line-height: 20px;">Some text</span> |
| </div> |
