Modified: trunk/LayoutTests/ChangeLog (260779 => 260780)
--- trunk/LayoutTests/ChangeLog 2020-04-27 20:54:53 UTC (rev 260779)
+++ trunk/LayoutTests/ChangeLog 2020-04-27 20:56:01 UTC (rev 260780)
@@ -1,3 +1,18 @@
+2020-04-27 Antoine Quint <[email protected]>
+
+ [ iOS ] REGRESSION: animations/change-keyframes-name.html is a flaky failure
+ https://bugs.webkit.org/show_bug.cgi?id=211079
+ <rdar://problem/61486093>
+
+ Reviewed by Simon Fraser.
+
+ Rewrite this test to use the new AnimationTest helper that will non-flakily check animated values while an animation is running.
+
+ * animations/change-keyframes-name-expected.txt:
+ * animations/change-keyframes-name.html:
+ * animations/resources/animation-test.js:
+ (AnimationTest.prototype.async recordValueAfterRunningFor):
+
2020-04-27 Dean Jackson <[email protected]>
Temporarily skip GL_DEPTH_COMPONENT32_OES requirement for depth textures on iOS
Modified: trunk/LayoutTests/animations/change-keyframes-name-expected.txt (260779 => 260780)
--- trunk/LayoutTests/animations/change-keyframes-name-expected.txt 2020-04-27 20:54:53 UTC (rev 260779)
+++ trunk/LayoutTests/animations/change-keyframes-name-expected.txt 2020-04-27 20:56:01 UTC (rev 260780)
@@ -1,4 +1,3 @@
-This test starts by making sure the animation is not running, because the animation-name and the name of they @keyframes rule do not match. Then it changes the name of the @keyframes rule so they match and makes sure the animation is now running.
-PASS: animation is not running
-PASS - "left" property for "box" element at 0.25s saw something close to: 200
+PASS Test that dynamically changing the name of a @keyframes rule starts animations using that name.
+
Modified: trunk/LayoutTests/animations/change-keyframes-name.html (260779 => 260780)
--- trunk/LayoutTests/animations/change-keyframes-name.html 2020-04-27 20:54:53 UTC (rev 260779)
+++ trunk/LayoutTests/animations/change-keyframes-name.html 2020-04-27 20:56:01 UTC (rev 260780)
@@ -1,5 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
<html lang="en">
<head>
@@ -13,9 +12,10 @@
height: 100px;
width: 100px;
background-color: blue;
- -webkit-animation-duration: 0.5s;
- -webkit-animation-timing-function: linear;
- -webkit-animation-name: "bar";
+ animation-duration: 0.5s;
+ animation-timing-function: linear;
+ animation-repeat-count: infinite;
+ animation-name: "bar";
}
@-webkit-keyframes "foo" {
from { left: 100px; }
@@ -24,13 +24,13 @@
to { left: 300px; }
}
</style>
- <script src="" type="text/_javascript_" charset="utf-8"></script>
+ <script src=""
+ <script src=""
+ <script src=""
+</head>
+<body>
+<div id="box"></div>
<script type="text/_javascript_" charset="utf-8">
-
- const expectedValues = [
- // [animation-name, time, element-id, property, expected-value, tolerance]
- [null, 0.25, "box", "left", 200, 20],
- ];
function findKeyframesRule(rule)
{
@@ -41,45 +41,43 @@
return ss[i].cssRules[j];
}
}
-
+
return null;
}
-
- function change()
- {
- // change keyframes name
- var keyframes = findKeyframesRule("foo");
- keyframes.name = "anim";
- document.getElementById('box').style.webkitAnimationName = "anim";
- runAnimationTest(expectedValues);
- }
+ async_test(async t => {
+ const delay = 100;
+ const box = document.getElementById("box");
+ const previousAnimationName = "foo";
+ const newAnimationName = "anim";
+
+ const test = new AnimationTest({
+ target: box,
+ styleExtractor: style => parseFloat(style.left)
+ });
+
+ // First, ensure that there is no animation running.
+ assert_true(!test.animation, "There is no animation initially.");
+
+ // Now, rename "@keyframes foo" to allow an animation to start.
+ findKeyframesRule(previousAnimationName).name = newAnimationName;
+ box.style.animationName = newAnimationName;
+
+ // There should be a running animation now.
+ assert_true(test.animation instanceof CSSAnimation, "There is an animation after changing the @keyframes rule.");
+
+ // Record two computed values after the specified delay each and ensure they're not the same,
+ // showing animated values are applied.
+ const initialValue = await test.recordValueAfterRunningFor(delay);
+ const currentValue = await test.recordValueAfterRunningFor(delay);
+ assert_not_equals(initialValue, currentValue, "Values recorded while running aren't the same.");
+
+ // Now, check the recorded values were correct.
+ test.checkRecordedValues();
+
+ t.done();
+ }, `Test that dynamically changing the name of a @keyframes rule starts animations using that name.`);
- function setup()
- {
- if (window.testRunner) {
- testRunner.dumpAsText();
- var box = document.getElementById('box');
- if (internals.pauseAnimationAtTimeOnElement("bar", 0.5, box))
- document.getElementById("pre-result").innerHTML = "FAIL: animation is running";
- else
- document.getElementById("pre-result").innerHTML = "PASS: animation is not running";
- }
-
- setTimeout(change, 200);
- }
-
</script>
-</head>
-<body _onload_="setup()">
-This test starts by making sure the animation is not running, because the animation-name and the
-name of they @keyframes rule do not match. Then it changes the name of the @keyframes rule so they
-match and makes sure the animation is now running.
-<div id="box">
-</div>
-<div id="pre-result">
-</div>
-<div id="result">
-</div>
</body>
</html>
Modified: trunk/LayoutTests/animations/resources/animation-test.js (260779 => 260780)
--- trunk/LayoutTests/animations/resources/animation-test.js 2020-04-27 20:54:53 UTC (rev 260779)
+++ trunk/LayoutTests/animations/resources/animation-test.js 2020-04-27 20:56:01 UTC (rev 260780)
@@ -72,10 +72,13 @@
const targetTime = animation.currentTime + delay;
await this._tickUntil(elapsedTime => animation.currentTime >= targetTime);
+ const value = this.value;
this._records.push({
currentTime: animation.currentTime,
- value: this.value
+ value: value
});
+
+ return value;
}
// Check that all requested values recorded using recordValueAfterRunningFor() match the same values
