Update web-platform-tests to revision b'797e75946c24d0625f04247b16d33c26d4ada273'

tests/wpt/web-platform-tests/scroll-animations/css/animation-timeline-ignored.tentative.html

@@ -7,13 +7,16 @@
   main {
     overflow: hidden;
     height: 0px;
+    scroll-timeline-attachment: defer;
+    scroll-timeline-name: timeline1, timeline2, timeline3;
   }
-  main > div {
+  .scroller {
     overflow: hidden;
     width: 100px;
     height: 100px;
+    scroll-timeline-attachment: ancestor;
   }
-  main > div > div {
+  .scroller > div {
     height: 200px;
   }
   @keyframes expand {
@@ -21,13 +24,13 @@
     to { width: 200px; }
   }
   #scroller1 {
-    scroll-timeline: timeline1;
+    scroll-timeline-name: timeline1;
   }
   #scroller2 {
-    scroll-timeline: timeline2;
+    scroll-timeline-name: timeline2;
   }
   #scroller3 {
-    scroll-timeline: timeline3;
+    scroll-timeline-name: timeline3;
   }
   #element {
     width: 0px;
@@ -43,10 +46,10 @@
   }
 </style>
 <main>
-  <div id=scroller1><div></div></div>
-  <div id=scroller2><div></div></div>
-  <div id=scroller3><div></div></div>
-  <div id=scroller4><div></div></div>
+  <div class=scroller id=scroller1><div></div></div>
+  <div class=scroller id=scroller2><div></div></div>
+  <div class=scroller id=scroller3><div></div></div>
+  <div class=scroller id=scroller4><div></div></div>
   <div id=container></div>
 </main>
 <script>
@@ -141,5 +144,4 @@
     element.style = 'animation-timeline:timeline2';
     assert_equals(getComputedStyle(element).width, '120px');
   }, 'animation-timeline ignored after setting timeline with JS (null)');
-
 </script>

tests/wpt/web-platform-tests/scroll-animations/css/animation-timeline-multiple.html

@@ -5,12 +5,18 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="/web-animations/testcommon.js"></script>
 <style>
-  main > div {
+  main {
+    scroll-timeline-attachment: defer;
+    scroll-timeline-name: top_timeline, bottom_timeline, left_timeline, right_timeline;
+  }
+
+  .scroller {
     overflow: hidden;
     width: 100px;
     height: 100px;
+    scroll-timeline-attachment: ancestor;
   }
-  main > div > div {
+  .scroller > div {
     height: 200px;
     width:  200px;
   }
@@ -33,16 +39,20 @@
   }
 
   #top_scroller {
-    scroll-timeline: top_timeline block;
+    scroll-timeline-name: top_timeline;
+    scroll-timeline-axis: block;
   }
   #bottom_scroller {
-    scroll-timeline: bottom_timeline inline;
+    scroll-timeline-name: bottom_timeline;
+    scroll-timeline-axis: inline;
   }
   #left_scroller {
-    scroll-timeline: left_timeline block;
+    scroll-timeline-name: left_timeline;
+    scroll-timeline-axis: block;
   }
   #right_scroller {
-    scroll-timeline: right_timeline inline;
+    scroll-timeline-name: right_timeline;
+    scroll-timeline-axis: inline;
   }
 
   #element {
@@ -57,10 +67,10 @@
   }
 </style>
 <main>
-  <div id=top_scroller><div></div></div>
-  <div id=bottom_scroller><div></div></div>
-  <div id=left_scroller><div></div></div>
-  <div id=right_scroller><div></div></div>
+  <div class=scroller id=top_scroller><div></div></div>
+  <div class=scroller id=bottom_scroller><div></div></div>
+  <div class=scroller id=left_scroller><div></div></div>
+  <div class=scroller id=right_scroller><div></div></div>
   <div id=element></div>
 </main>
 <script>
@@ -86,5 +96,4 @@
     assert_equals(getComputedStyle(element).left, '160px');
     assert_equals(getComputedStyle(element).right, '180px');
   }, 'animation-timeline works with multiple timelines');
-
 </script>

tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-in-container-query.html

@@ -21,6 +21,7 @@
     width: auto;
     height: 100px;
   }
+
   #scroller > div {
     height: 200px;
   }
@@ -32,14 +33,15 @@
     }
   }
 
-  @keyframes expand {
+  @keyframes recolor {
     from { background-color: rgb(100, 100, 100); }
     to { background-color: rgb(200, 200, 200); }
   }
+
   #element {
     height: 10px;
     width: 10px;
-    animation: expand 10s linear;
+    animation: recolor 10s linear;
     animation-timeline: timeline;
     background-color: rgb(0, 0, 0);
   }
@@ -48,8 +50,7 @@
   <div id=container>
     <div id=scroller>
       <div></div>
-    </div>
-    <div id=element>
+      <div id=element></div>
     </div>
   </div>
 </div>
@@ -58,7 +59,7 @@
 
   promise_test(async (t) => {
     element.offsetTop;
-    scroller.scrollTop = 50;
+    scroller.scrollTop = (scroller.scrollHeight - scroller.clientHeight) / 2;
     await waitForNextFrame();
     // Unknown timeline, time held at zero.
     assert_equals(getComputedStyle(element).backgroundColor, 'rgb(100, 100, 100)');

tests/wpt/web-platform-tests/scroll-animations/css/scroll-timeline-sampling.html

@@ -29,8 +29,8 @@
 </style>
 <div id=scroller>
   <div id=contents></div>
+  <div id=element></div>
 </div>
-<div id=element></div>
 <script>
   promise_test(async (t) => {
     // The scroll timeline is initially inactive until the first frame.

tests/wpt/web-platform-tests/scroll-animations/css/timeline-offset-in-keyframe-change-timeline.tentative.html

@@ -27,15 +27,16 @@
     overflow-x: hidden;
     width: 300px;
     height: 200px;
+    view-timeline: sibling defer;
   }
-  #block {
+  #sibling {
     margin-top: 800px;
     margin-left:  10px;
     margin-right:  10px;
     width:  100px;
     height:  50px;
     background-color:  blue;
-    view-timeline:  block block;
+    view-timeline: sibling block ancestor;
   }
   #target {
     margin-bottom: 800px;
@@ -56,12 +57,12 @@
     animation-timeline: target;
   }
   #target.with-view-timeline.retarget {
-    animation-timeline: block;
+    animation-timeline: sibling;
   }
 </style>
 <body>
   <div id="scroller">
-    <div id="block"></div>
+    <div id="sibling"></div>
     <div id="target"></div>
   </div>
 </body>
@@ -109,7 +110,7 @@
       assert_frame_lists_equal(frames, expected);
 
       target.classList.add('retarget');
-      assert_equals(getComputedStyle(target).animationTimeline, 'block',
+      assert_equals(getComputedStyle(target).animationTimeline, 'sibling',
                     'Switch to another view timeline');
       await waitForNextFrame();
       frames = anim.effect.getKeyframes();