Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Return "normal" for get rangeStart and rangeEnd #223

Merged
merged 1 commit into from
Feb 6, 2024
Merged

Return "normal" for get rangeStart and rangeEnd #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 13 additions & 12 deletions src/proxy-animation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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]), {});
}
}

Expand Down
2 changes: 1 addition & 1 deletion test/expected.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading