scroll-marker-selection-in-2d.html (2009B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: scroll tracking for ::scroll-markers on 2-D scrollers selects from block and then from inline. </title> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#active-scroll-marker"> 6 <link rel="match" href="scroll-marker-selection-in-2d-ref.html"> 7 </head> 8 <body> 9 <style> 10 .scroller { 11 width: 200px; 12 height: 200px; 13 position: relative; 14 border: solid; 15 scroll-marker-group: after; 16 overflow: scroll; 17 &::scroll-marker-group { 18 height: 100px; 19 width: 200px; 20 border: solid; 21 display: grid; 22 grid-auto-flow: column; 23 white-space: nowrap; 24 }; 25 } 26 .vwm { /* vertical writing-mode */ 27 writing-mode: vertical-lr; 28 } 29 .box { 30 position: absolute; 31 height: 50px; 32 width: 50px; 33 font-size: 50px; 34 background-color: blue; 35 &::scroll-marker { 36 height: 40px; 37 width: 40px; 38 font-size: 20px; 39 display: inline-block; 40 } 41 &::scroll-marker:target-current { 42 border: solid blue; 43 } 44 } 45 .top_right { 46 top: 0px; 47 left: 100px; 48 &::scroll-marker { 49 content: ""; 50 background-color: teal; 51 } 52 } 53 .bottom_left { 54 top: 100px; 55 left: 0px; 56 &::scroll-marker { 57 content: ""; 58 background-color: brown; 59 } 60 } 61 .space { 62 height: 800px; 63 width: 800px; 64 position: absolute; 65 } 66 </style> 67 <div> 68 <div class="scroller"> 69 <div class="space"></div> 70 <div class="top_right box">TR</div> 71 <div class="bottom_left box">BL</div> 72 </div> 73 <div class="vwm scroller"> 74 <div class="space"></div> 75 <div class="top_right box">TR</div> 76 <div class="bottom_left box">BL</div> 77 </div> 78 </div> 79 </body> 80 </html>