| <!DOCTYPE html> |
| <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <meta name="assert" content="min-content width is calculated correctly in a variety of scenarios with two flex items" /> |
| |
| <style> |
| .zero-width { |
| width: 0px; |
| height: 100px; |
| margin-bottom: 20px; |
| } |
| |
| .floating-flexbox { |
| display: flex; |
| outline: 5px solid blue; |
| height: 100px; |
| float: left; |
| } |
| |
| .floating-flexbox>div:nth-child(1) { |
| background: yellow; |
| } |
| |
| .floating-flexbox>div:nth-child(2) { |
| background: orange; |
| } |
| |
| .floating-flexbox>div>div { |
| width: 100px; |
| } |
| </style> |
| |
| <body onload="checkLayout('.floating-flexbox')"> |
| <main> |
| <div class="zero-width"> |
| <div class="floating-flexbox" data-expected-width="300"> |
| <div style="flex: 1 1 200px; width:50px;"> |
| <div></div> |
| </div> |
| <div style="flex: 1 1 400px; width:50px;"> |
| <div></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="zero-width"> |
| <div class="floating-flexbox" data-expected-width="225"> |
| <div style="flex: 1 1 200px; width:50px;"> |
| <div></div> |
| </div> |
| <div style="flex: 1 2 400px; width:50px;"> |
| <div></div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- This is same as above except for min-width auto is no longer in |
| effect. EdgeHTML renders it differently than the above. --> |
| <div class="zero-width"> |
| <div class="floating-flexbox" data-expected-width="225"> |
| <div style="flex: 1 1 200px; width:50px; min-width: 0px;"> |
| <div></div> |
| </div> |
| <div style="flex: 1 2 400px; width:50px; min-width: 0px;"> |
| <div></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="zero-width"> |
| <div class="floating-flexbox" data-expected-width="600"> |
| <div style="flex: 1 0 200px; width:50px;"> |
| <div></div> |
| </div> |
| <div style="flex: 1 1 400px; width:50px;"> |
| <div></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="zero-width"> |
| <div class="floating-flexbox" data-expected-width="200"> |
| <div style="flex: 0 0 50px; width: 200px;"> |
| <div></div> |
| </div> |
| <div style="flex: 0 0 50px; width: 200px;"> |
| <div></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="zero-width"> |
| <!-- 200 + 400 = 600 --> |
| <div class="floating-flexbox" data-expected-width="600"> |
| <!-- contribution: 200 --> |
| <!-- fraction: 150 --> |
| <!-- 50 + 1*150 = 200 --> |
| <div style="flex: 1 0 50px; width: 200px;"> |
| <div></div> |
| </div> |
| <!-- contribution: 200 --> |
| <!-- fraction: 100 --> |
| <!-- 100 + 2*150 = 400 --> |
| <div style="flex: 2 0 100px; width: 200px;"> |
| <div></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="zero-width"> |
| <div class="floating-flexbox" data-expected-width="400"> |
| <div style="flex: 0 1 200px; width: 50px;"> |
| <div></div> |
| </div> |
| <div style="flex: 2 0 100px; width: 200px;"> |
| <div></div> |
| </div> |
| </div> |
| </div> |
| </main> |
