scroll-markers-added-after-content-visibility-auto.html (1789B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>::scroll-markers with content-visibility: auto ancestors, scroll group added</title> 5 <link rel="match" href="scroll-markers-under-content-visibility-auto-ref.html"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo"> 7 <link rel="author" href="mailto:vmpstr@chromium.org"> 8 <link rel="assert" content="::scroll-markers should be visible even if the item is content-visibility: auto offscreen"> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 .scrollmarkergroup { 12 scroll-marker-group: after; 13 } 14 #scroller { 15 width: 600px; 16 height: 300px; 17 overflow: scroll; 18 } 19 20 #scroller div { 21 width: 600px; 22 height: 300px; 23 margin-bottom: 20px; 24 background: green; 25 content-visibility: auto; 26 } 27 28 #scroller::scroll-marker-group { 29 border: 3px solid black; 30 padding: 5px; 31 height: 20px; 32 display: block; 33 } 34 35 #scroller div::scroll-marker { 36 content: ""; 37 width: 10px; 38 height: 10px; 39 background-color: blue; 40 border-radius: 50%; 41 display: inline-block; 42 } 43 </style> 44 <div id="scroller"> 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></div> <div></div> <div></div> 54 <div></div> <div></div> <div></div> 55 <div></div> <div></div> <div></div> 56 <div></div> <div></div> <div></div> 57 </div> 58 59 <script> 60 onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { 61 scroller.classList.add("scrollmarkergroup"); 62 takeScreenshot(); 63 })); 64 </script> 65 </html>