scrollable-overflow-zero-one-axis.html (1493B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: Scroll Length Calculated Correctly When One Axis Has Zero Length</title> 4 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1800907"> 8 <style> 9 .scroll { 10 overflow: scroll; 11 } 12 13 .zero-h { 14 width: 100px; 15 height: 0px; 16 } 17 18 .zero-w { 19 width: 0; 20 height: 100px; 21 } 22 23 .flex-row { 24 display: flex; 25 } 26 27 .flex-col { 28 display: flex; 29 flex-direction: column; 30 } 31 32 .grid { 33 display: grid; 34 } 35 </style> 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 <script src="/resources/check-layout-th.js"></script> 39 <body onload="checkLayout('.scroll')"> 40 <div class="scroll zero-h" data-expected-scroll-height="100"> 41 <div class="zero-w"></div> 42 </div> 43 <div class="scroll zero-w" data-expected-scroll-width="100"> 44 <div class="zero-h"></div> 45 </div> 46 47 <div class="scroll zero-h flex-row" data-expected-scroll-height="100"> 48 <div class="zero-w"></div> 49 </div> 50 <div class="scroll zero-w flex-col" data-expected-scroll-width="100"> 51 <div class="zero-h"></div> 52 </div> 53 54 <div class="scroll zero-h grid" data-expected-scroll-height="100"> 55 <div class="zero-w"></div> 56 </div> 57 <div class="scroll zero-w grid" data-expected-scroll-width="100"> 58 <div class="zero-h"></div> 59 </div>