Skip to content

Commit

Permalink
Implement animation-range properties
Browse files Browse the repository at this point in the history 
#572
  • Loading branch information
@devongovett
devongovett committed Jun 3, 2024
1 parent 76e31cf commit 39964f1
Show file tree
Hide file tree
Showing 4 changed files with 563 additions and 1 deletion.
66 changes: 66 additions & 0 deletions node/ast.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1960,6 +1960,15 @@ export type PropertyId =
| {
property: "animation-timeline";
}
| {
property: "animation-range-start";
}
| {
property: "animation-range-end";
}
| {
property: "animation-range";
}
| {
property: "animation";
vendorPrefix: VendorPrefix;
Expand Down Expand Up @@ -3316,6 +3325,18 @@ export type Declaration =
property: "animation-timeline";
value: AnimationTimeline[];
}
| {
property: "animation-range-start";
value: AnimationRangeStart[];
}
| {
property: "animation-range-end";
value: AnimationRangeEnd[];
}
| {
property: "animation-range";
value: AnimationRange[];
}
| {
property: "animation";
value: Animation[];
Expand Down Expand Up @@ -5541,6 +5562,38 @@ export type Scroller = "root" | "nearest" | "self";
* @maxItems 2
*/
export type Size2DFor_LengthPercentageOrAuto = [LengthPercentageOrAuto, LengthPercentageOrAuto];
/**
* A value for the [animation-range-start](https://drafts.csswg.org/scroll-animations/#animation-range-start) property.
*/
export type AnimationRangeStart = AnimationAttachmentRange;
/**
* 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.
*/
export type AnimationAttachmentRange =
| "Normal"
| {
LengthPercentage: DimensionPercentageFor_LengthValue;
}
| {
TimelineRange: {
/**
* The name of the timeline range.
*/
name: TimelineRangeName;
/**
* The offset from the start of the named timeline range.
*/
offset: DimensionPercentageFor_LengthValue;
};
};
/**
* A [view progress timeline range](https://drafts.csswg.org/scroll-animations/#view-timelines-ranges)
*/
export type TimelineRangeName = "cover" | "contain" | "entry" | "exit" | "entry-crossing" | "exit-crossing";
/**
* A value for the [animation-range-end](https://drafts.csswg.org/scroll-animations/#animation-range-end) property.
*/
export type AnimationRangeEnd = AnimationAttachmentRange;
/**
* An individual [transform function](https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#two-d-transform-functions).
*/
Expand Down Expand Up @@ -8575,6 +8628,19 @@ export interface ViewTimeline {
*/
inset: Size2DFor_LengthPercentageOrAuto;
}
/**
* A value for the [animation-range](https://drafts.csswg.org/scroll-animations/#animation-range) shorthand property.
*/
export interface AnimationRange {
/**
* The end of the animation's attachment range.
*/
end: AnimationRangeEnd;
/**
* The start of the animation's attachment range.
*/
start: AnimationRangeStart;
}
/**
* A value for the [animation](https://drafts.csswg.org/css-animations/#animation) shorthand property.
*/
Expand Down
243 changes: 243 additions & 0 deletions src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11585,6 +11585,249 @@ mod tests {
..Browsers::default()
},
);

minify_test(
".foo { animation-range-start: entry 10% }",
".foo{animation-range-start:entry 10%}",
);
minify_test(
".foo { animation-range-start: entry 0% }",
".foo{animation-range-start:entry}",
);
minify_test(
".foo { animation-range-start: entry }",
".foo{animation-range-start:entry}",
);
minify_test(".foo { animation-range-start: 50% }", ".foo{animation-range-start:50%}");
minify_test(
".foo { animation-range-end: exit 10% }",
".foo{animation-range-end:exit 10%}",
);
minify_test(
".foo { animation-range-end: exit 100% }",
".foo{animation-range-end:exit}",
);
minify_test(".foo { animation-range-end: exit }", ".foo{animation-range-end:exit}");
minify_test(".foo { animation-range-end: 50% }", ".foo{animation-range-end:50%}");
minify_test(
".foo { animation-range: entry 10% exit 90% }",
".foo{animation-range:entry 10% exit 90%}",
);
minify_test(
".foo { animation-range: entry 0% exit 100% }",
".foo{animation-range:entry exit}",
);
minify_test(".foo { animation-range: entry }", ".foo{animation-range:entry}");
minify_test(
".foo { animation-range: entry 0% entry 100% }",
".foo{animation-range:entry}",
);
minify_test(".foo { animation-range: 50% normal }", ".foo{animation-range:50%}");
minify_test(
".foo { animation-range: normal normal }",
".foo{animation-range:normal}",
);
test(
r#"
.foo {
animation-range-start: entry 10%;
animation-range-end: exit 90%;
}
"#,
indoc! {r#"
.foo {
animation-range: entry 10% exit 90%;
}
"#},
);
test(
r#"
.foo {
animation-range-start: entry 0%;
animation-range-end: entry 100%;
}
"#,
indoc! {r#"
.foo {
animation-range: entry;
}
"#},
);
test(
r#"
.foo {
animation-range-start: entry 0%;
animation-range-end: exit 100%;
}
"#,
indoc! {r#"
.foo {
animation-range: entry exit;
}
"#},
);
test(
r#"
.foo {
animation-range-start: 10%;
animation-range-end: normal;
}
"#,
indoc! {r#"
.foo {
animation-range: 10%;
}
"#},
);
test(
r#"
.foo {
animation-range-start: 10%;
animation-range-end: 90%;
}
"#,
indoc! {r#"
.foo {
animation-range: 10% 90%;
}
"#},
);
test(
r#"
.foo {
animation-range-start: entry 10%;
animation-range-end: exit 100%;
}
"#,
indoc! {r#"
.foo {
animation-range: entry 10% exit;
}
"#},
);
test(
r#"
.foo {
animation-range-start: 10%;
animation-range-end: exit 90%;
}
"#,
indoc! {r#"
.foo {
animation-range: 10% exit 90%;
}
"#},
);
test(
r#"
.foo {
animation-range-start: entry 10%;
animation-range-end: 90%;
}
"#,
indoc! {r#"
.foo {
animation-range: entry 10% 90%;
}
"#},
);
test(
r#"
.foo {
animation-range: entry;
animation-range-end: 90%;
}
"#,
indoc! {r#"
.foo {
animation-range: entry 90%;
}
"#},
);
test(
r#"
.foo {
animation-range: entry;
animation-range-end: var(--end);
}
"#,
indoc! {r#"
.foo {
animation-range: entry;
animation-range-end: var(--end);
}
"#},
);
test(
r#"
.foo {
animation-range-start: entry 10%, entry 50%;
animation-range-end: exit 90%;
}
"#,
indoc! {r#"
.foo {
animation-range-start: entry 10%, entry 50%;
animation-range-end: exit 90%;
}
"#},
);
test(
r#"
.foo {
animation-range-start: entry 10%, entry 50%;
animation-range-end: exit 90%, exit 100%;
}
"#,
indoc! {r#"
.foo {
animation-range: entry 10% exit 90%, entry 50% exit;
}
"#},
);
test(
r#"
.foo {
animation-range: entry;
animation-range-end: 90%;
animation: spin 100ms;
}
"#,
indoc! {r#"
.foo {
animation: .1s spin;
}
"#},
);
test(
r#"
.foo {
animation: spin 100ms;
animation-range: entry;
animation-range-end: 90%;
}
"#,
indoc! {r#"
.foo {
animation: .1s spin;
animation-range: entry 90%;
}
"#},
);
test(
r#"
.foo {
animation-range: entry;
animation-range-end: 90%;
animation: var(--animation) 100ms;
}
"#,
indoc! {r#"
.foo {
animation: var(--animation) .1s;
}
"#},
);
}

#[test]
Expand Down
Loading

0 comments on commit 39964f1

Please sign in to comment.