scrollbar-gutter-vertical-rl-002-ref.html (2468B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Overflow Reference: test scrollbar-gutter with vertical 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: vertical-rl; 15 direction: ltr; 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-x: auto"> 34 <div class="content"></div> 35 </div> 36 37 <div class="container" style="overflow-x: scroll" id="container_scroll_stable"> 38 <div class="content" id="content_scroll_stable"></div> 39 </div> 40 41 <div class="container" style="overflow-x: 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-x: auto;" id="container_auto_stable_both_edges"> 48 <div class="content"></div> 49 </div> 50 51 <div class="container" style="overflow-x: scroll" id="container_scroll_stable_both_edges"> 52 <div class="content"></div> 53 </div> 54 55 <div class="container" style="overflow-x: 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 hScrollbarHeight = (container_scroll_stable.offsetHeight - content_scroll_stable.offsetHeight); 64 let hScrollbarHeightStr = hScrollbarHeight + "px"; 65 66 // Simulate scrollbar-gutter via padding on containers. 67 document.getElementById("container_hidden_stable").style.paddingInlineEnd = hScrollbarHeightStr; 68 document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr; 69 document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr; 70 document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr; 71 document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = hScrollbarHeightStr; 72 </script> 73 </html>