column-scroll-marker-dynamic-style-update.html (902B)
1 <!DOCTYPE html> 2 <title>CSS Overflow Test: ::scroll-marker dynamic style change</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons"> 4 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 5 <style> 6 #scroller { 7 overflow: hidden; 8 scroll-marker-group: before; 9 columns: 1; 10 gap: 0; 11 height: 100px; 12 width: 100px; 13 } 14 #scroller::scroll-marker-group { 15 display: flex; 16 width: 100px; 17 height: 100px; 18 background: red; 19 } 20 #scroller::column::scroll-marker { 21 width: 20px; 22 height: 100px; 23 content: ""; 24 } 25 #scroller.extra::column::scroll-marker { 26 display: flex; 27 background: green; 28 } 29 </style> 30 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 31 <div id="scroller"> 32 <div style="height:401px;"></div> 33 </div> 34 <script> 35 document.body.offsetTop; 36 scroller.className = "extra"; 37 </script>