column-scroll-marker-reattach-target-current.html (839B)
1 <!DOCTYPE html> 2 <title>CSS Overflow Test: ::column::scroll-marker display type change on :target-current</title> 3 <link rel="help" href="https://issues.chromium.org/issues/378726503"> 4 <link rel="match" href="column-scroll-marker-reattach-target-current-ref.html"> 5 <style> 6 * { 7 font-family: monospace; 8 } 9 10 #scroller { 11 overflow: hidden; 12 scroll-marker-group: before; 13 columns: 1; 14 gap: 0; 15 height: 100px; 16 width: 100px; 17 } 18 #scroller::scroll-marker-group { 19 display: block; 20 height: 100px; 21 } 22 #scroller::column::scroll-marker { 23 display: flex; 24 content: "PASS"; 25 } 26 #scroller::column::scroll-marker:target-current { 27 display: block; 28 } 29 #item { 30 height: 100px; 31 width: 100px; 32 } 33 </style> 34 <p>The word "PASS" should be seen below.</p> 35 <div id="scroller"> 36 <div id="item"></div> 37 </div>