Implement getter and setter for rangeStart and rangeEnd.
Bug: 1424538
Change-Id: I69506a04387ed76e5daf9d0c173f12afce8b0b6a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4335845
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1117717}
diff --git a/scroll-animations/view-timelines/view-timeline-get-set-range.html b/scroll-animations/view-timelines/view-timeline-get-set-range.html
new file mode 100644
index 0000000..e80ef57
--- /dev/null
+++ b/scroll-animations/view-timelines/view-timeline-get-set-range.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html id="top">
+<meta charset="utf-8">
+<title>View timeline delay</title>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
+<script src="/scroll-animations/view-timelines/testcommon.js"></script>
+<script src="/css/css-typed-om/resources/testhelper.js"></script>
+<style>
+ #container {
+ border: 10px solid lightgray;
+ overflow-x: scroll;
+ height: 200px;
+ width: 200px;
+ }
+ #content {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ width: 1800px;
+ margin: 0;
+ }
+ .spacer {
+ width: 800px;
+ display: inline-block;
+ }
+ #target {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ display: inline-block;
+ font-size: 10px;
+ }
+</style>
+<body>
+ <div id="container">
+ <div id="content">
+ <div class="spacer"></div>
+ <div id="target"></div>
+ <div class="spacer"></div>
+ </div>
+ </div>
+</body>
+<script type="text/javascript">
+ function assert_timeline_offset(actual, expected, errorMessage) {
+ assert_equals(actual.rangeName, expected.rangeName, errorMessage);
+ assert_style_value_equals(actual.offset, expected.offset);
+ }
+
+ promise_test(async t => {
+ const timeline = new ViewTimeline({ subject: target, axis: 'inline' });
+ const anim = target.animate({ opacity: [0, 1 ] }, { timeline: timeline });
+ t.add_cleanup(() => {
+ anim.cancel();
+ });
+
+ container.scrollLeft = 750;
+ await waitForNextFrame();
+
+ // auto ==> cover 0% to cover 100%
+ // cover 0% @ 600px
+ // cover 100% @ 900px
+ // expected opacity = (750 - 600) / (900 - 600) = 0.5
+ assert_equals(anim.rangeStart, 'auto', 'Initial value for rangeStart');
+ assert_equals(anim.rangeEnd, 'auto', 'Initial value for rangeEnd');
+ assert_equals(getComputedStyle(target).opacity, '0.5',
+ 'Opacity with range set to [auto, auto]');
+
+ // contain 0% @ 700px
+ // cover 100% @ 900px
+ // expected opacity = (750 - 700) / (900 - 700) = 0.25
+ anim.rangeStart = "contain 0%";
+ anim.rangeEnd = "cover 100%";
+
+ assert_timeline_offset(
+ anim.rangeStart,
+ { rangeName: 'contain', offset: CSS.percent(0) },
+ 'rangeStart set to contain 0%');
+ assert_timeline_offset(
+ anim.rangeEnd,
+ { rangeName: 'cover', offset: CSS.percent(100) },
+ 'rangeEnd set to cover 100%');
+ assert_equals(getComputedStyle(target).opacity, '0.25',
+ 'opacity with range set to [contain 0%, cover 100%]');
+
+ // entry -20px @ 580px
+ // exit-crossing 10% @ 810px
+ // expected opacity = (750 - 580) / (810 - 580) = 0.739130
+ anim.rangeStart = { rangeName: 'entry', offset: CSS.px(-20), };
+ anim.rangeEnd = { rangeName: 'exit-crossing', offset: CSS.percent(10) };
+ assert_timeline_offset(
+ anim.rangeStart,
+ { rangeName: 'entry', offset: CSS.px(-20) },
+ 'rangeStart set to entry -20px');
+ assert_timeline_offset(
+ anim.rangeEnd,
+ { rangeName: 'exit-crossing', offset: CSS.percent(10) },
+ 'rangeEnd set to exit-crossing 10%');
+ assert_approx_equals(
+ parseFloat(getComputedStyle(target).opacity), 0.739130, 1e-6,
+ 'opacity with range set to [entry -20px, exit-crossing 10%]');
+
+ // auto [start] @ 600px
+ // contain 100% @ 800px
+ // expected opacity = (750 - 600) / (800 - 600) = 0.75
+ anim.rangeStart = "auto";
+ anim.rangeEnd = "contain calc(60% + 40%)";
+ assert_equals(anim.rangeStart, 'auto','rangeStart set to auto');
+ assert_timeline_offset(
+ anim.rangeEnd,
+ { rangeName: 'contain', offset: CSS.percent(100) },
+ 'rangeEnd set to contain 100%');
+ assert_equals(getComputedStyle(target).opacity, '0.75',
+ 'opacity with range set to [auto, contain 100%]');
+ }, 'Getting and setting the animation range');
+</script>
+</html>
diff --git a/web-animations/interfaces/Animation/style-change-events.html b/web-animations/interfaces/Animation/style-change-events.html
index b41f748..0ec2165 100644
--- a/web-animations/interfaces/Animation/style-change-events.html
+++ b/web-animations/interfaces/Animation/style-change-events.html
@@ -164,6 +164,11 @@
}),
playState: UsePropertyTest(animation => animation.playState),
pending: UsePropertyTest(animation => animation.pending),
+ // Strictly speaking, rangeStart and rangeEnd can change whether the effect
+ // is active, but only if the animation has a view timeline. Otherwise, it has
+ // no effect.
+ rangeStart: UsePropertyTest(animation => animation.rangeStart),
+ rangeEnd: UsePropertyTest(animation => animation.rangeEnd),
replaceState: UsePropertyTest(animation => animation.replaceState),
ready: UsePropertyTest(animation => animation.ready),
finished: UsePropertyTest(animation => {
