[Web Animations] Positive delays of accelerated animations are not respected
authorgraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 17 Sep 2018 17:37:48 +0000 (17:37 +0000)
committergraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 17 Sep 2018 17:37:48 +0000 (17:37 +0000)
https://bugs.webkit.org/show_bug.cgi?id=189411
<rdar://problem/44151416>

Reviewed by Dean Jackson.

Use a mask over the animated rectangle to allow for a 1px rounding error when seeking to fix flakiness.

* webanimations/accelerated-animation-with-delay-and-seek-expected.html:
* webanimations/accelerated-animation-with-delay-and-seek.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236072 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/webanimations/accelerated-animation-with-delay-and-seek-expected.html
LayoutTests/webanimations/accelerated-animation-with-delay-and-seek.html

index d6215dd..78f3d90 100644 (file)
@@ -1,3 +1,16 @@
+2018-09-17  Antoine Quint  <graouts@apple.com>
+
+        [Web Animations] Positive delays of accelerated animations are not respected
+        https://bugs.webkit.org/show_bug.cgi?id=189411
+        <rdar://problem/44151416>
+
+        Reviewed by Dean Jackson.
+
+        Use a mask over the animated rectangle to allow for a 1px rounding error when seeking to fix flakiness.
+
+        * webanimations/accelerated-animation-with-delay-and-seek-expected.html:
+        * webanimations/accelerated-animation-with-delay-and-seek.html:
+
 2018-09-17  Youenn Fablet  <youenn@apple.com>
 
         Enable VCP for iOS and reenable it for MacOS
index cf518fe..61dce5d 100644 (file)
@@ -3,15 +3,32 @@
 <head>
 <style>
 div {
+    left: 0;
+    top: 0;
     position: absolute;
-    width: 100px;
     height: 100px;
-    transform: translateX(50px);
+}
+
+.mask {
+    /* We add an extra pixel to account for rounding errors */
+    width: 51px;
+    background-color: red;
+}
+
+#target {
+    width: 100px;
     background-color: black;
+    transform: translateX(50px);
+}
+
+#right {
+    left: 149px;
 }
 </style>
 </head>
 <body>
-<div></div>
+<div id="target"></div>
+<div id="left" class="mask"></div>
+<div id="right" class="mask"></div>
 </body>
 </html>
index b5fd87a..c314bfe 100644 (file)
@@ -4,29 +4,52 @@
 <style>
 
 div {
+    left: 0;
+    top: 0;
     position: absolute;
-    width: 100px;
     height: 100px;
+}
+
+.mask {
+    /* We add an extra pixel to account for rounding errors */
+    width: 51px;
+    background-color: red;
+}
+
+#target {
+    width: 100px;
     background-color: black;
 }
 
+#right {
+    left: 149px;
+}
+
 </style>
 </head>
 <body>
+
+<div id="target"></div>
+<div id="left" class="mask"></div>
+<div id="right" class="mask"></div>
+
 <script>
 
 if (window.testRunner)
     testRunner.waitUntilDone();
 
-const animation = document.body.appendChild(document.createElement("div")).animate({
+const animation = document.getElementById("target").animate({
     transform: ["translateX(100px)", "none"]
 }, { duration: 10000, delay: 1000 });
 
 requestAnimationFrame(() => {
     animation.pause();
     animation.currentTime = 6000;
-    if (window.testRunner)
-        requestAnimationFrame(() => testRunner.notifyDone());
+    if (window.testRunner) {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => testRunner.notifyDone())
+        });
+    }
 });
 
 </script>