scroll-markers-added-before-content-visibility-auto.html (1787B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>::scroll-markers with content-visibility: auto ancestors, content-visibility 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 #scroller { 12 width: 600px; 13 height: 300px; 14 overflow: scroll; 15 scroll-marker-group: after; 16 } 17 18 #scroller div { 19 width: 600px; 20 height: 300px; 21 margin-bottom: 20px; 22 background: green; 23 } 24 25 #scroller.cvauto div { 26 content-visibility: auto; 27 } 28 29 #scroller::scroll-marker-group { 30 border: 3px solid black; 31 padding: 5px; 32 height: 20px; 33 display: block; 34 } 35 36 #scroller div::scroll-marker { 37 content: ""; 38 width: 10px; 39 height: 10px; 40 background-color: blue; 41 border-radius: 50%; 42 display: inline-block; 43 } 44 </style> 45 <div id="scroller"> 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></div> <div></div> <div></div> 58 </div> 59 60 <script> 61 onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { 62 scroller.classList.add("cvauto"); 63 takeScreenshot(); 64 })); 65 </script> 66 </html>