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 .flexbox { | 5 .flexbox { |
6 border: 5px solid green; | 6 border: 5px solid green; |
7 position: relative; | 7 position: relative; |
8 width: 50px; | 8 width: 50px; |
9 } | 9 } |
10 | 10 |
11 .inline-flexbox { | 11 .inline-flexbox { |
12 border: 5px solid green; | 12 border: 5px solid green; |
13 position: relative; | 13 position: relative; |
14 height: 50px; | 14 height: 50px; |
15 } | 15 } |
16 | 16 |
17 .overflow { | 17 .overflow { |
18 border: 1px solid red; | 18 border: 1px solid red; |
19 overflow: auto; | 19 overflow: auto; |
| 20 min-width: 0; |
| 21 min-height: 0; |
20 } | 22 } |
21 | 23 |
22 .vertical { | 24 .vertical { |
23 -webkit-writing-mode: vertical-rl; | 25 -webkit-writing-mode: vertical-rl; |
24 } | 26 } |
25 </style> | 27 </style> |
26 <script src="../../resources/check-layout.js"></script> | 28 <script src="../../resources/check-layout.js"></script> |
27 <body onload="checkLayout('.flexbox'); checkLayout('.inline-flexbox')"> | 29 <body onload="checkLayout('.flexbox'); checkLayout('.inline-flexbox')"> |
28 <div class="flexbox" data-expected-height="47"> | 30 <div class="flexbox" data-expected-height="47"> |
29 <div class="overflow"><div style="width: 100px; height: 20px"></div></div> | 31 <div class="overflow"><div style="width: 100px; height: 20px"></div></div> |
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
82 </div> | 84 </div> |
83 | 85 |
84 <div class="inline-flexbox column vertical" data-expected-width="32"> | 86 <div class="inline-flexbox column vertical" data-expected-width="32"> |
85 <div class="overflow align-self-baseline"><div style="width: 20px; height: 100
px"></div></div> | 87 <div class="overflow align-self-baseline"><div style="width: 20px; height: 100
px"></div></div> |
86 </div> | 88 </div> |
87 | 89 |
88 <div class="inline-flexbox column-reverse vertical" data-expected-width="32"> | 90 <div class="inline-flexbox column-reverse vertical" data-expected-width="32"> |
89 <div class="overflow align-self-baseline"><div style="width: 20px; height: 100
px"></div></div> | 91 <div class="overflow align-self-baseline"><div style="width: 20px; height: 100
px"></div></div> |
90 </div> | 92 </div> |
91 </body> | 93 </body> |
92 </html> | 94 </html> |
OLD | NEW |