forked from mirrors/gecko-dev
6914f6479f
Automatic update from web-platform-tests 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} -- wpt-commits: 130f163afe563f8d858e960570bfdd9dc02cdbae wpt-pr: 26661
68 lines
2 KiB
HTML
68 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
|
|
<link rel="match" href="one-custom-property-animation-ref.html">
|
|
<style>
|
|
.container {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
@keyframes expand {
|
|
0% { --foo: 0; }
|
|
100% { --foo: 100; }
|
|
}
|
|
.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;
|
|
}
|
|
|
|
#canvas-geometry {
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<script src="/common/worklet-reftest.js"></script>
|
|
<body>
|
|
<div id="canvas-geometry" class="container"></div>
|
|
|
|
<script id="code" type="text/worklet">
|
|
registerPaint('geometry', class {
|
|
static get inputProperties() { return ['--foo']; }
|
|
paint(ctx, geom, properties) {
|
|
let fooValue = parseFloat(properties.get('--foo').toString());
|
|
ctx.fillStyle = 'green';
|
|
ctx.fillRect(0, 0, fooValue, fooValue);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
CSS.registerProperty({
|
|
name: '--foo',
|
|
syntax: '<number>',
|
|
initialValue: '0',
|
|
inherits: false
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
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');
|
|
const animations = document.getAnimations();
|
|
// Wait for the animation to start before completing the test.
|
|
document.getAnimations()[0].ready.then(() => {
|
|
takeScreenshot();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|