| <!DOCTYPE html> |
| <title>Animations using named timeline ranges</title> |
| <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="support/testcommon.js"></script> |
| <style> |
| @keyframes anim { |
| from { z-index: 0; background-color: skyblue;} |
| to { z-index: 100; background-color: coral; } |
| } |
| #scroller { |
| border: 10px solid lightgray; |
| overflow-y: scroll; |
| width: 200px; |
| height: 200px; |
| } |
| #target { |
| margin: 800px 0px; |
| width: 100px; |
| height: 100px; |
| z-index: -1; |
| background-color: green; |
| } |
| </style> |
| <main id=main> |
| </main> |
| <template> |
| <div id=scroller> |
| <div id=target></div> |
| </div> |
| </template> |
| <script> |
| setup(assert_implements_animation_timeline); |
| |
| function inflate(t, template) { |
| t.add_cleanup(() => main.replaceChildren()); |
| main.append(template.content.cloneNode(true)); |
| } |
| async function scrollTop(e, value) { |
| e.scrollTop = value; |
| await waitForNextFrame(); |
| } |
| async function waitForAnimationReady(target) { |
| await waitForNextFrame(); |
| await Promise.all(target.getAnimations().map(x => x.promise)); |
| } |
| async function assertValueAt(scroller, target, args) { |
| await waitForAnimationReady(target); |
| await scrollTop(scroller, args.scrollTop); |
| assert_equals(getComputedStyle(target).zIndex, args.expected.toString()); |
| } |
| function test_animation_delay(options) { |
| promise_test(async (t) => { |
| inflate(t, document.querySelector('template')); |
| let scroller = main.querySelector('#scroller'); |
| let target = main.querySelector('#target'); |
| |
| target.style.viewTimeline = 't1 block'; |
| // TODO(crbug.com/1375998): Create the timeline in a separate frame to |
| // work around a bug. |
| await waitForNextFrame(); |
| |
| target.style.animation = 'anim 10s linear'; |
| target.style.animationTimeline = 't1'; |
| target.style.animationDelayStart = options.startDelay; |
| target.style.animationDelayEnd = options.endDelay; |
| |
| // Accommodates floating point precision errors at the endpoints. |
| target.style.animationFillMode = 'both'; |
| |
| // 0% |
| await assertValueAt(scroller, target, |
| { scrollTop: options.rangeStart, expected: 0 }); |
| // 50% |
| await assertValueAt(scroller, target, |
| { scrollTop: (options.rangeStart + options.rangeEnd) / 2, expected: 50 }); |
| // 100% |
| await assertValueAt(scroller, target, |
| { scrollTop: options.rangeEnd, expected: 100 }); |
| |
| // Test before/after phases (need to clear the fill mode for that). |
| target.style.animationFillMode = 'initial'; |
| await assertValueAt(scroller, target, |
| { scrollTop: options.rangeStart - 10, expected: -1 }); |
| await assertValueAt(scroller, target, |
| { scrollTop: options.rangeEnd + 10, expected: -1 }); |
| // Check 50% again without fill mode. |
| await assertValueAt(scroller, target, |
| { scrollTop: (options.rangeStart + options.rangeEnd) / 2, expected: 50 }); |
| |
| }, `Animation with delays [${options.startDelay}, ${options.endDelay}]`); |
| } |
| |
| test_animation_delay({ |
| startDelay: 'initial', |
| endDelay: 'initial', |
| rangeStart: 600, |
| rangeEnd: 900 |
| }); |
| |
| test_animation_delay({ |
| startDelay: 'cover 0%', |
| endDelay: 'cover 100%', |
| rangeStart: 600, |
| rangeEnd: 900 |
| }); |
| |
| test_animation_delay({ |
| startDelay: 'contain 0%', |
| endDelay: 'contain 100%', |
| rangeStart: 700, |
| rangeEnd: 800 |
| }); |
| |
| test_animation_delay({ |
| startDelay: 'enter 0%', |
| endDelay: 'enter 100%', |
| rangeStart: 600, |
| rangeEnd: 700 |
| }); |
| |
| test_animation_delay({ |
| startDelay: 'exit 0%', |
| endDelay: 'exit 100%', |
| rangeStart: 800, |
| rangeEnd: 900 |
| }); |
| |
| test_animation_delay({ |
| startDelay: 'contain -50%', |
| endDelay: 'enter 200%', |
| rangeStart: 650, |
| rangeEnd: 800 |
| }); |
| |
| test_animation_delay({ |
| startDelay: 'enter 0%', |
| endDelay: 'exit 100%', |
| rangeStart: 600, |
| rangeEnd: 900 |
| }); |
| </script> |
