targeted-column-scroll-marker-selection-004.html (3350B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 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="match" href="targeted-column-scroll-marker-selection-004-ref.html"> 8 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll"> 9 <script src="/css/css-transitions/support/helper.js"></script> 10 <script src="/dom/events/scrolling/scroll_support.js"></script> 11 <script src="/common/reftest-wait.js"></script> 12 </head> 13 14 <body> 15 <style> 16 .wrapper { 17 display: grid; 18 justify-content: center; 19 } 20 21 .carousel { 22 width: 800px; 23 height: 200px; 24 overflow-x: scroll; 25 scroll-snap-type: x mandatory; 26 list-style-type: none; 27 scroll-behavior: smooth; 28 border: solid 2px grey; 29 padding-top: 10%; 30 text-align: center; 31 counter-set: markeridx -1; 32 columns: 2; 33 34 /* Children 13 (index 12) and 16 (index 15) also generate scroll-markers. 35 */ 36 &::column::scroll-marker, 37 & >:nth-child(13)::scroll-marker, 38 & >:nth-child(16)::scroll-marker { 39 content: counter(markeridx); 40 counter-increment: markeridx; 41 align-content: center; 42 text-align: center; 43 width: 35px; 44 height: 35px; 45 border-radius: 50%; 46 margin: 3px; 47 background-color: red; 48 } 49 &::column::scroll-marker:target-current { 50 background-color: green; 51 } 52 &>:nth-child(13)::scroll-marker:target-current, 53 &>:nth-child(16)::scroll-marker:target-current { 54 background-color: lightgreen; 55 } 56 57 &>.item { 58 scroll-snap-align: center; 59 height: 80%; 60 width: 158px; 61 border: 1px solid; 62 place-content: center; 63 display: inline-block; 64 } 65 66 scroll-marker-group: after; 67 68 &::scroll-marker-group { 69 height: 45px; 70 display: flex; 71 align-items: center; 72 justify-content: center; 73 border: solid 1px black; 74 border-radius: 30px; 75 } 76 } 77 </style> 78 <div class="wrapper" id="wrapper"> 79 <div class="carousel" id="carousel"> 80 <div class="item item0" tabindex=0>0</div> 81 <div class="item item1" tabindex=0>1</div> 82 <div class="item item2" tabindex=0>2</div> 83 <div class="item item3" tabindex=0>3</div> 84 <div class="item item4" tabindex=0>4</div> 85 <div class="item item5" tabindex=0>5</div> 86 <div class="item item6" tabindex=0>6</div> 87 <div class="item item7" tabindex=0>7</div> 88 <div class="item item8" tabindex=0>8</div> 89 <div class="item item9" tabindex=0>9</div> 90 <div class="item item10" tabindex=0>10</div> 91 <div class="item item11" tabindex=0>11</div> 92 <div class="item item12" tabindex=0>12</div> 93 <div class="item item13" tabindex=0>13</div> 94 <div class="item item14" tabindex=0>14</div> 95 <div class="item item15" tabindex=0>15</div> 96 </div> 97 <div id="buttons"></div> 98 </div> 99 <script> 100 101 const items = document.querySelectorAll(".item"); 102 function runTest() { 103 const item13 = items[13]; 104 item13.scrollIntoView(); 105 carousel.onscrollend = () => { 106 takeScreenshot(); 107 }; 108 } 109 waitForCompositorReady().then(runTest); 110 </script> 111 </body> 112 113 </html>