overflow-auto-006.html (4231B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: Height with overflow: auto.</title> 4 <link href="support/flexbox.css" rel="stylesheet"> 5 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> 6 <link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars"> 7 <meta name="assert" content="This test ensures that flexbox with 'flex-direction: row|row-reverse' and a flex item child with 'overflow: auto' has the proper height."/> 8 <style> 9 .flexbox { 10 border: 5px solid green; 11 position: relative; 12 width: 50px; 13 } 14 15 .inline-flexbox { 16 border: 5px solid green; 17 position: relative; 18 height: 50px; 19 } 20 21 .overflow { 22 border: 1px solid red; 23 overflow: auto; 24 min-width: 0; 25 min-height: 0; 26 } 27 28 .vertical { 29 writing-mode: vertical-rl; 30 } 31 </style> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/resources/check-layout-th.js"></script> 35 <body onload="checkLayout('.flexbox, .inline-flexbox')"> 36 <div id=log></div> 37 <div class="flexbox to-be-checked" check-height check-accounts-scrollbar> 38 <div class="overflow"><div style="width: 100px; height: 20px"></div></div> 39 </div> 40 41 <div class="flexbox row-reverse to-be-checked" check-height check-accounts-scrollbar> 42 <div class="overflow"><div style="width: 100px; height: 20px"></div></div> 43 </div> 44 45 <div class="flexbox to-be-checked" check-height check-accounts-scrollbar> 46 <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> 47 </div> 48 49 <div class="flexbox row-reverse to-be-checked" check-height check-accounts-scrollbar> 50 <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> 51 </div> 52 53 <div class="flexbox vertical to-be-checked" check-height> 54 <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> 55 </div> 56 57 <div class="flexbox row-reverse vertical to-be-checked" check-height> 58 <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div> 59 </div> 60 61 <div class="inline-flexbox column vertical to-be-checked" check-width check-accounts-scrollbar> 62 <div class="overflow"><div style="width: 20px; height: 100px"></div></div> 63 </div> 64 65 <div class="inline-flexbox column-reverse vertical to-be-checked" check-width check-accounts-scrollbar> 66 <div class="overflow"><div style="width: 20px; height: 100px"></div></div> 67 </div> 68 69 <div class="inline-flexbox column vertical to-be-checked" check-width> 70 <div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div> 71 </div> 72 73 <div class="inline-flexbox column-reverse vertical to-be-checked" check-width> 74 <div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div> 75 </div> 76 77 <!-- This div is only for measuring scrollbar size --> 78 <div id="measure" style="height: 100px; width: 100px; display: inline-block; overflow: auto;"> 79 <div style="min-height: 300px;"></div> 80 </div> 81 82 <script> 83 var measure = document.getElementById('measure'); 84 var scrollbarSize = measure.offsetWidth - measure.clientWidth; 85 86 var nodes = document.getElementsByClassName("to-be-checked"); 87 for (var i = 0; i < nodes.length; i++) { 88 var node = nodes[i]; 89 90 // Here, the things contributing height are: 91 // 92 // (a) each innermost div contributes an explicit height: 20px value. 93 // (b) the .overflow div contributes 2px of border (1px top + bottom), 94 // plus the height of its scrollbar from overflow:auto. 95 // (c) the .flexbox div contributes 10px of border (5px top + bottom). 96 // 97 // So, the total height is 20px + 2px + 10px + scrollbarHeight, 98 // which simplifies to 32px + scrollbarHeight. 99 // 100 // Analogously, the same logic applies for nodes where width is tested. 101 var size = 32; 102 if (node.hasAttribute("check-height")) { 103 var height = node.hasAttribute("check-accounts-scrollbar") ? scrollbarSize : 0; 104 node.setAttribute("data-expected-height", size + height); 105 } else { 106 var width = node.hasAttribute("check-accounts-scrollbar") ? scrollbarSize : 0; 107 node.setAttribute("data-expected-width", size + width); 108 } 109 } 110 </script> 111 </body> 112 </html>