Fix a few flaky test in css-paint-api/
The problem of these tests is that we do a takeScreenShot in the
rAF, and a rAF doesn't guarantee that the animation is ready, so
it can be easily flaky given that the animations are running on
the compositor thread.
This CL fixes it so that it calls takeScreenShot when the animation
ready promise is resolved, and the makes sure that the animation
already begun.
Bug: 1133821
Change-Id: I4fae6ccb9fe992316831d4d2013e1aa32eb52c82
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2562728
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: Xida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#831650}
diff --git a/css/css-paint-api/color-custom-property-animation-ref.html b/css/css-paint-api/color-custom-property-animation-ref.html
index 3439cd9..d665364 100644
--- a/css/css-paint-api/color-custom-property-animation-ref.html
+++ b/css/css-paint-api/color-custom-property-animation-ref.html
@@ -5,7 +5,7 @@
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
-context.fillStyle = 'rgb(127, 127, 0)';
+context.fillStyle = 'rgb(100, 100, 0)';
context.fillRect(0, 0, 100, 100);
</script>
</body>
diff --git a/css/css-paint-api/color-custom-property-animation.https.html b/css/css-paint-api/color-custom-property-animation.https.html
index 5cbfee8..729af95 100644
--- a/css/css-paint-api/color-custom-property-animation.https.html
+++ b/css/css-paint-api/color-custom-property-animation.https.html
@@ -6,19 +6,24 @@
.container {
width: 100px;
height: 100px;
- animation: expand 5s;
+}
+.animate {
+ background-image: paint(geometry);
+ /* Use a long animation that start at 50% progress where the slope of the
+ selected timing function is zero. By setting up the animation in this way,
+ we accommodate lengthy delays in running the test without a potential drift
+ in the animated property value. This is important for avoiding flakes,
+ especially on debug builds. The screenshots are taken as soon as the
+ animation is ready, thus the long animation duration has no bearing on
+ the actual duration of the test. */
+ animation: expand 1000000s cubic-bezier(0,1,1,0) -500000s;
will-change: transform;
}
@keyframes expand {
- 0% { --foo: rgb(255, 0, 0); }
- 0.01% { --foo: rgb(127, 127, 0); }
- 99% { --foo: rgb(127, 127, 0); }
- 100% { --foo: rgb(0, 255, 0); }
+ 0% { --foo: rgb(200, 0, 0); }
+ 100% { --foo: rgb(0, 200, 0); }
}
-#canvas-geometry {
- background-image: paint(geometry);
-}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
@@ -45,13 +50,15 @@
</script>
<script>
-// The test is designed to make sure that when the custom property animation is
-// running on the compositor thread, we are getting the right value.
-// The "importWorkletAndTerminateTestAfterAsyncPaint" has the logic to rAF
-// two frames before taking a screenshot. So the animation is designed to
-// be stable after two frames. That is, the 0.01% of 5s is much less than
-// two frames, and thus after two frames, the value of --foo should be stable.
-importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
+var blob = new Blob([document.getElementById('code').textContent],
+ {type: 'text/javascript'});
+CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
+ document.getElementById('canvas-geometry').classList.add('animate');
+ // Wait for the animation to start before completing the test.
+ document.getAnimations()[0].ready.then(() => {
+ takeScreenshot();
+ });
+});
</script>
</body>
</html>
diff --git a/css/css-paint-api/one-custom-property-animation.https.html b/css/css-paint-api/one-custom-property-animation.https.html
index ca746f5..25b1cef 100644
--- a/css/css-paint-api/one-custom-property-animation.https.html
+++ b/css/css-paint-api/one-custom-property-animation.https.html
@@ -9,13 +9,18 @@
}
@keyframes expand {
0% { --foo: 0; }
- 0.01% { --foo: 50; }
- 99% { --foo: 50; }
100% { --foo: 100; }
}
.animate {
background-image: paint(geometry);
- animation: expand 5s;
+ /* Use a long animation that start at 50% progress where the slope of the
+ selected timing function is zero. By setting up the animation in this way,
+ we accommodate lengthy delays in running the test without a potential drift
+ in the animated property value. This is important for avoiding flakes,
+ especially on debug builds. The screenshots are taken as soon as the
+ animation is ready, thus the long animation duration has no bearing on
+ the actual duration of the test. */
+ animation: expand 1000000s cubic-bezier(0,1,1,0) -500000s;
}
#canvas-geometry {
@@ -52,7 +57,9 @@
{type: 'text/javascript'});
CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
document.getElementById('canvas-geometry').classList.add('animate');
- requestAnimationFrame(function() {
+ const animations = document.getAnimations();
+ // Wait for the animation to start before completing the test.
+ document.getAnimations()[0].ready.then(() => {
takeScreenshot();
});
});
diff --git a/css/css-paint-api/two-custom-property-animation-ref.html b/css/css-paint-api/two-custom-property-animation-ref.html
index 1acef69..fa364bd 100644
--- a/css/css-paint-api/two-custom-property-animation-ref.html
+++ b/css/css-paint-api/two-custom-property-animation-ref.html
@@ -7,7 +7,7 @@
var context = canvas.getContext("2d");
context.fillStyle = 'blue';
context.fillRect(0, 0, 100, 100);
-context.fillStyle = '#9876c8';
+context.fillStyle = '#987664';
context.fillRect(0, 0, 50, 50);
</script>
</body>
diff --git a/css/css-paint-api/two-custom-property-animation.https.html b/css/css-paint-api/two-custom-property-animation.https.html
index 9cd2027..6669076 100644
--- a/css/css-paint-api/two-custom-property-animation.https.html
+++ b/css/css-paint-api/two-custom-property-animation.https.html
@@ -9,19 +9,22 @@
}
@keyframes expand {
0% { --foo: 0; }
- 0.01% { --foo: 50; }
- 99% { --foo: 50; }
100% { --foo: 100; }
}
@keyframes clr {
0% { --bar: 0; }
- 0.01% { --bar: 200; }
- 99% { --bar: 200; }
- 100% { --bar: 255; }
+ 100% { --bar: 200; }
}
.animate {
background-image: paint(geometry);
- animation: expand 5s, clr 5s;
+ /* Use a long animation that start at 50% progress where the slope of the
+ selected timing function is zero. By setting up the animation in this way,
+ we accommodate lengthy delays in running the test without a potential drift
+ in the animated property value. This is important for avoiding flakes,
+ especially on debug builds. The screenshots are taken as soon as the
+ animation is ready, thus the long animation duration has no bearing on
+ the actual duration of the test. */
+ animation: expand 1000000s cubic-bezier(0,1,1,0) -500000s, clr 1000000s cubic-bezier(0,1,1,0) -500000s;
}
#canvas-geometry {
@@ -68,7 +71,9 @@
{type: 'text/javascript'});
CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
document.getElementById('canvas-geometry').classList.add('animate');
- requestAnimationFrame(function() {
+ const animations = document.getAnimations();
+ // Wait for the animation to start before completing the test.
+ document.getAnimations()[0].ready.then(() => {
takeScreenshot();
});
});
diff --git a/css/css-paint-api/two-element-custom-property-animation-ref.html b/css/css-paint-api/two-element-custom-property-animation-ref.html
index 6c6d945..37774e0 100644
--- a/css/css-paint-api/two-element-custom-property-animation-ref.html
+++ b/css/css-paint-api/two-element-custom-property-animation-ref.html
@@ -7,7 +7,7 @@
var context = canvas.getContext("2d");
context.fillStyle = 'green';
context.fillRect(0, 0, 100, 100);
-context.fillStyle = 'rgb(128, 128, 0)';
+context.fillStyle = 'rgb(100, 100, 0)';
context.fillRect(0, 200, 200, 200);
</script>
</body>
diff --git a/css/css-paint-api/two-element-custom-property-animation.https.html b/css/css-paint-api/two-element-custom-property-animation.https.html
index 044650d..48b0f20 100644
--- a/css/css-paint-api/two-element-custom-property-animation.https.html
+++ b/css/css-paint-api/two-element-custom-property-animation.https.html
@@ -9,7 +9,14 @@
}
.fooanimate {
background-image: paint(foo);
- animation: expand 5s;
+ /* Use long animations that start at 50% progress where the slope of the
+ selected timing function is zero. By setting up the animations in this way,
+ we accommodate lengthy delays in running the test without a potential drift
+ in the animated properties values. This is important for avoiding flakes,
+ especially on debug builds. The screenshots are taken as soon as the
+ animations are ready, thus the long animation duration has no bearing on
+ the actual duration of the test. */
+ animation: expand 1000000s cubic-bezier(0,1,1,0) -500000s;
}
#bartainer {
width: 200px;
@@ -17,19 +24,15 @@
}
.baranimate {
background-image: paint(bar);
- animation: colorChange 5s;
+ animation: colorChange 1000000s cubic-bezier(0,1,1,0) -500000s;
}
@keyframes expand {
0% { --foo: 0; }
- 0.01% { --foo: 100; }
- 99% { --foo: 100; }
100% { --foo: 200; }
}
@keyframes colorChange {
- 0% { --bar: rgb(255, 0, 0); }
- 0.01% { --bar: rgb(128, 128, 0); }
- 99% { --bar: rgb(128, 128, 0); }
- 100% { --bar: rgb(0, 255, 0); }
+ 0% { --bar: rgb(200, 0, 0); }
+ 100% { --bar: rgb(0, 200, 0); }
}
</style>
<script src="/common/reftest-wait.js"></script>
@@ -78,8 +81,10 @@
CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
document.getElementById('footainer').classList.add('fooanimate');
document.getElementById('bartainer').classList.add('baranimate');
- requestAnimationFrame(function() {
- takeScreenshot();
+ const animations = document.getAnimations();
+ // Wait for all animations to start before completing the test.
+ Promise.all([animations[0].ready, animations[1].ready]).then(() => {
+ takeScreenshot();
});
});
</script>
