shrinking-column-flexbox.html (1146B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: Shrink column</title> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> 4 <link href="support/flexbox.css" rel="stylesheet"> 5 <meta name="assert" content="This test ensures that flexbox shrinks the column height of a flex item 6 after applying a new style."> 7 <style> 8 body { 9 width: 800px; 10 height: 600px; 11 } 12 13 .green { 14 background: green; 15 } 16 17 .blue { 18 background: blue; 19 } 20 21 .inner { 22 height: 200px; 23 } 24 25 .small { 26 height: 100px; 27 } 28 </style> 29 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 <script src="/resources/check-layout-th.js"></script> 33 34 <script> 35 onload = function() { 36 document.body.offsetWidth; 37 document.getElementById("target").classList.add("small"); 38 39 checkLayout("body"); 40 }; 41 </script> 42 43 <body class="flexbox column"> 44 45 <div class="flexbox column flex-one-one-auto"> 46 <div class="flex-one-one-auto green" data-expected-height="250" id="target"> 47 <div class="inner"></div> 48 </div> 49 <div class="flex-one-one-auto blue" data-expected-height="350"> 50 <div class="inner"></div> 51 </div> 52 </div> 53 54 <div id=log></div>