flex-wrap-006.html (1460B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox Test: Tests correct block size with percentages and dynamic changes</title> 3 <link rel="author" title="Google LLC" href="http://www.google.com"> 4 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 5 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=999253" /> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" /> 7 8 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 9 10 <!-- Each item should stretch to the size of the flex line. Because the first 11 item has no explicit height, the percentage should resolve to zero in 12 the line height calculation stage, so the second item should determine 13 the total height (500px at first, 100px after the change). When the first 14 item gets relaid out for stretching, the percentage can resolve. 15 The bug that motivated this testcase resolved the line height using 16 the previous post-stretching height of the first flex item (and 17 therefore resolves the percentage against 500px), which is incorrect. 18 --> 19 <div id="flex" style="display: flex; flex-wrap: wrap;"> 20 <div> 21 <div style="height: 100%; background: green; width: 100px;"></div> 22 </div> 23 <div style="height: 500px;" id="item"></div> 24 </div> 25 26 <script> 27 var flex = document.getElementById("flex"); 28 flex.offsetHeight; 29 var item2 = document.getElementById("item"); 30 item2.style.height = "100px"; 31 </script>