WebKit export of https://bugs.webkit.org/show_bug.cgi?id=287704 (#50718)

web-platform-tests · Feb 14, 2025 · 00a8598 · 00a8598
1 parent 3b1af6f
commit 00a8598
Showing 1 changed file with 24 additions and 20 deletions.
diff --git a/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html b/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html
@@ -30,6 +30,10 @@
 
 setup(assert_implements_animation_timeline);
 
+const assert_translate_equals = (target, expected, description) => {
+    assert_approx_equals(parseFloat(getComputedStyle(target).translate), parseFloat(expected), 0.0001, description);
+};
+
 const createTargetAndScroller = function(t) {
   let container = document.createElement('div');
   container.id = 'container';
@@ -77,7 +81,7 @@
   });
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '25px');
+  assert_translate_equals(target, '25px');
 }, 'animation-duration');
 
 promise_test(async t => {
@@ -86,7 +90,7 @@
   target.style.animationTimeline = 'scroll(nearest)';
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '100px');
+  assert_translate_equals(target, '100px');
 }, 'animation-duration: 0s');
 
 
@@ -102,17 +106,17 @@
   });
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '25px');
+  assert_translate_equals(target, '25px');
 
   // Let animation become 50% in the 1st iteration.
   target.style.animationIterationCount = '2';
   await waitForCSSScrollTimelineStyle();
-  assert_equals(getComputedStyle(target).translate, '50px');
+  assert_translate_equals(target, '50px');
 
   // Let animation become 0% in the 2nd iteration.
   target.style.animationIterationCount = '4';
   await waitForCSSScrollTimelineStyle();
-  assert_equals(getComputedStyle(target).translate, '0px');
+  assert_translate_equals(target, '0px');
 }, 'animation-iteration-count');
 
 promise_test(async t => {
@@ -124,7 +128,7 @@
   });
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '0px');
+  assert_translate_equals(target, '0px');
 }, 'animation-iteration-count: 0');
 
 promise_test(async t => {
@@ -136,7 +140,7 @@
   });
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '100px');
+  assert_translate_equals(target, '100px');
 }, 'animation-iteration-count: infinite');
 
 
@@ -152,7 +156,7 @@
   });
 
   await scrollTop(scroller, 25) // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '25px');
+  assert_translate_equals(target, '25px');
 }, 'animation-direction: normal');
 
 promise_test(async t => {
@@ -164,7 +168,7 @@
   });
 
   await scrollTop(scroller, 25); // 25% in the reversing direction.
-  assert_equals(getComputedStyle(target).translate, '75px');
+  assert_translate_equals(target, '75px');
 }, 'animation-direction: reverse');
 
 promise_test(async t => {
@@ -177,10 +181,10 @@
   });
 
   await scrollTop(scroller, 10); // 20% in the 1st iteration.
-  assert_equals(getComputedStyle(target).translate, '20px');
+  assert_translate_equals(target, '20px');
 
   await scrollTop(scroller, 60); // 20% in the 2nd iteration (reversing direction).
-  assert_equals(getComputedStyle(target).translate, '80px');
+  assert_translate_equals(target, '80px');
 }, 'animation-direction: alternate');
 
 promise_test(async t => {
@@ -193,10 +197,10 @@
   });
 
   await scrollTop(scroller, 10); // 20% in the 1st iteration (reversing direction).
-  assert_equals(getComputedStyle(target).translate, '80px');
+  assert_translate_equals(target, '80px');
 
   await scrollTop(scroller, 60); // 20% in the 2nd iteration.
-  assert_equals(getComputedStyle(target).translate, '20px');
+  assert_translate_equals(target, '20px');
 }, 'animation-direction: alternate-reverse');
 
 
@@ -212,7 +216,7 @@
   });
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '25px');
+  assert_translate_equals(target, '25px');
 
   //    (start delay: 10s)    (duration: 10s)
   //         before              active
@@ -223,13 +227,13 @@
   // Let animation be in before phase.
   target.style.animationDelay = '10s';
   target.style.animationDelayStart = '10s'; // crbug.com/1375994
-  assert_equals(getComputedStyle(target).translate, 'none');
+  assert_translate_equals(target, 'none');
 
   await scrollTop(scroller, 50); // The animation enters active phase.
-  assert_equals(getComputedStyle(target).translate, '0px');
+  assert_translate_equals(target, '0px');
 
   await scrollTop(scroller, 75); // The ieration progress is 50%.
-  assert_equals(getComputedStyle(target).translate, '50px');
+  assert_translate_equals(target, '50px');
 }, 'animation-delay with a positive value');
 
 promise_test(async t => {
@@ -248,7 +252,7 @@
   target.style.animationDelay = '-5s';
   target.style.animationDelayStart = '-5s'; // crbug.com/1375994
   await waitForCSSScrollTimelineStyle();
-  assert_equals(getComputedStyle(target).translate, '60px');
+  assert_translate_equals(target, '60px');
 }, 'animation-delay with a negative value');
 
 
@@ -266,11 +270,11 @@
   });
 
   await scrollTop(scroller, 25);
-  assert_equals(getComputedStyle(target).translate, 'none');
+  assert_translate_equals(target, 'none');
 
   target.style.animationFillMode = 'backwards';
   await waitForCSSScrollTimelineStyle();
-  assert_equals(getComputedStyle(target).translate, '0px');
+  assert_translate_equals(target, '0px');
 }, 'animation-fill-mode');
 
 </script>