scroll-snap-writing-mode-000.html (5018B)
1 <!DOCTYPE html> 2 <title> 3 scroll-snap-align vs writing-mode 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align"> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap"> 7 <link rel="match" href="scroll-snap-writing-mode-000-ref.html"> 8 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 9 <style> 10 11 .wrapper { 12 /* lay out in a nice grid */ 13 display: grid; 14 gap: 0.25em; 15 grid-template-columns: repeat(6, max-content); 16 } 17 18 .scroller { 19 scroll-snap-type: both mandatory; 20 overflow: hidden; 21 scroll-padding: 0; 22 width: 50px; 23 height: 50px; 24 border: solid silver; 25 border-block-start-color: blue; 26 border-inline-start-color: blue; 27 } 28 .area { 29 width: 200px; 30 height: 200px; 31 } 32 33 .target { 34 margin: 5px; 35 scroll-snap-align: start; 36 } 37 38 .small .target { 39 width: 30px; 40 height: 30px; 41 background: orange; 42 } 43 44 .large .target { 45 width: 51px; 46 height: 51px; 47 border-block-end: 20px solid red; 48 border-inline-end: 20px solid red; 49 } 50 51 .large .target::before { 52 content: ''; 53 display: block; 54 width: 30px; 55 height: 30px; 56 background: orange; 57 } 58 59 .TB { writing-mode: horizontal-tb; } 60 .LR { writing-mode: vertical-lr; } 61 .RL { writing-mode: vertical-rl; } 62 .ltr { direction: ltr; } 63 .rtl { direction: rtl; } 64 65 .TB.ltr.invert .target { writing-mode: vertical-rl; direction: rtl; } 66 .TB.rtl.invert .target { writing-mode: vertical-lr; direction: rtl; } 67 .LR.ltr.invert .target { writing-mode: vertical-rl; direction: rtl; } 68 .LR.rtl.invert .target { writing-mode: vertical-rl; direction: ltr; } 69 .RL.ltr.invert .target { writing-mode: vertical-lr; direction: rtl; } 70 .RL.rtl.invert .target { writing-mode: horizontal-tb; direction: ltr; } 71 72 .large.invert { 73 /* key off target‘s writing mode, which we just inverted */ 74 border: solid silver; 75 border-block-end-color: blue; 76 border-inline-end-color: blue; 77 } 78 </style> 79 80 <p>Test passes if there is an orange square tucked into each blue corner without gaps, 81 and there is no red, except for the large inverted cases which should have red 82 in the silver corner and smaller orange boxes in the blue corner. 83 84 <div class="wrapper"> 85 <!-- Simple Small Cases --> 86 87 <div class="scroller TB ltr small"> 88 <div class="area"> 89 <div class="target"></div> 90 </div> 91 </div> 92 93 <div class="scroller LR ltr small"> 94 <div class="area"> 95 <div class="target"></div> 96 </div> 97 </div> 98 99 <div class="scroller RL ltr small"> 100 <div class="area"> 101 <div class="target"></div> 102 </div> 103 </div> 104 105 <div class="scroller TB rtl small"> 106 <div class="area"> 107 <div class="target"></div> 108 </div> 109 </div> 110 111 <div class="scroller LR rtl small"> 112 <div class="area"> 113 <div class="target"></div> 114 </div> 115 </div> 116 117 <div class="scroller RL rtl small"> 118 <div class="area"> 119 <div class="target"></div> 120 </div> 121 </div> 122 123 <!-- Target-inverted Small Cases 124 This row should be identical to the previous. --> 125 <div class="scroller TB ltr small invert"> 126 <div class="area"> 127 <div class="target"></div> 128 </div> 129 </div> 130 131 <div class="scroller LR ltr small invert"> 132 <div class="area"> 133 <div class="target"></div> 134 </div> 135 </div> 136 137 <div class="scroller RL ltr small invert"> 138 <div class="area"> 139 <div class="target"></div> 140 </div> 141 </div> 142 143 <div class="scroller TB rtl small invert"> 144 <div class="area"> 145 <div class="target"></div> 146 </div> 147 </div> 148 149 <div class="scroller LR rtl small invert"> 150 <div class="area"> 151 <div class="target"></div> 152 </div> 153 </div> 154 155 <div class="scroller RL rtl small invert"> 156 <div class="area"> 157 <div class="target"></div> 158 </div> 159 </div> 160 161 <!-- Simple Large Cases --> 162 163 <div class="scroller TB ltr large"> 164 <div class="area"> 165 <div class="target"></div> 166 </div> 167 </div> 168 169 <div class="scroller LR ltr large"> 170 <div class="area"> 171 <div class="target"></div> 172 </div> 173 </div> 174 175 <div class="scroller RL ltr large"> 176 <div class="area"> 177 <div class="target"></div> 178 </div> 179 </div> 180 181 <div class="scroller TB rtl large"> 182 <div class="area"> 183 <div class="target"></div> 184 </div> 185 </div> 186 187 <div class="scroller LR rtl large"> 188 <div class="area"> 189 <div class="target"></div> 190 </div> 191 </div> 192 193 <div class="scroller RL rtl large"> 194 <div class="area"> 195 <div class="target"></div> 196 </div> 197 </div> 198 199 <!-- Target-inverted Large Cases 200 This is the fun one. --> 201 202 <div class="scroller TB ltr large invert"> 203 <div class="area"> 204 <div class="target"></div> 205 </div> 206 </div> 207 208 <div class="scroller LR ltr large invert"> 209 <div class="area"> 210 <div class="target"></div> 211 </div> 212 </div> 213 214 <div class="scroller RL ltr large invert"> 215 <div class="area"> 216 <div class="target"></div> 217 </div> 218 </div> 219 220 <div class="scroller TB rtl large invert"> 221 <div class="area"> 222 <div class="target"></div> 223 </div> 224 </div> 225 226 <div class="scroller LR rtl large invert"> 227 <div class="area"> 228 <div class="target"></div> 229 </div> 230 </div> 231 232 <div class="scroller RL rtl large invert"> 233 <div class="area"> 234 <div class="target"></div> 235 </div> 236 </div> 237 238 </div> <!-- wrapper -->