Bug 1740356 [wpt PR 31565] - Move transition-timing-function.html to WPT and deflake, a=testonly

Automatic update from web-platform-tests Move transition-timing-function.html to WPT and deflake The original test did not properly ensure that the style change would be picked up after rendering the page. Thus, we might not see transition animations. The test also relied on windows.internals, which does not provide cross-browser support. Moved the test to WPT and switched to using appropriate web-animation API calls. Dropped the webkit prefix from the test. Finally, updated the expected target values. Two of the values in the original test were off by 1, but matched the overly loose tolerance. The updated version computes the expected value of the cubic Bezier easing functions. Note, this is one of 6 flaky tests associated with the bug. Next step is to port the remaining tests unless WPT equivalents can be found. Bug: 1267553 Change-Id: If083981a705709d9d0f95b83429d986170dee3d2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3269980 Commit-Queue: Kevin Ellis <kevers@chromium.org> Reviewed-by: Steve Kobes <skobes@chromium.org> Cr-Commit-Position: refs/heads/main@{#940433} -- wpt-commits: 0aebe5d1145f727f5cfedb7f2aeb7c6f53274dd8 wpt-pr: 31565
2024-11-25 13:51:41 +00:00 · 2021-11-13 10:09:28 +00:00 · 2021-11-13 10:09:28 +00:00 · cd9fe82e60
commit cd9fe82e60
parent 62a059714c
1 changed files with 85 additions and 0 deletions
--- a/testing/web-platform/tests/css/css-transitions/animations/transition-timing-function.html
+++ b/testing/web-platform/tests/css/css-transitions/animations/transition-timing-function.html
@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>transition timing function</title>
+  <link rel="help" href="https://drafts.csswg.org/css-transitions-1/#transition-timing-function-property">
+  <style>
+    .box {
+      position: relative;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      background-color: blue;
+      transition: left 1s linear;
+    }
+    .animating > .box {
+      left: 400px;
+    }
+  </style>
+</head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/css-transitions/support/helper.js"></script>
+<script src="/css/css-easing/testcommon.js"></script>
+<script>
+  window.onload = () => {
+    function verifyPosition(element_id, expected) {
+      const element = document.getElementById(element_id);
+      const actual = Math.round(parseFloat(getComputedStyle(element).left));
+      assert_equals(actual, expected, `verify ${element_id} left`);
+    }
+
+    function easing(x1, y1, x2, y2) {
+      return Math.round(400 * cubicBezier(x1, y1, x2, y2)(0.5));
+    }
+
+    function ease() {
+      return easing(0.25, 0.1, 0.25, 1); // 321
+    }
+
+    function easeIn() {
+      return easing(0.42, 0, 1, 1); // 126
+    }
+
+    function easeOut() {
+      return easing(0.0, 0.0, 0.58, 1.0); // 274
+    }
+
+    function easeInOut() {
+      return easing(0.42, 0.0, 0.58, 1.0); // 200
+    }
+
+    promise_test(async t => {
+      // Make sure we have rendered the page before making the style change
+      // to ensure we get transitions.
+      await waitForAnimationFrames(2);
+      promises = [];
+      document.getElementById('container').className = 'animating';
+      document.getAnimations().forEach(anim => {
+        anim.pause();
+        anim.currentTime = 500;
+        promises.push(anim.ready);
+      });
+      Promise.all(promises).then(() => {
+        assert_equals(promises.length, 5, 'Unexpected animation count');
+        verifyPosition('box1', 200);  // linear easing
+        verifyPosition('box2', ease());
+        verifyPosition('box3', easeIn());
+        verifyPosition('box4', easeOut());
+        verifyPosition('box5', easeInOut());
+      });
+    }, 'Ensure that transition easing functions are properly applied.');
+  };
+</script>
+<body>
+<div id="container">
+  <div id="box1" class="box" style="transition-timing-function: linear;"></div>
+  <div id="box2" class="box" style="transition-timing-function: ease;"></div>
+  <div id="box3" class="box" style="transition-timing-function: ease-in;"></div>
+  <div id="box4" class="box" style="transition-timing-function: ease-out;"></div>
+  <div id="box5" class="box" style="transition-timing-function: ease-in-out;"></div>
+</div>
+</body>
+</html>