row-008.html (2301B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <meta name="assert" 8 content="min-content width is calculated correctly in a variety of scenarios with two flex items. These cases were used as examples when deriving the intrinsic size algorithm. " /> 9 10 <style> 11 .min-width-flexbox { 12 display: flex; 13 outline: 5px solid blue; 14 height: 100px; 15 width: min-content; 16 margin-bottom: 20px; 17 } 18 19 .min-width-flexbox>div:nth-child(1) { 20 background: yellow; 21 } 22 23 .min-width-flexbox>div:nth-child(2) { 24 background: orange; 25 } 26 27 .min-width-flexbox>div>div { 28 width: 100px; 29 } 30 31 </style> 32 33 <body onload="checkLayout('.min-width-flexbox')"> 34 <div id=log></div> 35 </body> 36 37 <script> 38 // These are from the table in https://github.com/w3c/csswg-drafts/issues/7189#issuecomment-1172771501 39 var test_cases = [ 40 [0, 0, 200, 100, 300], 41 [0, .1, 200, 101, 310], 42 [.1, .1, 203, 103, 330], 43 [.4, .4, 248, 148, 420], 44 [.5, .5, 275, 175, 450], 45 [.75, .75, 368.75, 268.75, 637.5], 46 [1, 1, 500, 400, 900], 47 [0, 2, 200, 200, 400], 48 [.1, 2, 205, 200, 405], 49 [.2, 2, 212, 220, 432], 50 [2, 2, 500, 400, 900], 51 ]; 52 test_cases.forEach(test_case => { 53 var flexbox = document.createElement('div'); 54 flexbox.className = "min-width-flexbox"; 55 flexbox.setAttribute("data-expected-width", test_case[4]); 56 57 var child1 = document.createElement('div'); 58 child1.style.flex = "0 1 200px"; 59 child1.style.width = "500px"; 60 child1.style.flexGrow = test_case[0]; 61 child1.setAttribute("data-expected-width", test_case[2]); 62 child1.appendChild(document.createElement('div')); 63 64 var child2 = document.createElement('div'); 65 child2.style.flex = "0 0 100px"; 66 child2.style.width = "200px"; 67 child2.style.flexGrow = test_case[1]; 68 child2.setAttribute("data-expected-width", test_case[3]); 69 child2.appendChild(document.createElement('div')); 70 71 flexbox.appendChild(child1); 72 flexbox.appendChild(child2); 73 document.body.appendChild(flexbox); 74 }); 75 </script>