scroll-overflow-padding-block-001.html (1578B)
1 <!DOCTYPE html> 2 <title>Test "end-edges" of scrollable overflows in various writing modes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> 4 <link rel="author" href="mailto:kojii@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 scroller { 9 display: inline-block; 10 overflow: auto; 11 width: 100px; 12 height: 100px; 13 font-size: 50px; 14 line-height: 1; 15 } 16 .vlr { writing-mode: vertical-lr; } 17 .vrl { writing-mode: vertical-rl; } 18 .htb > .block-start { padding-top: 200px; } 19 .htb > .block-end { padding-bottom: 200px; } 20 .vlr > .block-start { padding-left: 200px; } 21 .vlr > .block-end { padding-right: 200px; } 22 .vrl > .block-start { padding-right: 200px; } 23 .vrl > .block-end { padding-left: 200px; } 24 </style> 25 <body> 26 <div id="log"></div> 27 <div class="htb"> 28 <scroller class="block-start">A</scroller> 29 <scroller class="block-end">A</scroller> 30 </div> 31 <div class="vlr"> 32 <scroller class="block-start">A</scroller> 33 <scroller class="block-end">A</scroller> 34 </div> 35 <div class="vrl"> 36 <scroller class="block-start">A</scroller> 37 <scroller class="block-end">A</scroller> 38 </div> 39 <script> 40 for (let element of document.getElementsByTagName('scroller')) { 41 let writing_mode = getComputedStyle(element).writingMode; 42 test(() => { 43 assert_equals(element.scrollWidth, element.offsetWidth, "scrollWidth"); 44 assert_equals(element.scrollHeight, element.offsetHeight, "scrollHeight"); 45 }, writing_mode + ' ' + element.className); 46 } 47 </script> 48 </body>