Skip to content

Commit 39964f1

Browse files
devongovettdevongovett
committed
Implement animation-range properties
#572
1 parent 76e31cf commit 39964f1

File tree

4 files changed

+563
-1
lines changed

4 files changed

+563
-1
lines changed

‎node/ast.d.ts

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1960,6 +1960,15 @@ export type PropertyId =
19601960
| {
19611961
property: "animation-timeline";
19621962
}
1963+
| {
1964+
property: "animation-range-start";
1965+
}
1966+
| {
1967+
property: "animation-range-end";
1968+
}
1969+
| {
1970+
property: "animation-range";
1971+
}
19631972
| {
19641973
property: "animation";
19651974
vendorPrefix: VendorPrefix;
@@ -3316,6 +3325,18 @@ export type Declaration =
33163325
property: "animation-timeline";
33173326
value: AnimationTimeline[];
33183327
}
3328+
| {
3329+
property: "animation-range-start";
3330+
value: AnimationRangeStart[];
3331+
}
3332+
| {
3333+
property: "animation-range-end";
3334+
value: AnimationRangeEnd[];
3335+
}
3336+
| {
3337+
property: "animation-range";
3338+
value: AnimationRange[];
3339+
}
33193340
| {
33203341
property: "animation";
33213342
value: Animation[];
@@ -5541,6 +5562,38 @@ export type Scroller = "root" | "nearest" | "self";
55415562
* @maxItems 2
55425563
*/
55435564
export type Size2DFor_LengthPercentageOrAuto = [LengthPercentageOrAuto, LengthPercentageOrAuto];
5565+
/**
5566+
* A value for the [animation-range-start](https://drafts.csswg.org/scroll-animations/#animation-range-start) property.
5567+
*/
5568+
export type AnimationRangeStart = AnimationAttachmentRange;
5569+
/**
5570+
* A value for the [animation-range-start](https://drafts.csswg.org/scroll-animations/#animation-range-start) or [animation-range-end](https://drafts.csswg.org/scroll-animations/#animation-range-end) property.
5571+
*/
5572+
export type AnimationAttachmentRange =
5573+
| "Normal"
5574+
| {
5575+
LengthPercentage: DimensionPercentageFor_LengthValue;
5576+
}
5577+
| {
5578+
TimelineRange: {
5579+
/**
5580+
* The name of the timeline range.
5581+
*/
5582+
name: TimelineRangeName;
5583+
/**
5584+
* The offset from the start of the named timeline range.
5585+
*/
5586+
offset: DimensionPercentageFor_LengthValue;
5587+
};
5588+
};
5589+
/**
5590+
* A [view progress timeline range](https://drafts.csswg.org/scroll-animations/#view-timelines-ranges)
5591+
*/
5592+
export type TimelineRangeName = "cover" | "contain" | "entry" | "exit" | "entry-crossing" | "exit-crossing";
5593+
/**
5594+
* A value for the [animation-range-end](https://drafts.csswg.org/scroll-animations/#animation-range-end) property.
5595+
*/
5596+
export type AnimationRangeEnd = AnimationAttachmentRange;
55445597
/**
55455598
* An individual [transform function](https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#two-d-transform-functions).
55465599
*/
@@ -8575,6 +8628,19 @@ export interface ViewTimeline {
85758628
*/
85768629
inset: Size2DFor_LengthPercentageOrAuto;
85778630
}
8631+
/**
8632+
* A value for the [animation-range](https://drafts.csswg.org/scroll-animations/#animation-range) shorthand property.
8633+
*/
8634+
export interface AnimationRange {
8635+
/**
8636+
* The end of the animation's attachment range.
8637+
*/
8638+
end: AnimationRangeEnd;
8639+
/**
8640+
* The start of the animation's attachment range.
8641+
*/
8642+
start: AnimationRangeStart;
8643+
}
85788644
/**
85798645
* A value for the [animation](https://drafts.csswg.org/css-animations/#animation) shorthand property.
85808646
*/

‎src/lib.rs

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11585,6 +11585,249 @@ mod tests {
1158511585
..Browsers::default()
1158611586
},
1158711587
);
11588+
11589+
minify_test(
11590+
".foo { animation-range-start: entry 10% }",
11591+
".foo{animation-range-start:entry 10%}",
11592+
);
11593+
minify_test(
11594+
".foo { animation-range-start: entry 0% }",
11595+
".foo{animation-range-start:entry}",
11596+
);
11597+
minify_test(
11598+
".foo { animation-range-start: entry }",
11599+
".foo{animation-range-start:entry}",
11600+
);
11601+
minify_test(".foo { animation-range-start: 50% }", ".foo{animation-range-start:50%}");
11602+
minify_test(
11603+
".foo { animation-range-end: exit 10% }",
11604+
".foo{animation-range-end:exit 10%}",
11605+
);
11606+
minify_test(
11607+
".foo { animation-range-end: exit 100% }",
11608+
".foo{animation-range-end:exit}",
11609+
);
11610+
minify_test(".foo { animation-range-end: exit }", ".foo{animation-range-end:exit}");
11611+
minify_test(".foo { animation-range-end: 50% }", ".foo{animation-range-end:50%}");
11612+
minify_test(
11613+
".foo { animation-range: entry 10% exit 90% }",
11614+
".foo{animation-range:entry 10% exit 90%}",
11615+
);
11616+
minify_test(
11617+
".foo { animation-range: entry 0% exit 100% }",
11618+
".foo{animation-range:entry exit}",
11619+
);
11620+
minify_test(".foo { animation-range: entry }", ".foo{animation-range:entry}");
11621+
minify_test(
11622+
".foo { animation-range: entry 0% entry 100% }",
11623+
".foo{animation-range:entry}",
11624+
);
11625+
minify_test(".foo { animation-range: 50% normal }", ".foo{animation-range:50%}");
11626+
minify_test(
11627+
".foo { animation-range: normal normal }",
11628+
".foo{animation-range:normal}",
11629+
);
11630+
test(
11631+
r#"
11632+
.foo {
11633+
animation-range-start: entry 10%;
11634+
animation-range-end: exit 90%;
11635+
}
11636+
"#,
11637+
indoc! {r#"
11638+
.foo {
11639+
animation-range: entry 10% exit 90%;
11640+
}
11641+
"#},
11642+
);
11643+
test(
11644+
r#"
11645+
.foo {
11646+
animation-range-start: entry 0%;
11647+
animation-range-end: entry 100%;
11648+
}
11649+
"#,
11650+
indoc! {r#"
11651+
.foo {
11652+
animation-range: entry;
11653+
}
11654+
"#},
11655+
);
11656+
test(
11657+
r#"
11658+
.foo {
11659+
animation-range-start: entry 0%;
11660+
animation-range-end: exit 100%;
11661+
}
11662+
"#,
11663+
indoc! {r#"
11664+
.foo {
11665+
animation-range: entry exit;
11666+
}
11667+
"#},
11668+
);
11669+
test(
11670+
r#"
11671+
.foo {
11672+
animation-range-start: 10%;
11673+
animation-range-end: normal;
11674+
}
11675+
"#,
11676+
indoc! {r#"
11677+
.foo {
11678+
animation-range: 10%;
11679+
}
11680+
"#},
11681+
);
11682+
test(
11683+
r#"
11684+
.foo {
11685+
animation-range-start: 10%;
11686+
animation-range-end: 90%;
11687+
}
11688+
"#,
11689+
indoc! {r#"
11690+
.foo {
11691+
animation-range: 10% 90%;
11692+
}
11693+
"#},
11694+
);
11695+
test(
11696+
r#"
11697+
.foo {
11698+
animation-range-start: entry 10%;
11699+
animation-range-end: exit 100%;
11700+
}
11701+
"#,
11702+
indoc! {r#"
11703+
.foo {
11704+
animation-range: entry 10% exit;
11705+
}
11706+
"#},
11707+
);
11708+
test(
11709+
r#"
11710+
.foo {
11711+
animation-range-start: 10%;
11712+
animation-range-end: exit 90%;
11713+
}
11714+
"#,
11715+
indoc! {r#"
11716+
.foo {
11717+
animation-range: 10% exit 90%;
11718+
}
11719+
"#},
11720+
);
11721+
test(
11722+
r#"
11723+
.foo {
11724+
animation-range-start: entry 10%;
11725+
animation-range-end: 90%;
11726+
}
11727+
"#,
11728+
indoc! {r#"
11729+
.foo {
11730+
animation-range: entry 10% 90%;
11731+
}
11732+
"#},
11733+
);
11734+
test(
11735+
r#"
11736+
.foo {
11737+
animation-range: entry;
11738+
animation-range-end: 90%;
11739+
}
11740+
"#,
11741+
indoc! {r#"
11742+
.foo {
11743+
animation-range: entry 90%;
11744+
}
11745+
"#},
11746+
);
11747+
test(
11748+
r#"
11749+
.foo {
11750+
animation-range: entry;
11751+
animation-range-end: var(--end);
11752+
}
11753+
"#,
11754+
indoc! {r#"
11755+
.foo {
11756+
animation-range: entry;
11757+
animation-range-end: var(--end);
11758+
}
11759+
"#},
11760+
);
11761+
test(
11762+
r#"
11763+
.foo {
11764+
animation-range-start: entry 10%, entry 50%;
11765+
animation-range-end: exit 90%;
11766+
}
11767+
"#,
11768+
indoc! {r#"
11769+
.foo {
11770+
animation-range-start: entry 10%, entry 50%;
11771+
animation-range-end: exit 90%;
11772+
}
11773+
"#},
11774+
);
11775+
test(
11776+
r#"
11777+
.foo {
11778+
animation-range-start: entry 10%, entry 50%;
11779+
animation-range-end: exit 90%, exit 100%;
11780+
}
11781+
"#,
11782+
indoc! {r#"
11783+
.foo {
11784+
animation-range: entry 10% exit 90%, entry 50% exit;
11785+
}
11786+
"#},
11787+
);
11788+
test(
11789+
r#"
11790+
.foo {
11791+
animation-range: entry;
11792+
animation-range-end: 90%;
11793+
animation: spin 100ms;
11794+
}
11795+
"#,
11796+
indoc! {r#"
11797+
.foo {
11798+
animation: .1s spin;
11799+
}
11800+
"#},
11801+
);
11802+
test(
11803+
r#"
11804+
.foo {
11805+
animation: spin 100ms;
11806+
animation-range: entry;
11807+
animation-range-end: 90%;
11808+
}
11809+
"#,
11810+
indoc! {r#"
11811+
.foo {
11812+
animation: .1s spin;
11813+
animation-range: entry 90%;
11814+
}
11815+
"#},
11816+
);
11817+
test(
11818+
r#"
11819+
.foo {
11820+
animation-range: entry;
11821+
animation-range-end: 90%;
11822+
animation: var(--animation) 100ms;
11823+
}
11824+
"#,
11825+
indoc! {r#"
11826+
.foo {
11827+
animation: var(--animation) .1s;
11828+
}
11829+
"#},
11830+
);
1158811831
}
1158911832

1159011833
#[test]

0 commit comments

Comments
 (0)