nested-scroll-markers-under-content-visibility-auto.html (1553B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>::scroll-markers with content-visibility: auto ancestors and subscrollers</title> 4 <link rel="match" href="nested-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 captured by subscrollers when in content-visibility-auto"> 8 <style> 9 #scroller { 10 width: 600px; 11 height: 300px; 12 overflow: scroll; 13 scroll-marker-group: after; 14 } 15 16 .subscroller { 17 scroll-marker-group: after; 18 overflow: scroll; 19 width: 600px; 20 height: 100px; 21 } 22 23 .cv { 24 content-visibility: auto; 25 width: 100px; 26 height: 100px; 27 } 28 29 #scroller::scroll-marker-group { 30 border: 3px solid black; 31 padding: 5px; 32 height: 20px; 33 display: block; 34 } 35 36 .item { 37 height: 200px; 38 } 39 40 .item::scroll-marker { 41 content: ""; 42 width: 10px; 43 height: 10px; 44 background-color: blue; 45 border-radius: 50%; 46 display: inline-block; 47 } 48 49 .spacer { 50 height: 10000px; 51 } 52 </style> 53 <div id="scroller"> 54 <div class=cv> 55 <div class=subscroller> 56 <div class=item></div> <div class=item></div> <div class=item></div> 57 </div> 58 </div> 59 <div class=item></div> <div class=item></div> <div class=item></div> 60 <div class=spacer></div> 61 <div class=cv> 62 <div class=subscroller> 63 <div class=item></div> <div class=item></div> <div class=item></div> 64 </div> 65 </div> 66 </div>