targeted-column-scroll-marker-selection-003-ref.html (3997B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title> 7 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll"> 8 </head> 9 10 <body> 11 <style> 12 .wrapper { 13 display: grid; 14 justify-content: center; 15 } 16 17 .carousel { 18 width: 800px; 19 height: 200px; 20 overflow-x: scroll; 21 scroll-snap-type: x mandatory; 22 list-style-type: none; 23 scroll-behavior: smooth; 24 border: solid 2px grey; 25 padding-top: 10%; 26 text-align: center; 27 counter-set: markeridx -1; 28 columns: 2; 29 30 /* All odd-numbered children generate scroll-markers. For the test, we 31 need 2 more cxhildren to generate scroll-markers. This uses children 2 32 and 4.*/ 33 & > :nth-child(odd)::scroll-marker, 34 & > :nth-child(2)::scroll-marker, 35 & > :nth-child(4)::scroll-marker { 36 counter-increment: markeridx; 37 align-content: center; 38 text-align: center; 39 width: 35px; 40 height: 35px; 41 border-radius: 50%; 42 margin: 3px; 43 background-color: red; 44 } 45 46 /* This lines up the scroll-markers' numbers to match the way Chromium 47 lays out the scroll-markers which seems to be all 48 element::scroll-markers first/leftmost and then, 49 ::column-scroll-markers, despite the ::column::scroll-markers being 50 numbered first. The numbers are not important for the test's 51 functionality. They only help investigating the browser's behavior.*/ 52 & > :nth-child(1)::scroll-marker { content: "8"; } 53 & > :nth-child(3)::scroll-marker { content: "0"; } 54 & > :nth-child(2)::scroll-marker { content: "9"; } 55 & > :nth-child(4)::scroll-marker { content: "1"; } 56 & > :nth-child(5)::scroll-marker { content: "2"; } 57 & > :nth-child(7)::scroll-marker { content: "3"; } 58 & > :nth-child(9)::scroll-marker { content: "4"; } 59 & > :nth-child(11)::scroll-marker { content: "5"; } 60 & > :nth-child(13)::scroll-marker { content: "6"; } 61 /* In the test, item 14 (child 15) is the scrollIntoView target. 62 Its column (the right-most column) should be selected and corresponds to 63 the column. */ 64 & > :nth-child(15)::scroll-marker { 65 content: "7"; 66 background-color: green; 67 } 68 69 &>.item { 70 scroll-snap-align: none; 71 height: 80%; 72 width: 158px; 73 border: 1px solid; 74 place-content: center; 75 display: inline-block; 76 } 77 78 /* Make only item 16 (index 15) a snap target so we are scrolled all the 79 way to the right edge */ 80 & > :nth-child(14){ 81 scroll-snap-align: center; 82 } 83 84 scroll-marker-group: after; 85 86 &::scroll-marker-group { 87 height: 45px; 88 display: flex; 89 align-items: center; 90 justify-content: center; 91 border: solid 1px black; 92 border-radius: 30px; 93 } 94 } 95 </style> 96 <div class="wrapper" id="wrapper"> 97 <div class="carousel" id="carousel"> 98 <div class="item item0" tabindex=0>0</div> 99 <div class="item item1" tabindex=0>1</div> 100 <div class="item item2" tabindex=0>2</div> 101 <div class="item item3" tabindex=0>3</div> 102 <div class="item item4" tabindex=0>4</div> 103 <div class="item item5" tabindex=0>5</div> 104 <div class="item item6" tabindex=0>6</div> 105 <div class="item item7" tabindex=0>7</div> 106 <div class="item item8" tabindex=0>8</div> 107 <div class="item item9" tabindex=0>9</div> 108 <div class="item item10" tabindex=0>10</div> 109 <div class="item item11" tabindex=0>11</div> 110 <div class="item item12" tabindex=0>12</div> 111 <div class="item item13" tabindex=0>13</div> 112 <div class="item item14" tabindex=0>14</div> 113 <div class="item item15" tabindex=0>15</div> 114 </div> 115 <div id="buttons" style></div> 116 </div> 117 </body> 118 119 </html>