| 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 .container { | 5 .container { |
| 6 position: relative; | 6 position: relative; |
| 7 height: 100px; | 7 height: 100px; |
| 8 width: 100px; | 8 width: 100px; |
| 9 border: 2px solid orange; | 9 border: 2px solid orange; |
| 10 } | 10 } |
| 11 .flexbox { | 11 .flexbox { |
| 12 -webkit-flex-direction: column; | 12 flex-direction: column; |
| 13 position: absolute; | 13 position: absolute; |
| 14 top: 0; | 14 top: 0; |
| 15 right: 0; | 15 right: 0; |
| 16 bottom: 0; | 16 bottom: 0; |
| 17 left: 0; | 17 left: 0; |
| 18 padding: 10px; | 18 padding: 10px; |
| 19 } | 19 } |
| 20 .flexbox > :nth-child(1) { | 20 .flexbox > :nth-child(1) { |
| 21 background-color: lightblue; | 21 background-color: lightblue; |
| 22 } | 22 } |
| 23 .flexbox > :nth-child(2) { | 23 .flexbox > :nth-child(2) { |
| 24 background-color: lightgreen; | 24 background-color: lightgreen; |
| 25 } | 25 } |
| 26 </style> | 26 </style> |
| 27 <script src="../../resources/check-layout.js"></script> | 27 <script src="../../resources/check-layout.js"></script> |
| 28 <body onload="checkLayout('.flexbox')"> | 28 <body onload="checkLayout('.flexbox')"> |
| 29 | 29 |
| 30 <div class="container"> | 30 <div class="container"> |
| 31 <div data-expected-height=100 class="flexbox column"> | 31 <div data-expected-height=100 class="flexbox column"> |
| 32 <div data-expected-height=30 data-expected-width=80 style="height: 30px"
></div> | 32 <div data-expected-height=30 data-expected-width=80 style="height: 30px"
></div> |
| 33 <div data-expected-height=50 data-expected-width=80 style="-webkit-flex:
1; -moz-flex: 1"></div> | 33 <div data-expected-height=50 data-expected-width=80 style="flex: 1;"></d
iv> |
| 34 </div> | 34 </div> |
| 35 </div> | 35 </div> |
| 36 | 36 |
| 37 <div class="container"> | 37 <div class="container"> |
| 38 <div class="flexbox column wrap"> | 38 <div class="flexbox column wrap"> |
| 39 <div data-expected-height=50 data-expected-width=40 style="height: 50px"
></div> | 39 <div data-expected-height=50 data-expected-width=40 style="height: 50px"
></div> |
| 40 <div data-expected-height=80 data-expected-width=40 style="-webkit-flex:
1 50px; -moz-flex: 1 50px"></div> | 40 <div data-expected-height=80 data-expected-width=40 style="flex: 1 50px;
"></div> |
| 41 </div> | 41 </div> |
| 42 </div> | 42 </div> |
| 43 </body> | 43 </body> |
| 44 </html> | 44 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
