| <!DOCTYPE html> |
| <style> |
| .flexbox { |
| display: -webkit-box; |
| width: 30px; |
| height: 30px; |
| } |
| .item { |
| -webkit-box-flex: 1; |
| width: 20px; |
| height: 20px; |
| } |
| .item:nth-child(1) { |
| background-color: salmon; |
| min-width: 0; |
| min-height: 0; |
| } |
| .item:nth-child(2) { |
| background-color: lightblue; |
| min-width: auto; |
| min-height: auto; |
| } |
| .item:nth-child(3) { |
| background-color: orange; |
| min-width: 30px; |
| min-height: 30px; |
| } |
| .inline { |
| display: inline-block; |
| width: 20px; |
| height: 20px; |
| } |
| .vertical { |
| -webkit-box-orient: vertical; |
| } |
| </style> |
| |
| <script src="../../resources/check-layout.js"></script> |
| <body onload="checkLayout('.flexbox')"> |
| |
| Tests that deprecated flexboxes treat min-width/min-height:auto as 0px. |
| |
| <div class="flexbox horizontal"> |
| <div class="item" data-expected-width=0 data-expected-height=20><div class="inline"></div></div> |
| <div class="item" data-expected-width=0 data-expected-height=20><div class="inline"></div></div> |
| <div class="item" data-expected-width=30 data-expected-height=30><div class="inline"></div></div> |
| </div> |
| |
| <div class="flexbox vertical"> |
| <div class="item" data-expected-width=20 data-expected-height=0><div class="inline"></div></div> |
| <div class="item" data-expected-width=20 data-expected-height=0><div class="inline"></div></div> |
| <div class="item" data-expected-width=30 data-expected-height=30><div class="inline"></div></div> |
| </div> |
| </body> |
