targeted-column-scroll-marker-selection-004-ref.html (4317B)
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 { 53 content: "8"; 54 /* In the test, item 13 (child 14) is the scrollIntoView target. 55 Its sibling (item 12 (child 13)) generates a scroll-marker.The column 56 containing both items 13 and 12 generates a scroll-marker, but item 57 12's scroll-marker is to be preferred. Because of the layout quirk 58 mentioned above, item 12's scroll-marker happens to be the leftmost 59 one. */ 60 background-color: lightgreen; 61 } 62 & > :nth-child(3)::scroll-marker { content: "0"; } 63 & > :nth-child(2)::scroll-marker { content: "9"; } 64 & > :nth-child(4)::scroll-marker { content: "1"; } 65 & > :nth-child(5)::scroll-marker { content: "2"; } 66 & > :nth-child(7)::scroll-marker { content: "3"; } 67 & > :nth-child(9)::scroll-marker { content: "4"; } 68 & > :nth-child(11)::scroll-marker { content: "5"; } 69 & > :nth-child(13)::scroll-marker { content: "6"; } 70 & > :nth-child(15)::scroll-marker { content: "7"; } 71 72 &>.item { 73 scroll-snap-align: none; 74 height: 80%; 75 width: 158px; 76 border: 1px solid; 77 place-content: center; 78 display: inline-block; 79 } 80 81 /* The test calls scrollIntoView on item 13 (child 14). Make only item 11 82 (index 12) a snap target as it is what is aligned when scrollintoView 83 is called on item 13. */ 84 & > :nth-child(12){ 85 scroll-snap-align: center; 86 } 87 88 scroll-marker-group: after; 89 90 &::scroll-marker-group { 91 height: 45px; 92 display: flex; 93 align-items: center; 94 justify-content: center; 95 border: solid 1px black; 96 border-radius: 30px; 97 } 98 } 99 </style> 100 <div class="wrapper" id="wrapper"> 101 <div class="carousel" id="carousel"> 102 <div class="item item0" tabindex=0>0</div> 103 <div class="item item1" tabindex=0>1</div> 104 <div class="item item2" tabindex=0>2</div> 105 <div class="item item3" tabindex=0>3</div> 106 <div class="item item4" tabindex=0>4</div> 107 <div class="item item5" tabindex=0>5</div> 108 <div class="item item6" tabindex=0>6</div> 109 <div class="item item7" tabindex=0>7</div> 110 <div class="item item8" tabindex=0>8</div> 111 <div class="item item9" tabindex=0>9</div> 112 <div class="item item10" tabindex=0>10</div> 113 <div class="item item11" tabindex=0>11</div> 114 <div class="item item12" tabindex=0>12</div> 115 <div class="item item13" tabindex=0>13</div> 116 <div class="item item14" tabindex=0>14</div> 117 <div class="item item15" tabindex=0>15</div> 118 </div> 119 <div id="buttons" style></div> 120 </div> 121 </body> 122 123 </html>