| 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 body { | 5 body { |
| 6 margin: 0; | 6 margin: 0; |
| 7 } | 7 } |
| 8 .flexbox { | 8 .flexbox { |
| 9 width: 600px; | 9 width: 600px; |
| 10 height: 240px; | 10 height: 240px; |
| (...skipping 22 matching lines...) Expand all Loading... |
| 33 background-color: orange; | 33 background-color: orange; |
| 34 } | 34 } |
| 35 .flexbox :nth-child(7) { | 35 .flexbox :nth-child(7) { |
| 36 background-color: lime; | 36 background-color: lime; |
| 37 } | 37 } |
| 38 </style> | 38 </style> |
| 39 <script src="../../resources/check-layout.js"></script> | 39 <script src="../../resources/check-layout.js"></script> |
| 40 <body onload="checkLayout('.flexbox')"> | 40 <body onload="checkLayout('.flexbox')"> |
| 41 | 41 |
| 42 <div class="flexbox column"> | 42 <div class="flexbox column"> |
| 43 <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="
-webkit-flex: 1;"></div> | 43 <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="
flex: 1;"></div> |
| 44 <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="
-webkit-flex: 1; -webkit-align-self: stretch; "></div> | 44 <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="
flex: 1; align-self: stretch; "></div> |
| 45 <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="-
webkit-flex: 1; -webkit-align-self: flex-start; width: 20px;"></div> | 45 <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="f
lex: 1; align-self: flex-start; width: 20px;"></div> |
| 46 <div data-offset-x=580 data-expected-width=20 data-expected-height=40 style=
"-webkit-flex: 1; -webkit-align-self: flex-end; width: 20px;"></div> | 46 <div data-offset-x=580 data-expected-width=20 data-expected-height=40 style=
"flex: 1; align-self: flex-end; width: 20px;"></div> |
| 47 <div data-offset-x=290 data-expected-width=20 data-expected-height=40 style=
"-webkit-flex: 1; -webkit-align-self: center; width: 20px;"></div> | 47 <div data-offset-x=290 data-expected-width=20 data-expected-height=40 style=
"flex: 1; align-self: center; width: 20px;"></div> |
| 48 <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="-
webkit-flex: 1; -webkit-align-self: baseline; width: 20px;"></div> | 48 <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="f
lex: 1; align-self: baseline; width: 20px;"></div> |
| 49 </div> | 49 </div> |
| 50 | 50 |
| 51 <div class="flexbox column vertical"> | 51 <div class="flexbox column vertical"> |
| 52 <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style=
"-webkit-flex: 1;"></div> | 52 <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style=
"flex: 1;"></div> |
| 53 <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style=
"-webkit-flex: 1; -webkit-align-self: stretch; "></div> | 53 <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style=
"flex: 1; align-self: stretch; "></div> |
| 54 <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="
-webkit-flex: 1; -webkit-align-self: flex-start; height: 20px;"></div> | 54 <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="
flex: 1; align-self: flex-start; height: 20px;"></div> |
| 55 <div data-offset-y=220 data-expected-width=100 data-expected-height=20 style
="-webkit-flex: 1; -webkit-align-self: flex-end; height: 20px;"></div> | 55 <div data-offset-y=220 data-expected-width=100 data-expected-height=20 style
="flex: 1; align-self: flex-end; height: 20px;"></div> |
| 56 <div data-offset-y=110 data-expected-width=100 data-expected-height=20 style
="-webkit-flex: 1; -webkit-align-self: center; height: 20px;"></div> | 56 <div data-offset-y=110 data-expected-width=100 data-expected-height=20 style
="flex: 1; align-self: center; height: 20px;"></div> |
| 57 <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="
-webkit-flex: 1; -webkit-align-self: baseline; height: 20px;"></div> | 57 <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="
flex: 1; align-self: baseline; height: 20px;"></div> |
| 58 </div> | 58 </div> |
| 59 | 59 |
| 60 </body> | 60 </body> |
| 61 </html> | 61 </html> |
| OLD | NEW |