overflow-padding.html (3533B)
1 <!doctype html> 2 <link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org"> 3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/129"> 4 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1003373"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <style> 9 .container { 10 --size: 100px; 11 --padding-size: 30px; 12 --too-big-size: calc(var(--size) - var(--padding-size) + 1px); 13 --just-right-size: calc(var(--size) - var(--padding-size)); 14 overflow:auto; 15 width: var(--size); 16 height: var(--size); 17 padding-right: var(--padding-size); 18 padding-bottom: var(--padding-size); 19 background: #DDD; 20 box-sizing: border-box; 21 display: inline-block; 22 } 23 .big { 24 width: var(--too-big-size); 25 height: var(--too-big-size); 26 background: green; 27 } 28 .small { 29 width: var(--just-right-size); 30 height: var(--just-right-size); 31 background: yellow; 32 } 33 .bigfont { 34 font-size: var(--too-big-size); 35 font-family: Ahem; 36 line-height: 1; 37 color:green; 38 } 39 .smallfont { 40 font-size: var(--just-right-size); 41 font-family: Ahem; 42 line-height: 1; 43 color:yellow; 44 } 45 .red { 46 background:red; 47 } 48 49 </style> 50 <body onload="runTest()"> 51 <p><span style="background:green">green</span> blocks get scrollbars, <span style="background:yellow">yellow</span> do not.</p> 52 <p>Block child gets block and inline padding.</p> 53 <div class="container" data-scrollbar="hv"> 54 <div class="big"></div> 55 </div> 56 <div class="container" data-scrollbar=""> 57 <div class="small"></div> 58 </div> 59 60 <p>Inline child gets block and inline padding.</p> 61 <div class="container bigfont" data-scrollbar="hv"> 62 <span>X</span> 63 </div> 64 <div class="container" style="font:36px/1 Ahem;color:green" data-scrollbar="hv"> 65 <span>XX</span><br>XX 66 </div> 67 <div class="container smallfont" data-scrollbar=""> 68 <span>X</span> 69 </div> 70 71 <p>Inline block child gets block and inline padding.</p> 72 <div class="container" data-scrollbar="hv"> 73 <div class="big" style="display:inline-block;vertical-align:bottom;"></div> 74 </div> 75 <div class="container" data-scrollbar=""> 76 <div class="small" style="display:inline-block;vertical-align:bottom;"></div> 77 </div> 78 79 <p>Padding applies to linebox, not linebox overflow.</p> 80 <div class="container" data-scrollbar=""> 81 <div class="small" style="display:inline-block;vertical-align:bottom"> 82 <div style="height:90px;width:80px;background: rgba(0,0,255,0.3)"></div> 83 </div> 84 </div> 85 <script> 86 function hasHorizontalScrollbar(el) { 87 return (el.scrollWidth - el.offsetWidth) > 0; 88 } 89 function hasVerticalScrollbar(el) { 90 return (el.scrollHeight - el.offsetHeight) > 0; 91 } 92 // Tests needs to be run after load. 93 function runTest() { 94 test(()=> { 95 let i=0; 96 for (el of Array.from(document.querySelectorAll(".container"))) { 97 i++; 98 el.classList.toggle("red"); 99 let expected = el.getAttribute("data-scrollbar"); 100 if (expected.match(/h/)) 101 assert_true(hasHorizontalScrollbar(el), `horizontal scrollbar ${i}`); 102 else 103 assert_false(hasHorizontalScrollbar(el), `horizontal scrollbar ${i}`); 104 if (expected.match(/v/)) 105 assert_true(hasVerticalScrollbar(el), `vertical scrollbar ${i}`); 106 else 107 assert_false(hasVerticalScrollbar(el), `vertical scrollbar ${i}`); 108 el.classList.toggle("red"); 109 } 110 }, "Container padding is applied approriately to block/inline children."); 111 } 112 </script> 113 </body>