stretched-child-shrink-on-relayout.html (2095B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: Shrink stretched child on relayout</title> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-flow-property"> 5 <meta name="assert" content="This ensures that flexbox shrinks stretched children after removing a sibling, in various writing-modes and flows."> 6 <style> 7 .flexbox { 8 display: flex; 9 background: papayawhip; 10 border: 1px solid midnightblue; 11 margin: 1em; 12 width: 50px; 13 } 14 15 .flexbox > div { 16 margin: 5px; 17 min-width: 10px; 18 min-height: 10px; 19 background-color: lawngreen; 20 } 21 22 .column { 23 flex-flow: column; 24 } 25 26 .horizontal-tb { 27 writing-mode: horizontal-tb; 28 } 29 .vertical-lr { 30 writing-mode: vertical-lr; 31 } 32 33 .largeitem { 34 height: 200px; 35 width: 200px; 36 margin: 5px; 37 } 38 </style> 39 </head> 40 <script src="/resources/testharness.js"></script> 41 <script src="/resources/testharnessreport.js"></script> 42 <script src="/resources/check-layout-th.js"></script> 43 <body onload="checkLayout('.flexbox')"> 44 <div id=log></div> 45 46 <div class="flexbox"> 47 <div data-expected-height=10 data-expected-width=10></div> 48 <div class="largeitem"></div> 49 </div> 50 <div class="flexbox column"> 51 <div data-expected-height=10 data-expected-width=40></div> 52 <div class="largeitem"></div> 53 </div> 54 55 <div class="flexbox"> 56 <div class="horizontal-tb" data-expected-height=10 data-expected-width=10></div> 57 <div class="largeitem"></div> 58 </div> 59 <div class="flexbox column"> 60 <div class="horizontal-tb" data-expected-height=10 data-expected-width=40></div> 61 <div class="largeitem"></div> 62 </div> 63 <div class="flexbox"> 64 <div class="vertical-lr" data-expected-height=10 data-expected-width=10></div> 65 <div class="largeitem"></div> 66 </div> 67 <div class="flexbox column"> 68 <div class="vertical-lr" data-expected-height=10 data-expected-width=40></div> 69 <div class="largeitem"></div> 70 </div> 71 <script> 72 document.body.offsetTop; 73 var targets = document.getElementsByClassName('largeitem'); 74 for (var i = targets.length - 1; i >= 0; i--) { 75 targets[i].remove(); 76 }; 77 </script>