scrollbar-gutter-rtl-002-ref.html (2462B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Overflow Reference: test scrollbar-gutter with horizontal right to left content</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 7 8 <style> 9 .line { 10 display: flex; 11 } 12 13 .container { 14 writing-mode: horizontal-tb; 15 direction: rtl; 16 17 box-sizing: border-box; 18 block-size: 200px; 19 inline-size: 200px; 20 margin: 10px; 21 background: deepskyblue; 22 resize: both; 23 } 24 25 .content { 26 inline-size: 100%; 27 block-size: 200%; 28 background: lightsalmon; 29 } 30 </style> 31 32 <div class="line"> 33 <div class="container" style="overflow-y: auto"> 34 <div class="content"></div> 35 </div> 36 37 <div class="container" style="overflow-y: scroll" id="container_scroll_stable"> 38 <div class="content" id="content_scroll_stable"></div> 39 </div> 40 41 <div class="container" style="overflow-y: hidden" id="container_hidden_stable"> 42 <div class="content"></div> 43 </div> 44 </div> 45 46 <div class="line"> 47 <div class="container" style="overflow-y: auto;" id="container_auto_stable_both_edges"> 48 <div class="content"></div> 49 </div> 50 51 <div class="container" style="overflow-y: scroll" id="container_scroll_stable_both_edges"> 52 <div class="content"></div> 53 </div> 54 55 <div class="container" style="overflow-y: hidden;" id="container_hidden_stable_both_edges"> 56 <div class="content"></div> 57 </div> 58 </div> 59 60 <script> 61 let container_scroll_stable = document.getElementById("container_scroll_stable"); 62 let content_scroll_stable = document.getElementById("content_scroll_stable"); 63 let vScrollbarWidth = (container_scroll_stable.offsetWidth - content_scroll_stable.offsetWidth); 64 let vScrollbarWidthStr = vScrollbarWidth + "px"; 65 66 // Simulate scrollbar-gutter via padding on containers. 67 document.getElementById("container_hidden_stable").style.paddingInlineEnd = vScrollbarWidthStr; 68 document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr; 69 document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr; 70 document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr; 71 document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = vScrollbarWidthStr; 72 </script> 73 </html>