OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <link href="resources/flexbox.css" rel="stylesheet"> | 2 <link href="resources/flexbox.css" rel="stylesheet"> |
3 | 3 |
4 <script src="../../resources/js-test.js"></script> | 4 <script src="../../resources/js-test.js"></script> |
5 <script src="../../resources/check-layout.js"></script> | 5 <script src="../../resources/check-layout.js"></script> |
6 | 6 |
7 <style> | 7 <style> |
8 .flexbox { | 8 .flexbox { |
9 width: 10px; | 9 width: 10px; |
10 height: 10px; | 10 height: 10px; |
(...skipping 14 matching lines...) Expand all Loading... |
25 .width-20 { | 25 .width-20 { |
26 width: 20px; | 26 width: 20px; |
27 } | 27 } |
28 | 28 |
29 .flex-basis-20 { | 29 .flex-basis-20 { |
30 flex-basis: 20px; | 30 flex-basis: 20px; |
31 } | 31 } |
32 | 32 |
33 </style> | 33 </style> |
34 | 34 |
35 <body onload="checkLayout('.flexbox')"> | 35 <body onload="checkLayout('.flexbox'); checkLayout('.inline-flexbox');"> |
36 | 36 |
37 <div class="flexbox" data-expected-width="10"> | 37 <div class="flexbox" data-expected-width="10"> |
38 <div class="item" data-expected-width="100"> | 38 <div class="item" data-expected-width="100"> |
39 <div class="child" data-expected-width="100"></div> | 39 <div class="child" data-expected-width="100"></div> |
40 </div> | 40 </div> |
41 </div> | 41 </div> |
42 | 42 |
43 <div class="flexbox column" data-expected-height="10"> | 43 <div class="flexbox column" data-expected-height="10"> |
44 <div class="item" data-expected-height="100"> | 44 <div class="item" data-expected-height="100"> |
45 <div class="child" data-expected-height="100"></div> | 45 <div class="child" data-expected-height="100"></div> |
46 </div> | 46 </div> |
47 </div> | 47 </div> |
48 | 48 |
| 49 <div class="inline-flexbox column" data-expected-height="110"> |
| 50 <div class="item flex-basis-20" data-expected-height="100"> |
| 51 <div class="child" data-expected-height="100"></div> |
| 52 </div> |
| 53 </div> |
| 54 |
49 <div class="flexbox" data-expected-width="10"> | 55 <div class="flexbox" data-expected-width="10"> |
50 <div class="item width-20" data-expected-width="20"> | 56 <div class="item width-20" data-expected-width="20"> |
51 <div class="child" data-expected-width="100"></div> | 57 <div class="child" data-expected-width="100"></div> |
52 </div> | 58 </div> |
53 </div> | 59 </div> |
54 | 60 |
55 <div class="flexbox" data-expected-width="10"> | 61 <div class="flexbox" data-expected-width="10"> |
56 <div class="item flex-basis-20" data-expected-width="100"> | 62 <div class="item flex-basis-20" data-expected-width="100"> |
57 <div class="child" data-expected-width="100"></div> | 63 <div class="child" data-expected-width="100"></div> |
58 </div> | 64 </div> |
59 </div> | 65 </div> |
| 66 |
| 67 <div class="inline-flexbox" data-expected-width="110"> |
| 68 <div class="item flex-basis-20" data-expected-width="100"> |
| 69 <div class="child" data-expected-width="100"></div> |
| 70 </div> |
| 71 </div> |
OLD | NEW |