| <!DOCTYPE html> |
| <style> |
| .flexbox { |
| display: -webkit-flex; |
| height: 0; |
| width: 0; |
| border: 4px solid blue |
| } |
| .column { |
| -webkit-flex-direction: column; |
| } |
| .flexitem { |
| -webkit-flex: 0; |
| background-color: orange; |
| line-height: 0; |
| } |
| .inlineContent { |
| display: inline-block; |
| height: 20px; |
| width: 20px; |
| } |
| .inlineContent:first-child { |
| background-color: salmon; |
| } |
| .inlineContent:last-child { |
| background-color: orange; |
| } |
| iframe { |
| border: 0; |
| outline: 2px solid blue; |
| } |
| .vertical-lr { |
| -webkit-writing-mode: vertical-lr; |
| } |
| .vertical-rl { |
| -webkit-writing-mode: vertical-rl; |
| } |
| .horizontal-bt { |
| -webkit-writing-mode: horizontal-bt; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| |
| <body onload="checkLayout('.flexbox')"> |
| <div>Tests that flex items have default min-size to min-content in the main axis direction.</div> |
| <div class="flexbox"> |
| <div class="flexitem" data-expected-width=20 data-expected-height=0> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem" data-expected-width=20 data-expected-height=0 data-expected-x=20> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| </div> |
| |
| <div class="flexbox column"> |
| <div class="flexitem" data-expected-width=0 data-expected-height=40> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem" data-expected-width=0 data-expected-height=40 data-expected-y=40> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| </div> |
| |
| <div class="flexbox vertical-lr"> |
| <div class="flexitem" data-expected-width=0 data-expected-height=20> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem" data-expected-width=0 data-expected-height=20 data-expected-y=20> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| </div> |
| |
| <div class="flexbox column vertical-lr"> |
| <div class="flexitem" data-expected-width=40 data-expected-height=0> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem" data-expected-width=40 data-expected-height=0 data-expected-x=40> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| </div> |
| |
| <div class="flexbox vertical-rl"> |
| <div class="flexitem" data-expected-width=0 data-expected-height=20> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem" data-expected-width=0 data-expected-height=20 data-expected-y=20> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| </div> |
| |
| <div class="flexbox column vertical-rl"> |
| <div class="flexitem" data-expected-width=40 data-expected-height=0> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem" data-expected-width=40 data-expected-height=0 data-expected-x=40> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| </div> |
| |
| <div class="flexbox horizontal-bt"> |
| <div class="flexitem" data-expected-width=20 data-expected-height=0> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem" data-expected-width=20 data-expected-height=0 data-expected-x=20> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| </div> |
| |
| <div class="flexbox column horizontal-bt"> |
| <div class="flexitem" data-expected-width=0 data-expected-height=40> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem" data-expected-width=0 data-expected-height=40 data-expected-y=40> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| </div> |
| |
| <div class="flexbox"> |
| <div class="flexitem" data-expected-width=20 data-expected-height=0> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem vertical-lr" data-expected-width=40 data-expected-height=20> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem vertical-rl" data-expected-width=40 data-expected-height=20> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| <div class="flexitem horizontal-bt" data-expected-width=20 data-expected-height=0> |
| <div class="inlineContent"></div> |
| <div class="inlineContent"></div> |
| </div> |
| </div> |
| |
| <div class="flexbox"> |
| <div class="flexitem" data-expected-width=300 data-expected-height=0> |
| <iframe></iframe> |
| <iframe></iframe> |
| </div> |
| <div class="flexitem" data-expected-width=300 data-expected-height=0 data-expected-x=300> |
| <iframe></iframe> |
| <iframe></iframe> |
| </div> |
| </div> |
| |
| <div class="flexbox column"> |
| <div class="flexitem" data-expected-width=0 data-expected-height=300> |
| <iframe></iframe> |
| <iframe></iframe> |
| </div> |
| <div class="flexitem" data-expected-width=0 data-expected-height=300 data-expected-y=300> |
| <iframe></iframe> |
| <iframe></iframe> |
| </div> |
| </div> |
| </body> |
