| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .flexbox { | 4 .flexbox { |
| 5 display: -webkit-flex; | 5 display: flex; |
| 6 background-color: #aaa; | 6 background-color: #aaa; |
| 7 position: relative; | 7 position: relative; |
| 8 -webkit-flex-wrap: wrap-reverse; | 8 flex-wrap: wrap-reverse; |
| 9 margin-top: 20px; | 9 margin-top: 20px; |
| 10 -webkit-align-content: flex-start; | 10 align-content: flex-start; |
| 11 } | 11 } |
| 12 .flexbox > div { | 12 .flexbox > div { |
| 13 border: 0; | 13 border: 0; |
| 14 } | 14 } |
| 15 | 15 |
| 16 .flexbox :nth-child(1) { | 16 .flexbox :nth-child(1) { |
| 17 background-color: lightblue; | 17 background-color: lightblue; |
| 18 } | 18 } |
| 19 .flexbox :nth-child(2) { | 19 .flexbox :nth-child(2) { |
| 20 background-color: lightgreen; | 20 background-color: lightgreen; |
| 21 } | 21 } |
| 22 .flexbox :nth-child(3) { | 22 .flexbox :nth-child(3) { |
| 23 background-color: pink; | 23 background-color: pink; |
| 24 } | 24 } |
| 25 .flexbox :nth-child(4) { | 25 .flexbox :nth-child(4) { |
| 26 background-color: yellow; | 26 background-color: yellow; |
| 27 } | 27 } |
| 28 </style> | 28 </style> |
| 29 <script src="../../resources/check-layout.js"></script> | 29 <script src="../../resources/check-layout.js"></script> |
| 30 <body onload="checkLayout('.flexbox')"> | 30 <body onload="checkLayout('.flexbox')"> |
| 31 <p>Test to make sure that wrap-reverse starts at the cross start edge if | 31 <p>Test to make sure that wrap-reverse starts at the cross start edge if |
| 32 sizing is not auto.</p> | 32 sizing is not auto.</p> |
| 33 | 33 |
| 34 <div data-expected-width="200" data-expected-height="35" class="flexbox" style="
width: 200px; height: 35px;"> | 34 <div data-expected-width="200" data-expected-height="35" class="flexbox" style="
width: 200px; height: 35px;"> |
| 35 <div data-offset-x="0" data-offset-y="15" style="-webkit-flex: 1 100px; height
: 20px"></div> | 35 <div data-offset-x="0" data-offset-y="15" style="flex: 1 100px; height: 20px">
</div> |
| 36 <div data-offset-x="100" data-offset-y="25" style="-webkit-flex: 1 100px; heig
ht: 10px"></div> | 36 <div data-offset-x="100" data-offset-y="25" style="flex: 1 100px; height: 10px
"></div> |
| 37 <div data-offset-x="0" data-offset-y="5" style="-webkit-flex: 1 100px; height:
10px"></div> | 37 <div data-offset-x="0" data-offset-y="5" style="flex: 1 100px; height: 10px"><
/div> |
| 38 <div data-offset-x="100" data-offset-y="-5" style="-webkit-flex: 1 100px; heig
ht: 20px"></div> | 38 <div data-offset-x="100" data-offset-y="-5" style="flex: 1 100px; height: 20px
"></div> |
| 39 </div> | 39 </div> |
| 40 | 40 |
| 41 <div data-expected-width="200" data-expected-height="35" class="flexbox" style="
width: 200px; max-height: 35px;"> | 41 <div data-expected-width="200" data-expected-height="35" class="flexbox" style="
width: 200px; max-height: 35px;"> |
| 42 <div data-offset-x="0" data-offset-y="15" style="-webkit-flex: 1 100px; height
: 20px"></div> | 42 <div data-offset-x="0" data-offset-y="15" style="flex: 1 100px; height: 20px">
</div> |
| 43 <div data-offset-x="100" data-offset-y="25" style="-webkit-flex: 1 100px; heig
ht: 10px"></div> | 43 <div data-offset-x="100" data-offset-y="25" style="flex: 1 100px; height: 10px
"></div> |
| 44 <div data-offset-x="0" data-offset-y="5" style="-webkit-flex: 1 100px; height:
10px"></div> | 44 <div data-offset-x="0" data-offset-y="5" style="flex: 1 100px; height: 10px"><
/div> |
| 45 <div data-offset-x="100" data-offset-y="-5" style="-webkit-flex: 1 100px; heig
ht: 20px"></div> | 45 <div data-offset-x="100" data-offset-y="-5" style="flex: 1 100px; height: 20px
"></div> |
| 46 </div> | 46 </div> |
| 47 | 47 |
| 48 <div data-expected-width="200" data-expected-height="50" class="flexbox" style="
width: 200px; min-height: 50px;"> | 48 <div data-expected-width="200" data-expected-height="50" class="flexbox" style="
width: 200px; min-height: 50px;"> |
| 49 <div data-offset-x="0" data-offset-y="30" style="-webkit-flex: 1 100px; height
: 20px"></div> | 49 <div data-offset-x="0" data-offset-y="30" style="flex: 1 100px; height: 20px">
</div> |
| 50 <div data-offset-x="100" data-offset-y="40" style="-webkit-flex: 1 100px; heig
ht: 10px"></div> | 50 <div data-offset-x="100" data-offset-y="40" style="flex: 1 100px; height: 10px
"></div> |
| 51 <div data-offset-x="0" data-offset-y="20" style="-webkit-flex: 1 100px; height
: 10px"></div> | 51 <div data-offset-x="0" data-offset-y="20" style="flex: 1 100px; height: 10px">
</div> |
| 52 <div data-offset-x="100" data-offset-y="10" style="-webkit-flex: 1 100px; heig
ht: 20px"></div> | 52 <div data-offset-x="100" data-offset-y="10" style="flex: 1 100px; height: 20px
"></div> |
| 53 </div> | 53 </div> |
| 54 | 54 |
| 55 | 55 |
| 56 <div data-expected-width="35" data-expected-height="200" class="flexbox" style="
-webkit-flex-direction: column; height: 200px; width: 35px"> | 56 <div data-expected-width="35" data-expected-height="200" class="flexbox" style="
flex-direction: column; height: 200px; width: 35px"> |
| 57 <div data-offset-x="15" data-offset-y="0" style="-webkit-flex: 1 100px; width:
20px"></div> | 57 <div data-offset-x="15" data-offset-y="0" style="flex: 1 100px; width: 20px"><
/div> |
| 58 <div data-offset-x="25" data-offset-y="100" style="-webkit-flex: 1 100px; widt
h: 10px"></div> | 58 <div data-offset-x="25" data-offset-y="100" style="flex: 1 100px; width: 10px"
></div> |
| 59 <div data-offset-x="5" data-offset-y="0" style="-webkit-flex: 1 100px; width:
10px"></div> | 59 <div data-offset-x="5" data-offset-y="0" style="flex: 1 100px; width: 10px"></
div> |
| 60 <div data-offset-x="-5" data-offset-y="100" style="-webkit-flex: 1 100px; widt
h: 20px"></div> | 60 <div data-offset-x="-5" data-offset-y="100" style="flex: 1 100px; width: 20px"
></div> |
| 61 </div> | 61 </div> |
| 62 | 62 |
| 63 <div data-expected-width="35" data-expected-height="200" class="flexbox" style="
-webkit-flex-direction: column; height: 200px; max-width: 35px"> | 63 <div data-expected-width="35" data-expected-height="200" class="flexbox" style="
flex-direction: column; height: 200px; max-width: 35px"> |
| 64 <div data-offset-x="15" data-offset-y="0" style="-webkit-flex: 1 100px; width:
20px"></div> | 64 <div data-offset-x="15" data-offset-y="0" style="flex: 1 100px; width: 20px"><
/div> |
| 65 <div data-offset-x="25" data-offset-y="100" style="-webkit-flex: 1 100px; widt
h: 10px"></div> | 65 <div data-offset-x="25" data-offset-y="100" style="flex: 1 100px; width: 10px"
></div> |
| 66 <div data-offset-x="5" data-offset-y="0" style="-webkit-flex: 1 100px; width:
10px"></div> | 66 <div data-offset-x="5" data-offset-y="0" style="flex: 1 100px; width: 10px"></
div> |
| 67 <div data-offset-x="-5" data-offset-y="100" style="-webkit-flex: 1 100px; widt
h: 20px"></div> | 67 <div data-offset-x="-5" data-offset-y="100" style="flex: 1 100px; width: 20px"
></div> |
| 68 </div> | 68 </div> |
| 69 | 69 |
| 70 <div data-expected-width="600" data-expected-height="200" class="flexbox" style=
"-webkit-flex-direction: column; height: 200px; min-width: 50px; max-width: 600p
x"> | 70 <div data-expected-width="600" data-expected-height="200" class="flexbox" style=
"flex-direction: column; height: 200px; min-width: 50px; max-width: 600px"> |
| 71 <div data-offset-x="580" data-offset-y="0" style="-webkit-flex: 1 100px; width
: 20px"></div> | 71 <div data-offset-x="580" data-offset-y="0" style="flex: 1 100px; width: 20px">
</div> |
| 72 <div data-offset-x="590" data-offset-y="100" style="-webkit-flex: 1 100px; wid
th: 10px"></div> | 72 <div data-offset-x="590" data-offset-y="100" style="flex: 1 100px; width: 10px
"></div> |
| 73 <div data-offset-x="570" data-offset-y="0" style="-webkit-flex: 1 100px; width
: 10px"></div> | 73 <div data-offset-x="570" data-offset-y="0" style="flex: 1 100px; width: 10px">
</div> |
| 74 <div data-offset-x="560" data-offset-y="100" style="-webkit-flex: 1 100px; wid
th: 20px"></div> | 74 <div data-offset-x="560" data-offset-y="100" style="flex: 1 100px; width: 20px
"></div> |
| 75 </div> | 75 </div> |
| 76 | 76 |
| 77 </body> | 77 </body> |
| 78 </html> | 78 </html> |
| OLD | NEW |