scroll-marker-group-add-dynamic-001.html (753B)
1 <!DOCTYPE html> 2 <title>CSS Overflow Test: Dynamically change a ::scroll-marker-group</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-pseudo"> 4 <link rel="match" href="scroll-marker-group-add-dynamic-001-ref.html"> 5 <style> 6 #scroller { 7 scroll-marker-group: before; 8 overflow: auto; 9 width: 200px; 10 height: 200px; 11 } 12 13 #item::scroll-marker { 14 content: "PASS" 15 } 16 17 #scroller::scroll-marker-group { 18 display: flex; 19 } 20 21 #scroller.group::scroll-marker-group { 22 display: block; 23 height: 100px; 24 } 25 </style> 26 <p>Test passes if there is the word "PASS" below.</p> 27 <div id="scroller"> 28 <div id="item"></div> 29 </div> 30 <script> 31 scroller.offsetTop; 32 scroller.className = "group"; 33 </script>