column-scroll-marker-014.html (1403B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Re-attach ::column::scroll-marker when it becomes :target-current</title> 4 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-pseudo"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#active-scroll-marker"> 7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 8 <style> 9 #scroller { 10 overflow: hidden; 11 scroll-marker-group: after; 12 columns: 1; 13 gap: 0; 14 height: 100px; 15 width: 100px; 16 background: red; 17 } 18 #scroller::scroll-marker-group { 19 position: relative; 20 top: -200px; 21 display: block; 22 height: 300px; 23 } 24 #scroller::column::scroll-marker { 25 display: block; 26 height: 100px; 27 content: ""; 28 width: 100px; 29 } 30 #scroller::column::scroll-marker:target-current { 31 display: flex; 32 background: green; 33 } 34 .item { 35 height: 100px; 36 width: 100px; 37 } 38 </style> 39 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 40 <div id="scroller"> 41 <div class="item"></div> 42 <div class="item"></div> 43 <div class="item"></div> 44 </div> 45 <script> 46 requestAnimationFrame(()=> { 47 requestAnimationFrame(()=> { 48 scroller.scrollTo(100, 0); 49 document.documentElement.classList.remove("reftest-wait"); 50 }); 51 }); 52 </script>