timeline-trigger-shorthand.tentative.html (13553B)
1 <!DOCTYPE html> 2 <title>timeline-trigger shorthand</title> 3 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#timeline-trigger"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/support/shorthand-testcommon.js"></script> 7 <script src="/css/support/parsing-testcommon.js"></script> 8 <script src="/css/support/computed-testcommon.js"></script> 9 <div id="target" style="font-size:10px"></div> 10 <script> 11 test_shorthand_value('timeline-trigger', 12 '--my-trigger view() contain 0% contain 100% / cover 0% cover 100%', 13 { 14 'timeline-trigger-name': '--my-trigger', 15 'timeline-trigger-source': 'view()', 16 'timeline-trigger-range-start': 'contain', 17 'timeline-trigger-range-end': 'contain', 18 'timeline-trigger-exit-range-start': 'cover', 19 'timeline-trigger-exit-range-end': 'cover', 20 }); 21 test_shorthand_value('timeline-trigger', 22 '--my-trigger view() contain 20% contain 80% / cover 10% cover 90%', 23 { 24 'timeline-trigger-name': '--my-trigger', 25 'timeline-trigger-source': 'view()', 26 'timeline-trigger-range-start': 'contain 20%', 27 'timeline-trigger-range-end': 'contain 80%', 28 'timeline-trigger-exit-range-start': 'cover 10%', 29 'timeline-trigger-exit-range-end': 'cover 90%', 30 }); 31 test_shorthand_value('timeline-trigger', 32 '--my-trigger view() contain 0% contain 100% / cover 0%', 33 { 34 'timeline-trigger-name': '--my-trigger', 35 'timeline-trigger-source': 'view()', 36 'timeline-trigger-range-start': 'contain', 37 'timeline-trigger-range-end': 'contain', 38 'timeline-trigger-exit-range-start': 'cover', 39 'timeline-trigger-exit-range-end': 'cover', 40 }); 41 test_shorthand_value('timeline-trigger', 42 '--my-trigger view() contain 20% contain 80% / cover 10%', 43 { 44 'timeline-trigger-name': '--my-trigger', 45 'timeline-trigger-source': 'view()', 46 'timeline-trigger-range-start': 'contain 20%', 47 'timeline-trigger-range-end': 'contain 80%', 48 'timeline-trigger-exit-range-start': 'cover 10%', 49 'timeline-trigger-exit-range-end': 'cover', 50 }); 51 test_shorthand_value('timeline-trigger', 52 '--my-trigger view() contain 0% contain 100% / cover', 53 { 54 'timeline-trigger-name': '--my-trigger', 55 'timeline-trigger-source': 'view()', 56 'timeline-trigger-range-start': 'contain', 57 'timeline-trigger-range-end': 'contain', 58 'timeline-trigger-exit-range-start': 'cover', 59 'timeline-trigger-exit-range-end': 'cover', 60 }); 61 test_shorthand_value('timeline-trigger', 62 '--my-trigger view() contain 0% contain 100%', 63 { 64 'timeline-trigger-name': '--my-trigger', 65 'timeline-trigger-source': 'view()', 66 'timeline-trigger-range-start': 'contain', 67 'timeline-trigger-range-end': 'contain', 68 'timeline-trigger-exit-range-start': 'auto', 69 'timeline-trigger-exit-range-end': 'auto', 70 }); 71 test_shorthand_value('timeline-trigger', 72 '--my-trigger view() contain 20% contain 80%', 73 { 74 'timeline-trigger-name': '--my-trigger', 75 'timeline-trigger-source': 'view()', 76 'timeline-trigger-range-start': 'contain 20%', 77 'timeline-trigger-range-end': 'contain 80%', 78 'timeline-trigger-exit-range-start': 'auto', 79 'timeline-trigger-exit-range-end': 'auto', 80 }); 81 test_shorthand_value('timeline-trigger', 82 '--my-trigger view() contain 0%', 83 { 84 'timeline-trigger-name': '--my-trigger', 85 'timeline-trigger-source': 'view()', 86 'timeline-trigger-range-start': 'contain', 87 'timeline-trigger-range-end': 'contain', 88 'timeline-trigger-exit-range-start': 'auto', 89 'timeline-trigger-exit-range-end': 'auto', 90 }); 91 test_shorthand_value('timeline-trigger', 92 '--my-trigger view() contain 10%', 93 { 94 'timeline-trigger-name': '--my-trigger', 95 'timeline-trigger-source': 'view()', 96 'timeline-trigger-range-start': 'contain 10%', 97 'timeline-trigger-range-end': 'contain', 98 'timeline-trigger-exit-range-start': 'auto', 99 'timeline-trigger-exit-range-end': 'auto', 100 }); 101 test_shorthand_value('timeline-trigger', 102 '--my-trigger view() contain', 103 { 104 'timeline-trigger-name': '--my-trigger', 105 'timeline-trigger-source': 'view()', 106 'timeline-trigger-range-start': 'contain', 107 'timeline-trigger-range-end': 'contain', 108 'timeline-trigger-exit-range-start': 'auto', 109 'timeline-trigger-exit-range-end': 'auto', 110 }); 111 test_shorthand_value('timeline-trigger', '--my-trigger view()', 112 { 113 'timeline-trigger-name': '--my-trigger', 114 'timeline-trigger-source': 'view()', 115 'timeline-trigger-range-start': 'normal', 116 'timeline-trigger-range-end': 'normal', 117 'timeline-trigger-exit-range-start': 'auto', 118 'timeline-trigger-exit-range-end': 'auto', 119 }); 120 test_shorthand_value('timeline-trigger', '--my-trigger --my-timeline', 121 { 122 'timeline-trigger-name': '--my-trigger', 123 'timeline-trigger-source': '--my-timeline', 124 'timeline-trigger-range-start': 'normal', 125 'timeline-trigger-range-end': 'normal', 126 'timeline-trigger-exit-range-start': 'auto', 127 'timeline-trigger-exit-range-end': 'auto', 128 }); 129 130 test_shorthand_value('timeline-trigger', '--my-trigger1, --my-trigger2', 131 { 132 'timeline-trigger-name': '--my-trigger1, --my-trigger2', 133 'timeline-trigger-source': 'auto, auto', 134 'timeline-trigger-range-start': 'normal, normal', 135 'timeline-trigger-range-end': 'normal, normal', 136 'timeline-trigger-exit-range-start': 'auto, auto', 137 'timeline-trigger-exit-range-end': 'auto, auto', 138 }); 139 test_shorthand_value('timeline-trigger', 140 '--my-trigger1 --my-timeline1 contain cover / normal exit, '+ 141 '--my-trigger2 --my-timeline2 entry exit / contain normal', 142 { 143 'timeline-trigger-name': '--my-trigger1, --my-trigger2', 144 'timeline-trigger-source': '--my-timeline1, --my-timeline2', 145 'timeline-trigger-range-start': 'contain, entry', 146 'timeline-trigger-range-end': 'cover, exit', 147 'timeline-trigger-exit-range-start': 'normal, contain', 148 'timeline-trigger-exit-range-end': 'exit, normal', 149 }); 150 test_shorthand_value('timeline-trigger', 151 '--my-trigger1 --my-timeline1 contain / cover', 152 { 153 'timeline-trigger-name': '--my-trigger1', 154 'timeline-trigger-source': '--my-timeline1', 155 'timeline-trigger-range-start': 'contain', 156 'timeline-trigger-range-end': 'contain', 157 'timeline-trigger-exit-range-start': 'cover', 158 'timeline-trigger-exit-range-end': 'cover', 159 }); 160 test_shorthand_value('timeline-trigger', 161 '--my-trigger1 --my-timeline1 contain exit 0% / cover', 162 { 163 'timeline-trigger-name': '--my-trigger1', 164 'timeline-trigger-source': '--my-timeline1', 165 'timeline-trigger-range-start': 'contain', 166 'timeline-trigger-range-end': 'exit 0%', 167 'timeline-trigger-exit-range-start': 'cover', 168 'timeline-trigger-exit-range-end': 'cover', 169 }); 170 test_shorthand_value('timeline-trigger', 171 '--my-trigger1 --my-timeline1 contain cover 100% / cover exit 100%', 172 { 173 'timeline-trigger-name': '--my-trigger1', 174 'timeline-trigger-source': '--my-timeline1', 175 'timeline-trigger-range-start': 'contain', 176 'timeline-trigger-range-end': 'cover', 177 'timeline-trigger-exit-range-start': 'cover', 178 'timeline-trigger-exit-range-end': 'exit', 179 }); 180 test_shorthand_value('timeline-trigger', 181 '--my-trigger1 --my-timeline1 contain 50% / cover 50%', 182 { 183 'timeline-trigger-name': '--my-trigger1', 184 'timeline-trigger-source': '--my-timeline1', 185 'timeline-trigger-range-start': 'contain 50%', 186 'timeline-trigger-range-end': 'contain', 187 'timeline-trigger-exit-range-start': 'cover 50%', 188 'timeline-trigger-exit-range-end': 'cover', 189 }); 190 test_shorthand_value('timeline-trigger', 191 '--my-trigger1 --my-timeline1 contain 50% contain 90% / cover 50% cover 90%', 192 { 193 'timeline-trigger-name': '--my-trigger1', 194 'timeline-trigger-source': '--my-timeline1', 195 'timeline-trigger-range-start': 'contain 50%', 196 'timeline-trigger-range-end': 'contain 90%', 197 'timeline-trigger-exit-range-start': 'cover 50%', 198 'timeline-trigger-exit-range-end': 'cover 90%', 199 }); 200 test_shorthand_value('timeline-trigger', 201 '--my-trigger1 --my-timeline1 / cover ', 202 { 203 'timeline-trigger-name': '--my-trigger1', 204 'timeline-trigger-source': '--my-timeline1', 205 'timeline-trigger-range-start': 'normal', 206 'timeline-trigger-range-end': 'normal', 207 'timeline-trigger-exit-range-start': 'cover', 208 'timeline-trigger-exit-range-end': 'cover', 209 }); 210 test_shorthand_value('timeline-trigger', 211 '--my-trigger1 --my-timeline1 / cover exit 100%', 212 { 213 'timeline-trigger-name': '--my-trigger1', 214 'timeline-trigger-source': '--my-timeline1', 215 'timeline-trigger-range-start': 'normal', 216 'timeline-trigger-range-end': 'normal', 217 'timeline-trigger-exit-range-start': 'cover', 218 'timeline-trigger-exit-range-end': 'exit', 219 }); 220 test_computed_value('timeline-trigger', 221 '--my-trigger view() contain 0% contain 100% / cover 0% cover 100%', 222 '--my-trigger view() contain / cover'); 223 test_computed_value('timeline-trigger', 224 '--my-trigger view() contain 20% contain 80% / cover 10% cover 90%'); 225 test_computed_value('timeline-trigger', 226 '--my-trigger view() contain 20% contain 80% / cover 0%', 227 '--my-trigger view() contain 20% contain 80% / cover'); 228 test_computed_value('timeline-trigger', 229 '--my-trigger view() contain 20% contain 80% / cover 10%', 230 '--my-trigger view() contain 20% contain 80% / cover 10%'); 231 test_computed_value('timeline-trigger', 232 '--my-trigger view() contain 0% contain 100%', 233 '--my-trigger view() contain'); 234 test_computed_value('timeline-trigger', 'view()'); 235 test_computed_value('timeline-trigger', 236 '--my-trigger --my-timeline', 237 '--my-trigger --my-timeline'); 238 239 test_computed_value('timeline-trigger', '--trigger1, --trigger2'); 240 241 test_computed_value('timeline-trigger', 242 '--trigger1 view(), --trigger2 scroll()', 243 '--trigger1 view(), --trigger2 scroll()'); 244 test_computed_value('timeline-trigger', 245 '--my-trigger --my-timeline normal / contain', 246 '--my-trigger --my-timeline / contain'); 247 test_computed_value('timeline-trigger', 248 '--my-trigger --my-timeline / contain'); 249 250 test_valid_value('timeline-trigger', 251 '--my-trigger view() contain 0% contain 100% / cover 0% cover 100%', 252 '--my-trigger view() contain / cover'); 253 test_valid_value('timeline-trigger', 254 '--my-trigger view() contain 20% contain 80% / cover 10% cover 90%'); 255 test_valid_value('timeline-trigger', 256 '--my-trigger view() contain 20% contain 80% / cover 0%', 257 '--my-trigger view() contain 20% contain 80% / cover'); 258 test_valid_value('timeline-trigger', 259 '--my-trigger view() contain 20% contain 80% / cover 10%', 260 '--my-trigger view() contain 20% contain 80% / cover 10%'); 261 test_valid_value('timeline-trigger', 262 '--my-trigger view() contain 0% contain 100%', 263 '--my-trigger view() contain'); 264 test_valid_value('timeline-trigger', 'view()'); 265 test_valid_value('timeline-trigger', '--my-trigger --my-timeline'); 266 267 test_valid_value('timeline-trigger', '--trigger1, --trigger2'); 268 269 test_valid_value('timeline-trigger', 270 '--trigger1 view(), --trigger2 scroll()', 271 '--trigger1 view(), --trigger2 scroll()'); 272 273 test_valid_value('timeline-trigger', 274 '--my-trigger view() normal normal / auto auto', 275 '--my-trigger view()'); 276 277 test_valid_value('timeline-trigger', 278 '--my-trigger view() normal normal / normal auto', 279 '--my-trigger view() / normal'); 280 281 test_valid_value('timeline-trigger', 282 '--my-trigger view() normal normal / cover auto', 283 '--my-trigger view() / cover'); 284 285 test_valid_value('timeline-trigger', 286 '--my-trigger view() normal normal / cover 10% auto', 287 '--my-trigger view() / cover 10%'); 288 289 test_valid_value('timeline-trigger', 290 '--my-trigger --my-timeline normal / contain', 291 '--my-trigger --my-timeline / contain'); 292 test_valid_value('timeline-trigger', 293 '--my-trigger --my-timeline / contain'); 294 295 test_invalid_value('timeline-trigger', 296 '--my-trigger view() contain 0% contain 100% // cover 0% cover 100%'); 297 test_invalid_value('timeline-trigger', 298 '--my-trigger view() contain 20% contain 80% contain / cover 10% cover 90%'); 299 test_invalid_value('timeline-trigger', 300 '--my-trigger view() contain 20% contain 80% / cover 10% cover 90% cover 100%'); 301 test_invalid_value('timeline-trigger', 302 '--my-trigger view() contain 20% contain 80% /'); 303 test_invalid_value('timeline-trigger', 304 '--my-trigger view() contain 20% contain 80% / cover 10% /'); 305 test_invalid_value('timeline-trigger', 306 '--my-trigger view() contain 20% contain 80% cover 10% cover 90% contan'); 307 test_invalid_value('timeline-trigger', '--my-trigger view() /'); 308 test_invalid_value('timeline-trigger', 309 '--my-trigger view() contain / cover, contain /'); 310 test_invalid_value('timeline-trigger', 311 '--my-trigger view() contain / cover, contain contain /'); 312 test_invalid_value('timeline-trigger', 313 '--my-trigger view() contain / cover, contain contain contain / cover'); 314 test_invalid_value('timeline-trigger', 315 '--my-trigger view() contain contain cover cover'); 316 test_invalid_value('timeline-trigger', 317 '--my-trigger view() contain contain cover'); 318 </script>