block-height-005.html (1691B)
1 <!DOCTYPE html> 2 <link rel="help" 3 href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11044"> 5 <script src='/resources/testharness.js'></script> 6 <script src='/resources/testharnessreport.js'></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <meta name="assert" 9 content="stretch sizing treating margins as 0 isn't affected by preceding floats"> 10 11 <style> 12 .outer { 13 width: 100px; 14 height: 100px; 15 outline: solid; 16 position: relative; 17 } 18 19 .float { 20 float: left; 21 width: 30px; 22 height: 30px; 23 background: skyblue; 24 } 25 </style> 26 27 <p>These tests assert the behavior described at 28 https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2599101601 29 </p> 30 31 <div class="outer"> 32 <div class="float"></div> 33 <div 34 style="height: stretch; width: 30px; margin-top: 50px; display: flow-root; border: solid magenta;" 35 data-expected-height="100" data-offset-y="0"> 36 </div> 37 </div> 38 39 <div class="outer"> 40 <div class="float"></div> 41 <div 42 style="height: stretch; width: 90px; margin-top: 50px; display: flow-root; border: solid cyan;" 43 data-expected-height="100" data-offset-y="30"> 44 </div> 45 </div> 46 47 <div class="outer"> 48 <div class="float"></div> 49 <div 50 style="height: stretch; width: 90px; margin-top: 50px; border: solid green;" 51 data-expected-height="100" data-offset-y="0"> 52 </div> 53 </div> 54 55 <div class="outer"> 56 <div class="float"></div> 57 <div 58 style="height: stretch; width: 90px; clear: both; margin-top: 50px; border: solid orange;" 59 data-expected-height="100" data-offset-y="30"> 60 </div> 61 </div> 62 63 <script>checkLayout(".float + div")</script>