scroll-markers-under-content-visibility-auto.html (1494B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>::scroll-markers with content-visibility: auto ancestors</title> 4 <link rel="match" href="scroll-markers-under-content-visibility-auto-ref.html"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo"> 6 <link rel="author" href="mailto:vmpstr@chromium.org"> 7 <link rel="assert" content="::scroll-markers should be visible even if the item is content-visibility: auto offscreen"> 8 <style> 9 #scroller { 10 width: 600px; 11 height: 300px; 12 overflow: scroll; 13 scroll-marker-group: after; 14 } 15 16 #scroller div { 17 width: 600px; 18 height: 300px; 19 margin-bottom: 20px; 20 background: green; 21 content-visibility: auto; 22 } 23 24 #scroller::scroll-marker-group { 25 border: 3px solid black; 26 padding: 5px; 27 height: 20px; 28 display: block; 29 } 30 31 #scroller div::scroll-marker { 32 content: ""; 33 width: 10px; 34 height: 10px; 35 background-color: blue; 36 border-radius: 50%; 37 display: inline-block; 38 } 39 </style> 40 <div id="scroller"> 41 <div></div> <div></div> <div></div> 42 <div></div> <div></div> <div></div> 43 <div></div> <div></div> <div></div> 44 <div></div> <div></div> <div></div> 45 <div></div> <div></div> <div></div> 46 <div></div> <div></div> <div></div> 47 <div></div> <div></div> <div></div> 48 <div></div> <div></div> <div></div> 49 <div></div> <div></div> <div></div> 50 <div></div> <div></div> <div></div> 51 <div></div> <div></div> <div></div> 52 <div></div> <div></div> <div></div> 53 </div>