Part 3: Look up named view timeline for CSS animations and update WPT expectations.
Disable OMTA support for now. We have to make sure what should we do when
the subject is scrolled to "out of view" on the compositor, in Bug 1818346.
And we have to make sure view-timeline-inset animation work well on the
compositor.
Also, update tests,
1) timeline-offset-keyframes-hidden-subject.html, and
2) view-timeline-keyframe-boundary-interpolation.html,
to avoid js error because Gecko doesn't expose Animation object with
scroll-timeline or view-timeline.
And update test, view-timeline-lookup.html, because scroll progress timelines
take precedence over view progress timelines (i.e. choose the matched scroll
progress timeline first), per the spec in
https://drafts.csswg.org/scroll-animations-1/#timeline-scope.
Differential Revision: https://phabricator.services.mozilla.com/D170004
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1737920
gecko-commit: 15841f7c7d94c52c023012b0c085574178198027
gecko-reviewers: emilio
diff --git a/scroll-animations/css/timeline-offset-keyframes-hidden-subject.html b/scroll-animations/css/timeline-offset-keyframes-hidden-subject.html
index 047acfe..389c8ba 100644
--- a/scroll-animations/css/timeline-offset-keyframes-hidden-subject.html
+++ b/scroll-animations/css/timeline-offset-keyframes-hidden-subject.html
@@ -62,7 +62,10 @@
async function runTest() {
promise_test(async t => {
await waitForNextFrame();
- const anim = document.getAnimations()[0];
+ const anims = document.getAnimations();
+ assert_equals(anims.length, 1,
+ "Should have one animation attatched to the view-timeline");
+ const anim = anims[0];
await anim.ready;
await waitForNextFrame();
diff --git a/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html b/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html
index a0d1bd9..7bae49c 100644
--- a/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html
+++ b/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html
@@ -51,7 +51,6 @@
// scrollTop=200 to 400 is the entry range
container.scrollTop = 200;
await waitForNextFrame();
- const anim = document.getAnimations()[0];
assert_equals(getComputedStyle(subject).opacity, '0',
'Effect at entry 0%');
diff --git a/scroll-animations/css/view-timeline-animation.html b/scroll-animations/css/view-timeline-animation.html
index b816bb6..73189b8 100644
--- a/scroll-animations/css/view-timeline-animation.html
+++ b/scroll-animations/css/view-timeline-animation.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<title>Animations using view-timeline</title>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
diff --git a/scroll-animations/css/view-timeline-inset-animation.html b/scroll-animations/css/view-timeline-inset-animation.html
index a95086b..a7e807c 100644
--- a/scroll-animations/css/view-timeline-inset-animation.html
+++ b/scroll-animations/css/view-timeline-inset-animation.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<title>Animations using view-timeline-inset</title>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#propdef-view-timeline-inset">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
diff --git a/scroll-animations/css/view-timeline-keyframe-boundary-interpolation.html b/scroll-animations/css/view-timeline-keyframe-boundary-interpolation.html
index 1dc766d..04eb648 100644
--- a/scroll-animations/css/view-timeline-keyframe-boundary-interpolation.html
+++ b/scroll-animations/css/view-timeline-keyframe-boundary-interpolation.html
@@ -80,7 +80,10 @@
promise_test(async t => {
await waitForNextFrame();
- const anim = document.getAnimations()[0];
+ const anims = document.getAnimations();
+ assert_equals(anims.length, 1,
+ "Should have one animation attatched to the view-timeline");
+ const anim = anims[0];
await anim.ready;
await waitForNextFrame();
diff --git a/scroll-animations/css/view-timeline-lookup.html b/scroll-animations/css/view-timeline-lookup.html
index c1797c7..b8a5b00 100644
--- a/scroll-animations/css/view-timeline-lookup.html
+++ b/scroll-animations/css/view-timeline-lookup.html
@@ -260,8 +260,7 @@
}, 'view-timeline on ancestor sibling, closer scroll-timeline wins');
</script>
-
-<template id=timeline_ancestor_view_timeline_wins_on_same_element>
+<template id=timeline_ancestor_scroll_timeline_wins_on_same_element>
<style>
#timelines {
height: 0px;
@@ -294,8 +293,11 @@
</template>
<script>
promise_test(async (t) => {
- inflate(t, timeline_ancestor_view_timeline_wins_on_same_element);
+ inflate(t, timeline_ancestor_scroll_timeline_wins_on_same_element);
await waitForNextFrame();
- assert_equals(getComputedStyle(target).zIndex, '75');
- }, 'view-timeline on ancestor sibling, view-timeline wins on same element');
+ // In case of a name conflict on the same element, scroll progress timelines
+ // take precedence over view progress timelines.
+ // https://drafts.csswg.org/scroll-animations-1/#timeline-scope
+ assert_equals(getComputedStyle(target).zIndex, '0');
+ }, 'view-timeline on ancestor sibling, scroll-timeline wins on same element');
</script>
