descend-into-container-with-float.html (941B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <style> 5 6 body { height: 4000px; } 7 #outer { width: 300px; } 8 #outer:after { content: " "; clear:both; display: table; } 9 #float { 10 float: left; background-color: #ccc; 11 height: 500px; width: 100%; 12 } 13 #inner { height: 100px; background-color: green; } 14 15 </style> 16 <div id="outer"> 17 <div id="zeroheight"> 18 <div id="float"> 19 <div id="changer"></div> 20 <div id="inner"></div> 21 </div> 22 </div> 23 </div> 24 <div>after</div> 25 <script> 26 27 // Tests that we descend into zero-height containers that have floating content. 28 29 test(() => { 30 document.scrollingElement.scrollTop = 50; 31 assert_equals(document.querySelector("#zeroheight").offsetHeight, 0); 32 document.querySelector("#changer").style.height = "50px"; 33 assert_equals(document.scrollingElement.scrollTop, 100); 34 }, "Zero-height container with float."); 35 36 </script>