OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <link href="resources/flexbox.css" rel="stylesheet"> | 3 <link href="resources/flexbox.css" rel="stylesheet"> |
4 <style> | 4 <style> |
5 .vertical { | 5 .vertical { |
6 writing-mode: vertical-lr; | 6 writing-mode: vertical-lr; |
7 } | 7 } |
8 </style> | 8 </style> |
9 | 9 |
10 <script src="../../resources/check-layout.js"></script> | 10 <script src="../../resources/check-layout.js"></script> |
11 <body onload="checkLayout('.inline-flexbox')"> | 11 <body onload="checkLayout('.inline-flexbox')"> |
12 | 12 |
13 <p>Tests that we calculate correct intrinsic widths when orthogonal flows are in
volved.</p> | 13 <p>Tests that we calculate correct intrinsic widths when orthogonal flows are in
volved.</p> |
14 | 14 |
15 <div class="inline-flexbox" data-expected-width="20"> | 15 <div class="inline-flexbox" data-expected-width="20"> |
16 <div class="vertical" style="width: 20px; height: 50px;"></div> | 16 <div class="vertical" style="width: 20px; height: 50px;"></div> |
17 </div> | 17 </div> |
18 | 18 |
19 <div class="inline-flexbox" data-expected-width="20"> | 19 <div class="inline-flexbox" data-expected-width="20"> |
20 <div class="vertical" style="line-height: 20px;">Some text</div> | 20 <div class="vertical" style="line-height: 20px;">Some text</div> |
21 </div> | 21 </div> |
22 | 22 |
23 | 23 <div class="inline-flexbox" data-expected-width="20"> |
24 <!-- This should really have a width of 20. However intrinsic widths with | |
25 orthogonal flows are tricky. This now matches behavior of regular | |
26 (inline-)blocks. | |
27 http://crbug.com/473429 | |
28 --> | |
29 <div class="inline-flexbox" data-expected-width="0"> | |
30 <span class="vertical" data-expected-width="20" style="line-height: 20px;">S
ome text</span> | 24 <span class="vertical" data-expected-width="20" style="line-height: 20px;">S
ome text</span> |
31 </div> | 25 </div> |
OLD | NEW |