SDA WPTs batch5: switch 3 view-timeline tests to deferred attachment

We have spec consensus on replacing previous-sibling lookup in animation-timeline with deferred-timeline-attachment. This CL updates the following WPTs accordingly: wpt/scroll-animations/css/view-timeline-animation.html wpt/scroll-animations/css/view-timeline-dynamic.html wpt/scroll-animations/css/view-timeline-lookup.html Bug: 1432627 Change-Id: I080cedd538dd5f5c1d4d20824c3437f58a28c403 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4498788 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Mustaq Ahmed <mustaq@chromium.org> Cr-Commit-Position: refs/heads/main@{#1140069}
web-platform-tests · May 5, 2023 · 9ef9901 · 9ef9901
1 parent 7dfa00c
commit 9ef9901
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 86 deletions.
diff --git a/scroll-animations/css/view-timeline-animation.html b/scroll-animations/css/view-timeline-animation.html
@@ -122,7 +122,7 @@
 <template id=multiple_timelines>
   <style>
     #timelines {
-      view-timeline: tv vertical, th horizontal;
+      view-timeline: tv vertical ancestor,  th horizontal ancestor;
       background-color: red;
     }
     #scroller {
@@ -132,6 +132,7 @@
       display: grid;
       grid-template-columns: 50px 50px 50px 50px 50px 50px 50px;
       grid-template-row: 50px 50px 50px 50px 50px 50px 50px;
+      view-timeline: tv defer, th defer;
     }
     #scroller > div {
       z-index: -1;

diff --git a/scroll-animations/css/view-timeline-dynamic.html b/scroll-animations/css/view-timeline-dynamic.html
@@ -14,6 +14,7 @@
     overflow: hidden;
     width: 100px;
     height: 100px;
+    view-timeline: t1 defer;
   }
   .scroller > div {
     height: 100px;
@@ -45,7 +46,7 @@
 <template id=dynamic_view_timeline_name>
   <style>
     .timeline {
-      view-timeline-name: t1;
+      view-timeline: t1 ancestor;
     }
     #target {
       animation: anim 1s linear;
@@ -68,27 +69,34 @@
     // scrollTop=50 is 75% for div75.
     div75.classList.add('timeline');
     await waitForCSSScrollTimelineStyle();
-    assert_equals(getComputedStyle(target).zIndex, '75');
+    assert_equals(getComputedStyle(target).zIndex, '75', 'div75');
 
-    // scrollTop=50 is 25% for div25.
+    // Identical timelines in div75 and div25 creates an ambiguity.
     div25.classList.add('timeline');
     await waitForCSSScrollTimelineStyle();
-    assert_equals(getComputedStyle(target).zIndex, '25');
+    assert_equals(getComputedStyle(target).zIndex, '-1', 'ambiguous');
+    // Removing the timeline from div75 unambiguously links div25 to the
+    // timeline, making scrollTop=50 at 25% for div25.
+    div75.classList.remove('timeline');
+    await waitForCSSScrollTimelineStyle();
+    assert_equals(getComputedStyle(target).zIndex, '25', 'div25');
 
     // scrollTop=50 is before the timeline start for div_before.
+    div25.classList.remove('timeline');
     div_before.classList.add('timeline');
     await waitForCSSScrollTimelineStyle();
-    assert_equals(getComputedStyle(target).zIndex, '-1');
+    assert_equals(getComputedStyle(target).zIndex, '-1', 'ahead of div_before');
     // Scroll to 25% (for div_before) to verify that we're linked to that
     // timeline.
     await scrollTop(scroller, 150);
-    assert_equals(getComputedStyle(target).zIndex, '25');
+    assert_equals(getComputedStyle(target).zIndex, '25', 'div_before');
 
-    // Now we should be back to div25's timeline, although with the new
-    // scrollTop=150, it's actually at 75%.
+    // Linking the timeline back to div25 verifies that the new scrollTop=150 is
+    // actually at 75%.
     div_before.classList.remove('timeline');
+    div25.classList.add('timeline');
     await waitForCSSScrollTimelineStyle();
-    assert_equals(getComputedStyle(target).zIndex, '75');
+    assert_equals(getComputedStyle(target).zIndex, '75', 'div25 again');
   }, 'Dynamically changing view-timeline-name');
 </script>
 
@@ -98,7 +106,7 @@
       width: 100px;
       height: 100px;
       margin: 100px;
-      view-timeline-name: t1;
+      view-timeline: t1 ancestor;
     }
     #target {
       animation: anim 1s linear;
@@ -117,10 +125,10 @@
     await scrollTop(scroller, 50); // 25% (vertical)
     await scrollLeft(scroller, 20); // 10% (horizontal)
 
-    assert_equals(getComputedStyle(target).zIndex, '25');
+    assert_equals(getComputedStyle(target).zIndex, '25', 'vertical');
     timeline.style.viewTimelineAxis = 'horizontal';
     await waitForCSSScrollTimelineStyle();
-    assert_equals(getComputedStyle(target).zIndex, '10');
+    assert_equals(getComputedStyle(target).zIndex, '10', 'horizontal');
   }, 'Dynamically changing view-timeline-axis');
 </script>
 
@@ -130,7 +138,7 @@
       width: 100px;
       height: 100px;
       margin: 100px;
-      view-timeline-name: t1;
+      view-timeline: t1 ancestor;
     }
     #target {
       animation: anim 1s linear;
@@ -148,17 +156,17 @@
 
     await scrollTop(scroller, 50); // 25% (without inset).
 
-    assert_equals(getComputedStyle(target).zIndex, '25');
+    assert_equals(getComputedStyle(target).zIndex, '25', 'without inset');
     timeline.style.viewTimelineInset = '0px 50px';
     await waitForCSSScrollTimelineStyle();
-    assert_equals(getComputedStyle(target).zIndex, '0');
+    assert_equals(getComputedStyle(target).zIndex, '0', 'with inset');
   }, 'Dynamically changing view-timeline-inset');
 </script>
 
 <template id=timeline_display_none>
   <style>
     #timeline {
-      view-timeline-name: t1;
+      view-timeline: t1 ancestor;
     }
     #target {
       animation: anim 1s linear;
@@ -176,12 +184,10 @@
     inflate(t, timeline_display_none);
 
     await scrollTop(scroller, 50);
-    assert_equals(getComputedStyle(target).zIndex, '25');
+    assert_equals(getComputedStyle(target).zIndex, '25', 'display:block');
     timeline.style.display = 'none';
-    // Animation is held at previous current time.
-    assert_equals(getComputedStyle(target).zIndex, '25');
-    const anim = target.getAnimations()[0];
-    assert_equals(anim.startTime, null);
-    assert_times_equal(anim.currentTime, 250);
+    await waitForNextFrame();
+    // The timeline became inactive.
+    assert_equals(getComputedStyle(target).zIndex, '-1', 'display:none');
   }, 'Element with view-timeline becoming display:none');
 </script>
diff --git a/scroll-animations/css/view-timeline-lookup.html b/scroll-animations/css/view-timeline-lookup.html
@@ -57,9 +57,12 @@
 
 <template id=timeline_preceding_sibling>
   <style>
+    #scroller {
+      view-timeline: t1 defer;
+    }
     #timeline {
       height: 0px;
-      view-timeline: t1;
+      view-timeline: t1 ancestor;
     }
     #target {
       animation: anim 1s linear;
@@ -118,9 +121,12 @@
 
 <template id=timeline_ancestor_sibling>
   <style>
+    #scroller {
+      view-timeline: t1 defer;
+    }
     #timeline {
       height: 0px;
-      view-timeline: t1;
+      view-timeline: t1 ancestor;
     }
     #target {
       animation: anim 1s linear;
@@ -148,11 +154,14 @@
   }, 'view-timeline on ancestor sibling');
 </script>
 
-<template id=timeline_ancestor_sibling_closest>
+<template id=timeline_ancestor_sibling_conflict>
   <style>
+    #scroller {
+      view-timeline: t1 defer;
+    }
     #timeline1, #timeline2 {
       height: 0px;
-      view-timeline: t1;
+      view-timeline: t1 ancestor;
     }
     #target {
       animation: anim 1s linear;
@@ -175,61 +184,23 @@
 </template>
 <script>
   promise_test(async (t) => {
-    inflate(t, timeline_ancestor_sibling_closest);
+    inflate(t, timeline_ancestor_sibling_conflict);
     await waitForNextFrame();
-    assert_equals(getComputedStyle(target).zIndex, '50');
-  }, 'view-timeline on ancestor sibling, closest wins');
+    assert_equals(getComputedStyle(target).zIndex, 'auto');
+  }, 'view-timeline on ancestor sibling, conflict remains unresolved');
 </script>
 
-<template id=timeline_ancestor_sibling_skips_nonmatching>
+<template id=timeline_ancestor_closer_timeline_wins>
   <style>
-    #timeline1 {
-      height: 0px;
-      view-timeline: t1;
-    }
-    #timeline2 {
-      height: 0px;
-      view-timeline: t2;
+    #scroller {
+      view-timeline: t1 defer;
     }
-    #target {
-      animation: anim 1s linear;
-      animation-timeline: t1;
-    }
-  </style>
-  <div id=scroller class=scroller>
-    <div></div>
-    <div id=timeline1></div>
-    <div></div>
-    <div id=timeline2></div>
-    <div>
-      <div>
-        <div id=target></div>
-      </div>
-    </div>
-    <div></div>
-    <div></div>
-  </div>
-</template>
-<script>
-  promise_test(async (t) => {
-    inflate(t, timeline_ancestor_sibling_skips_nonmatching);
-    await waitForNextFrame();
-    assert_equals(getComputedStyle(target).zIndex, '75');
-  }, 'view-timeline on ancestor sibling, skips nonmatching names');
-</script>
-
-<template id=timeline_ancestor_closer_scroll_timeline_wins>
-  <style>
     #timeline {
       height: 0px;
-      view-timeline: t1;
+      view-timeline: t1 ancestor;
     }
-    #scroll {
-      overflow: auto;
-      scroll-timeline: t1;
-    }
-    #scroll > div {
-      height: 50px;
+    #parent {
+      scroll-timeline: t1 defer;
     }
     #target {
       animation: anim 1s linear;
@@ -240,32 +211,31 @@
     <div></div>
     <div id=timeline></div>
     <div></div>
-    <div id=scroll>
-      <div></div>
-    </div>
-    <div>
-      <div>
-        <div id=target></div>
-      </div>
+    <div id=parent>
+      <div id=target></div>
     </div>
     <div></div>
     <div></div>
   </div>
 </template>
 <script>
   promise_test(async (t) => {
-    inflate(t, timeline_ancestor_closer_scroll_timeline_wins);
+    inflate(t, timeline_ancestor_closer_timeline_wins);
     await waitForNextFrame();
-    assert_equals(getComputedStyle(target).zIndex, '0');
-  }, 'view-timeline on ancestor sibling, closer scroll-timeline wins');
+    assert_equals(getComputedStyle(target).zIndex, 'auto');
+  }, 'view-timeline on ancestor sibling, closer timeline wins');
 </script>
 
 <template id=timeline_ancestor_scroll_timeline_wins_on_same_element>
   <style>
+    #scroller {
+      view-timeline: t1 defer;
+      scroll-timeline: t1 defer;
+    }
     #timelines {
       height: 0px;
-      view-timeline: t1;
-      scroll-timeline: t1;
+      view-timeline: t1 ancestor;
+      scroll-timeline: t1 ancestor;
       overflow: auto;
     }
     #timelines > div {