flexbox_width-wrapping-column.html (1575B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: the width calculation of flexbox with flex-direction: column and flex-wrap: wrap</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property"> 7 <link rel="bookmark" href="https://crbug.com/607262"> 8 <link rel="bookmark" href="https://crbug.com/607856"> 9 <meta name="assert" content="This test ensures that the width of a flexbox with 'flex-direction: column' and 'flex-wrap: wrap' is updated when the wrapping column dynamically changes."> 10 <link href="support/flexbox.css" rel="stylesheet"> 11 <style> 12 .flexbox { 13 width: 600px; 14 height: 160px; 15 outline: 2px solid black; 16 } 17 .item { 18 height: 20px; 19 background-color: green; 20 margin: 5px; 21 } 22 </style> 23 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script src="/resources/check-layout-th.js"></script> 26 <script> 27 function change() { 28 var flex = document.getElementById("test"); 29 flex.offsetWidth; 30 flex.style.height = "60px"; 31 checkLayout('.flexbox'); 32 } 33 </script> 34 <body onload="change()"> 35 <div id=log></div> 36 37 <p>The green boxes should all be within the black box</p> 38 39 <div class="flexbox column wrap" id="test"> 40 <div class="item" data-expected-width="290"></div> 41 <div class="item" data-expected-width="290"></div> 42 <div class="item" data-expected-width="290"></div> 43 <div class="item" data-expected-width="290"></div> 44 </div>