view-timeline-inset-animation.html (25305B)
1 <!DOCTYPE html> 2 <title>Animations using view-timeline-inset</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#propdef-view-timeline-inset"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="support/testcommon.js"></script> 9 <style> 10 @keyframes anim { 11 from { z-index: 0; } 12 to { z-index: 100; } 13 } 14 #scroller { 15 overflow: hidden; 16 width: 80px; 17 height: 100px; 18 } 19 20 #container { 21 position: relative; 22 width: 350px; 23 height: 350px; 24 } 25 26 #target { 27 position: absolute; 28 left: 150px; 29 top: 150px; 30 width: 50px; 31 height: 50px; 32 z-index: -1; 33 } 34 </style> 35 <main id=main></main> 36 <script> 37 setup(assert_implements_animation_timeline); 38 39 function inflate(t, template) { 40 t.add_cleanup(() => main.replaceChildren()); 41 main.append(template.content.cloneNode(true)); 42 } 43 async function scrollTop(e, value) { 44 e.scrollTop = value; 45 await waitForNextFrame(); 46 } 47 async function scrollLeft(e, value) { 48 e.scrollLeft = value; 49 await waitForNextFrame(); 50 } 51 async function assertValueAt(scroller, target, args) { 52 if (args.scrollTop !== undefined) 53 await scrollTop(scroller, args.scrollTop); 54 if (args.scrollLeft !== undefined) 55 await scrollLeft(scroller, args.scrollLeft); 56 assert_equals(getComputedStyle(target).zIndex, args.expected.toString()); 57 } 58 </script> 59 60 <!-- 61 Explanation of scroll positions 62 =============================== 63 64 Please note the following: 65 66 - The scroller has a width x height of 80x100px. 67 - The content is 350x350px 68 - The subject is 50x50px centered within the content. 69 70 This means that, for vertical direction scrolling, assuming no insets: 71 72 - The start offset is 50px (scroller height + 50px is 150px, which consumes 73 exactly the white space of the content). 74 - The end offset is 200px (this is where the bottom edge of the scroller has 75 just cleared the content). 76 - The halfway point is (50px + 200px) / 2 = 125px. 77 78 For horizontal direction scrolling, assuming no insets: 79 80 - The start offset is 70px (scroller width + 70px is 150px, which consumes 81 exactly the white space of the content). 82 - The end offset is 200px (this is where the left edge of the scroller has 83 just cleared the content). 84 - The halfway point is (70px + 200px) / 2 = 135px. 85 86 The start and end insets will adjust the start and end offsets accordingly, 87 and the expectations in this file explicitly write out those adjustments. 88 For example, if the start offset is normally 50px, but there's an inset of 89 10px, we'll expect 50px + 10px rather than 60px. 90 91 Halfway-point expectations write out the adjustment from the "normal" 92 halfway-point, e.g. for start-inset:10px and end-inset:20px, we expect 93 "125px + 5px" since (20-10)/2 == 5. 94 95 Finally, note that for right-to-left and bottom-to-top scrolling directions 96 scroll offsets go the in the negative direction. This is why some expectations 97 negate all the offsets. 98 --> 99 100 <template id=test_one_value> 101 <style> 102 #target { 103 view-timeline: --t1; 104 view-timeline-inset: 10px; 105 animation: anim 1s linear forwards; 106 animation-timeline: --t1; 107 } 108 </style> 109 <div id=scroller class=vertical> 110 <div id="container"> 111 <div id=target></div> 112 </div> 113 </div> 114 </template> 115 <script> 116 promise_test(async (t) => { 117 inflate(t, test_one_value); 118 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 119 await assertValueAt(scroller, target, { scrollTop:50 + 10, expected:0 }); // 0% 120 await assertValueAt(scroller, target, { scrollTop:125 + 0, expected:50 }); // 50% 121 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 122 }, 'view-timeline-inset with one value'); 123 </script> 124 <template id=test_two_values> 125 <style> 126 #target { 127 view-timeline: --t1; 128 view-timeline-inset: 10px 20px; 129 animation: anim 1s linear forwards; 130 animation-timeline: --t1; 131 } 132 </style> 133 <div id=scroller class=vertical> 134 <div id="container"> 135 <div id=target></div> 136 </div> 137 </div> 138 </template> 139 <script> 140 promise_test(async (t) => { 141 inflate(t, test_two_values); 142 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 143 await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% 144 await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% 145 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 146 }, 'view-timeline-inset with two values'); 147 </script> 148 149 <template id=test_em_values> 150 <style> 151 #target { 152 font-size: 10px; 153 view-timeline: --t1; 154 view-timeline-inset: 10px 2em; 155 animation: anim 1s linear forwards; 156 animation-timeline: --t1; 157 } 158 </style> 159 <div id=scroller class=vertical> 160 <div id="container"> 161 <div id=target></div> 162 </div> 163 </div> 164 </template> 165 <script> 166 promise_test(async (t) => { 167 inflate(t, test_em_values); 168 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 169 await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% 170 await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% 171 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 172 }, 'view-timeline-inset with em values'); 173 </script> 174 175 <template id=test_percentage_values> 176 <style> 177 #target { 178 font-size: 10px; 179 view-timeline: --t1; 180 view-timeline-inset: calc(5px + max(1%, 5%)) 20%; 181 animation: anim 1s linear forwards; 182 animation-timeline: --t1; 183 } 184 </style> 185 <div id=scroller class=vertical> 186 <div id="container"> 187 <div id=target></div> 188 </div> 189 </div> 190 </template> 191 <script> 192 promise_test(async (t) => { 193 inflate(t, test_percentage_values); 194 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 195 await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% 196 await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% 197 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 198 }, 'view-timeline-inset with percentage values'); 199 </script> 200 201 <template id=test_outset> 202 <style> 203 #target { 204 view-timeline: --t1; 205 view-timeline-inset: -10px -20px; 206 animation: anim 1s linear forwards; 207 animation-timeline: --t1; 208 } 209 </style> 210 <div id=scroller class=vertical> 211 <div id="container"> 212 <div id=target></div> 213 </div> 214 </div> 215 </template> 216 <script> 217 promise_test(async (t) => { 218 inflate(t, test_outset); 219 await assertValueAt(scroller, target, { scrollTop:20, expected:-1 }); 220 await assertValueAt(scroller, target, { scrollTop:50 - 20, expected:0 }); // 0% 221 await assertValueAt(scroller, target, { scrollTop:125 - 5, expected:50 }); // 50% 222 await assertValueAt(scroller, target, { scrollTop:200 + 10, expected:100 }); // 100% 223 }, 'view-timeline-inset with negative values'); 224 </script> 225 226 <template id=test_horizontal> 227 <style> 228 #target { 229 view-timeline: --t1 x; 230 view-timeline-inset: 10px 20px; 231 animation: anim 1s linear forwards; 232 animation-timeline: --t1; 233 } 234 </style> 235 <div id=scroller> 236 <div id="container"> 237 <div id=target></div> 238 </div> 239 </div> 240 </template> 241 <script> 242 promise_test(async (t) => { 243 inflate(t, test_horizontal); 244 await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); 245 await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% 246 await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% 247 await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% 248 }, 'view-timeline-inset with horizontal scroller'); 249 </script> 250 251 <template id=test_block> 252 <style> 253 #target { 254 view-timeline: --t1 block; 255 view-timeline-inset: 10px 20px; 256 animation: anim 1s linear forwards; 257 animation-timeline: --t1; 258 } 259 </style> 260 <div id=scroller> 261 <div id="container"> 262 <div id=target></div> 263 </div> 264 </div> 265 </template> 266 <script> 267 promise_test(async (t) => { 268 inflate(t, test_block); 269 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 270 await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% 271 await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% 272 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 273 }, 'view-timeline-inset with block scroller'); 274 </script> 275 276 <template id=test_inline> 277 <style> 278 #target { 279 view-timeline: --t1 inline; 280 view-timeline-inset: 10px 20px; 281 animation: anim 1s linear forwards; 282 animation-timeline: --t1; 283 } 284 </style> 285 <div id=scroller> 286 <div id="container"> 287 <div id=target></div> 288 </div> 289 </div> 290 </template> 291 <script> 292 promise_test(async (t) => { 293 inflate(t, test_inline); 294 await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); 295 await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% 296 await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% 297 await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% 298 }, 'view-timeline-inset with inline scroller'); 299 </script> 300 301 <template id=test_auto_block> 302 <style> 303 #scroller { 304 scroll-padding-block: 10px 20px; 305 } 306 #target { 307 view-timeline: --t1 block; 308 view-timeline-inset: auto auto; 309 animation: anim 1s linear forwards; 310 animation-timeline: --t1; 311 } 312 </style> 313 <div id=scroller> 314 <div id="container"> 315 <div id=target></div> 316 </div> 317 </div> 318 </template> 319 <script> 320 promise_test(async (t) => { 321 inflate(t, test_auto_block); 322 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 323 await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% 324 await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% 325 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 326 }, 'view-timeline-inset:auto, block'); 327 </script> 328 329 <template id=test_auto_block_vertical_lr> 330 <style> 331 #scroller { 332 scroll-padding-block: 10px 20px; 333 writing-mode: vertical-lr; 334 } 335 #target { 336 view-timeline: --t1 block; 337 view-timeline-inset: auto auto; 338 animation: anim 1s linear forwards; 339 animation-timeline: --t1; 340 } 341 </style> 342 <div id=scroller> 343 <div id="container"> 344 <div id=target></div> 345 </div> 346 </div> 347 </template> 348 <script> 349 promise_test(async (t) => { 350 inflate(t, test_auto_block_vertical_lr); 351 await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); 352 await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% 353 await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% 354 await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% 355 }, 'view-timeline-inset:auto, block, vertical-lr'); 356 </script> 357 358 <template id=test_auto_block_vertical_rl> 359 <style> 360 #scroller { 361 scroll-padding-block: 10px 20px; 362 writing-mode: vertical-rl; 363 } 364 #target { 365 view-timeline: --t1 block; 366 view-timeline-inset: auto auto; 367 animation: anim 1s linear forwards; 368 animation-timeline: --t1; 369 } 370 </style> 371 <div id=scroller> 372 <div id="container"> 373 <div id=target></div> 374 </div> 375 </div> 376 </template> 377 <script> 378 promise_test(async (t) => { 379 inflate(t, test_auto_block_vertical_rl); 380 // Note: this represents horizontal scrolling from right to left. 381 await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 }); 382 await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0% 383 await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50% 384 await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100% 385 }, 'view-timeline-inset:auto, block, vertical-rl'); 386 </script> 387 388 <template id=test_auto_inline> 389 <style> 390 #scroller { 391 scroll-padding-inline: 10px 20px; 392 } 393 #target { 394 view-timeline: --t1 inline; 395 view-timeline-inset: auto auto; 396 animation: anim 1s linear forwards; 397 animation-timeline: --t1; 398 } 399 </style> 400 <div id=scroller> 401 <div id="container"> 402 <div id=target></div> 403 </div> 404 </div> 405 </template> 406 <script> 407 promise_test(async (t) => { 408 inflate(t, test_auto_inline); 409 await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); 410 await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% 411 await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% 412 await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% 413 }, 'view-timeline-inset:auto, inline'); 414 </script> 415 416 <template id=test_auto_inline_vertical_rl> 417 <style> 418 #scroller { 419 scroll-padding-inline: 10px 20px; 420 writing-mode: vertical-rl; 421 } 422 #target { 423 view-timeline: --t1 inline; 424 view-timeline-inset: auto auto; 425 animation: anim 1s linear forwards; 426 animation-timeline: --t1; 427 } 428 </style> 429 <div id=scroller> 430 <div id="container"> 431 <div id=target></div> 432 </div> 433 </div> 434 </template> 435 <script> 436 promise_test(async (t) => { 437 inflate(t, test_auto_inline_vertical_rl); 438 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 439 await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% 440 await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% 441 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 442 }, 'view-timeline-inset:auto, inline, vertical-rl'); 443 </script> 444 445 <template id=test_auto_inline_vertical_lr> 446 <style> 447 #scroller { 448 scroll-padding-inline: 10px 20px; 449 writing-mode: vertical-lr; 450 } 451 #target { 452 view-timeline: --t1 inline; 453 view-timeline-inset: auto auto; 454 animation: anim 1s linear forwards; 455 animation-timeline: --t1; 456 } 457 </style> 458 <div id=scroller> 459 <div id="container"> 460 <div id=target></div> 461 </div> 462 </div> 463 </template> 464 <script> 465 promise_test(async (t) => { 466 inflate(t, test_auto_inline_vertical_lr); 467 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 468 await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% 469 await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% 470 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 471 }, 'view-timeline-inset:auto, inline, vertical-lr'); 472 </script> 473 474 <template id=test_auto_inline_rtl> 475 <style> 476 #scroller { 477 scroll-padding-inline: 10px 20px; 478 direction: rtl; 479 } 480 #target { 481 view-timeline: --t1 inline; 482 view-timeline-inset: auto auto; 483 animation: anim 1s linear forwards; 484 animation-timeline: --t1; 485 } 486 </style> 487 <div id=scroller> 488 <div id="container"> 489 <div id=target></div> 490 </div> 491 </div> 492 </template> 493 <script> 494 promise_test(async (t) => { 495 inflate(t, test_auto_inline_rtl); 496 await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 }); 497 await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0% 498 await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50% 499 await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100% 500 }, 'view-timeline-inset:auto, inline, rtl'); 501 </script> 502 503 <template id=test_auto_inline_vertical_rl_rtl> 504 <style> 505 #scroller { 506 scroll-padding-inline: 10px 20px; 507 writing-mode: vertical-rl; 508 direction: rtl; 509 } 510 #target { 511 view-timeline: --t1 inline; 512 view-timeline-inset: auto auto; 513 animation: anim 1s linear forwards; 514 animation-timeline: --t1; 515 } 516 </style> 517 <div id=scroller> 518 <div id="container"> 519 <div id=target></div> 520 </div> 521 </div> 522 </template> 523 <script> 524 promise_test(async (t) => { 525 inflate(t, test_auto_inline_vertical_rl_rtl); 526 await assertValueAt(scroller, target, { scrollTop:-50, expected:-1 }); 527 await assertValueAt(scroller, target, { scrollTop:-(50 + 20), expected:0 }); // 0% 528 await assertValueAt(scroller, target, { scrollTop:-(125 + 5), expected:50 }); // 50% 529 await assertValueAt(scroller, target, { scrollTop:-(200 - 10), expected:100 }); // 100% 530 }, 'view-timeline-inset:auto, inline, vertical-rl, rtl'); 531 </script> 532 533 <template id=test_auto_inline_vertical_lr_rtl> 534 <style> 535 #scroller { 536 scroll-padding-inline: 10px 20px; 537 writing-mode: vertical-lr; 538 direction: rtl; 539 } 540 #target { 541 view-timeline: --t1 inline; 542 view-timeline-inset: auto auto; 543 animation: anim 1s linear forwards; 544 animation-timeline: --t1; 545 } 546 </style> 547 <div id=scroller> 548 <div id="container"> 549 <div id=target></div> 550 </div> 551 </div> 552 </template> 553 <script> 554 promise_test(async (t) => { 555 inflate(t, test_auto_inline_vertical_lr_rtl); 556 await assertValueAt(scroller, target, { scrollTop:-50, expected:-1 }); 557 await assertValueAt(scroller, target, { scrollTop:-(50 + 20), expected:0 }); // 0% 558 await assertValueAt(scroller, target, { scrollTop:-(125 + 5), expected:50 }); // 50% 559 await assertValueAt(scroller, target, { scrollTop:-(200 - 10), expected:100 }); // 100% 560 }, 'view-timeline-inset:auto, inline, vertical-lr, rtl'); 561 </script> 562 563 <template id=test_auto_vertical> 564 <style> 565 #scroller { 566 scroll-padding-block: 10px 20px; 567 } 568 #target { 569 view-timeline: --t1 y; 570 view-timeline-inset: auto auto; 571 animation: anim 1s linear forwards; 572 animation-timeline: --t1; 573 } 574 </style> 575 <div id=scroller> 576 <div id="container"> 577 <div id=target></div> 578 </div> 579 </div> 580 </template> 581 <script> 582 promise_test(async (t) => { 583 inflate(t, test_auto_vertical); 584 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 585 await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% 586 await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% 587 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 588 }, 'view-timeline-inset:auto, y'); 589 </script> 590 591 <template id=test_auto_vertical_vertical_rl> 592 <style> 593 #scroller { 594 scroll-padding-inline: 10px 20px; 595 writing-mode: vertical-rl; 596 } 597 #target { 598 view-timeline: --t1 y; 599 view-timeline-inset: auto auto; 600 animation: anim 1s linear forwards; 601 animation-timeline: --t1; 602 } 603 </style> 604 <div id=scroller> 605 <div id="container"> 606 <div id=target></div> 607 </div> 608 </div> 609 </template> 610 <script> 611 promise_test(async (t) => { 612 inflate(t, test_auto_vertical_vertical_rl); 613 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 614 await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% 615 await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% 616 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 617 }, 'view-timeline-inset:auto, y, vertical-rl'); 618 </script> 619 620 <template id=test_auto_vertical_vertical_rl_rtl> 621 <style> 622 #scroller { 623 scroll-padding-inline: 10px 20px; 624 writing-mode: vertical-rl; 625 direction: rtl; 626 } 627 #target { 628 view-timeline: --t1 y; 629 view-timeline-inset: auto auto; 630 animation: anim 1s linear forwards; 631 animation-timeline: --t1; 632 } 633 </style> 634 <div id=scroller> 635 <div id="container"> 636 <div id=target></div> 637 </div> 638 </div> 639 </template> 640 <script> 641 promise_test(async (t) => { 642 inflate(t, test_auto_vertical_vertical_rl_rtl); 643 await assertValueAt(scroller, target, { scrollTop:-50, expected:-1 }); 644 await assertValueAt(scroller, target, { scrollTop:-(50 + 20), expected:0 }); // 0% 645 await assertValueAt(scroller, target, { scrollTop:-(125 + 5), expected:50 }); // 50% 646 await assertValueAt(scroller, target, { scrollTop:-(200 - 10), expected:100 }); // 100% 647 }, 'view-timeline-inset:auto, y, vertical-rl, rtl'); 648 </script> 649 650 <template id=test_auto_horizontal> 651 <style> 652 #scroller { 653 scroll-padding-inline: 10px 20px; 654 } 655 #target { 656 view-timeline: --t1 x; 657 view-timeline-inset: auto auto; 658 animation: anim 1s linear forwards; 659 animation-timeline: --t1; 660 } 661 </style> 662 <div id=scroller> 663 <div id="container"> 664 <div id=target></div> 665 </div> 666 </div> 667 </template> 668 <script> 669 promise_test(async (t) => { 670 inflate(t, test_auto_horizontal); 671 await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); 672 await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% 673 await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% 674 await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% 675 }, 'view-timeline-inset:auto, x'); 676 </script> 677 678 <template id=test_auto_horizontal_rtl> 679 <style> 680 #scroller { 681 scroll-padding-inline: 10px 20px; 682 direction: rtl; 683 } 684 #target { 685 view-timeline: --t1 x; 686 view-timeline-inset: auto auto; 687 animation: anim 1s linear forwards; 688 animation-timeline: --t1; 689 } 690 </style> 691 <div id=scroller> 692 <div id="container"> 693 <div id=target></div> 694 </div> 695 </div> 696 </template> 697 <script> 698 promise_test(async (t) => { 699 inflate(t, test_auto_horizontal_rtl); 700 await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 }); 701 await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0% 702 await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50% 703 await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100% 704 }, 'view-timeline-inset:auto, x, rtl'); 705 </script> 706 707 <template id=test_auto_horizontal_vertical_lr> 708 <style> 709 #scroller { 710 scroll-padding-block: 10px 20px; 711 writing-mode: vertical-lr; 712 } 713 #target { 714 view-timeline: --t1 x; 715 view-timeline-inset: auto auto; 716 animation: anim 1s linear forwards; 717 animation-timeline: --t1; 718 } 719 </style> 720 <div id=scroller> 721 <div id="container"> 722 <div id=target></div> 723 </div> 724 </div> 725 </template> 726 <script> 727 promise_test(async (t) => { 728 inflate(t, test_auto_horizontal_vertical_lr); 729 await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); 730 await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% 731 await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% 732 await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% 733 }, 'view-timeline-inset:auto, x, vertical-lr'); 734 </script> 735 736 <template id=test_auto_horizontal_vertical_rl> 737 <style> 738 #scroller { 739 scroll-padding-block: 10px 20px; 740 writing-mode: vertical-rl; 741 } 742 #target { 743 view-timeline: --t1 x; 744 view-timeline-inset: auto auto; 745 animation: anim 1s linear forwards; 746 animation-timeline: --t1; 747 } 748 </style> 749 <div id=scroller> 750 <div id="container"> 751 <div id=target></div> 752 </div> 753 </div> 754 </template> 755 <script> 756 promise_test(async (t) => { 757 inflate(t, test_auto_horizontal_vertical_rl); 758 await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 }); 759 await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0% 760 await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50% 761 await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100% 762 }, 'view-timeline-inset:auto, x, vertical-rl'); 763 </script> 764 765 <template id=test_auto_mix> 766 <style> 767 #scroller { 768 font-size: 10px; 769 scroll-padding-block: 50px calc(10% + 1em); 770 } 771 #target { 772 view-timeline: --t1; 773 view-timeline-inset: 10% auto; 774 animation: anim 1s linear forwards; 775 animation-timeline: --t1; 776 } 777 </style> 778 <div id=scroller> 779 <div id="container"> 780 <div id=target></div> 781 </div> 782 </div> 783 </template> 784 <script> 785 promise_test(async (t) => { 786 inflate(t, test_auto_mix); 787 // Note: 10% of scroller height 100px is 10px, and 1em with font-size:10px 788 // is also 10px. Hence we expect the end inset specified as calc(10% + 1em) 789 // to be 20px. 790 await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); 791 await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% 792 await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% 793 await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% 794 }, 'view-timeline-inset:auto, mix'); 795 </script> 796 797 <!-- 798 TODO: How to test view-timeline:auto + scroll-padding:auto? The UA may 799 in theory use any value in that case. 800 801 https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-padding-auto 802 -->