diff --git a/src/proxy-animation.js b/src/proxy-animation.js index 986fedd..8fe353f 100644 --- a/src/proxy-animation.js +++ b/src/proxy-animation.js @@ -6,6 +6,7 @@ import { fractionalOffset, } from "./scroll-timeline-base"; import {splitIntoComponentValues} from './utils'; +import {simplifyCalculation} from './simplify-calculation'; const nativeDocumentGetAnimations = document.getAnimations; const nativeElementGetAnimations = window.Element.prototype.getAnimations; @@ -823,19 +824,19 @@ function createProxyEffect(details) { // Computes the start delay as a fraction of the active cover range. function fractionalStartDelay(details) { if (!details.animationRange) return 0; - if (details.animationRange.start === 'normal') { - details.animationRange.start = getNormalStartRange(details.timeline); - } - return fractionalOffset(details.timeline, details.animationRange.start); + const rangeStart = details.animationRange.start === 'normal' ? + getNormalStartRange(details.timeline) : + details.animationRange.start; + return fractionalOffset(details.timeline, rangeStart); } // Computes the ends delay as a fraction of the active cover range. function fractionalEndDelay(details) { if (!details.animationRange) return 0; - if (details.animationRange.end === 'normal') { - details.animationRange.end = getNormalEndRange(details.timeline); - } - return 1 - fractionalOffset(details.timeline, details.animationRange.end); + const rangeEnd = details.animationRange.end === 'normal' ? + getNormalEndRange(details.timeline) : + details.animationRange.end; + return 1 - fractionalOffset(details.timeline, rangeEnd); } // Map from an instance of ProxyAnimation to internal details about that animation. @@ -957,8 +958,8 @@ function getNormalEndRange(timeline) { function parseAnimationRange(timeline, value) { const animationRange = { - start: getNormalStartRange(timeline), - end: getNormalEndRange(timeline), + start: 'normal', + end: 'normal', }; if (!value) @@ -1048,11 +1049,11 @@ function parseTimelineRangePart(timeline, value, position) { if (ANIMATION_RANGE_NAMES.includes(parts[0])) { rangeName = parts[0]; } else { - offset = CSSNumericValue.parse(parts[0]); + offset = simplifyCalculation(CSSNumericValue.parse(parts[0]), {}); } } else if (parts.length === 2) { rangeName = parts[0]; - offset = CSSNumericValue.parse(parts[1]); + offset = simplifyCalculation(CSSNumericValue.parse(parts[1]), {}); } } diff --git a/test/expected.txt b/test/expected.txt index d7913de..3a8a9ae 100644 --- a/test/expected.txt +++ b/test/expected.txt @@ -1054,7 +1054,7 @@ FAIL /scroll-animations/view-timelines/timeline-offset-in-keyframe.html Timeline FAIL /scroll-animations/view-timelines/timeline-offset-in-keyframe.html Timeline offsets in programmatic keyframes resolved when updating the animation effect FAIL /scroll-animations/view-timelines/unattached-subject-inset.html Creating a view timeline with a subject that is not attached to the document works as expected FAIL /scroll-animations/view-timelines/view-timeline-get-current-time-range-name.html View timeline current time for named range -FAIL /scroll-animations/view-timelines/view-timeline-get-set-range.html Getting and setting the animation range +PASS /scroll-animations/view-timelines/view-timeline-get-set-range.html Getting and setting the animation range PASS /scroll-animations/view-timelines/view-timeline-inset.html View timeline with px based inset. PASS /scroll-animations/view-timelines/view-timeline-inset.html View timeline with percent based inset. PASS /scroll-animations/view-timelines/view-timeline-inset.html view timeline with inset auto.