forked from mirrors/gecko-dev
dc7fcb3291
Automatic update from web-platform-tests
Try to deflake css/css-animations/nested-scale-animations.html
- Reduce the size and the scale to avoid maximum scale clamping (which
is the mainn reason of the test failing under virtual/threaded on
Chrome).
- Use 'forwards' instead of 'infinite' for the animation, so that in
case of capture happening after the end of the animation, the test
will still pass.
- Wait for start of the animation, to avoid the test ending before the
animation starts.
- Increase the delay of capturing to be near the end of the animation,
to avoid the capture happening during animation from scale 1 to 10.
Bug: 1169154
Change-Id: I28e4dd6300377cf5524681f85ac099611ea617e4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2798031
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/master@{#868601}
--
wpt-commits: 9a53c9052657ebdbe88ad3389faec678aa7d2302
wpt-pr: 28342
42 lines
1.4 KiB
HTML
42 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<title>Nested scale animations</title>
|
|
<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
|
|
<link rel="help" href="https://crbug.com/1165408">
|
|
<link rel="match" href="nested-scale-animations-ref.html">
|
|
<meta name="assert" content="Contents under nested scale animations should not be too blurry">
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<style>
|
|
@keyframes scale {
|
|
0% {transform: scale(1);}
|
|
1% {transform: scale(10);}
|
|
100% {transform: scale(10);}
|
|
}
|
|
.animate {
|
|
animation: scale 1s forwards;
|
|
position: relative;
|
|
top: 40%;
|
|
left: 40%;
|
|
width: 20%;
|
|
height: 20%;
|
|
}
|
|
</style>
|
|
<div style="width: 100px; height: 100px; overflow: hidden; position: relative">
|
|
<div class="animate" onanimationstart="animationStarted()">
|
|
<div class="animate" onanimationstart="animationStarted()">
|
|
<div style="width: 4px; height: 2px; background: blue"></div>
|
|
<div style="width: 4px; height: 2px; background: green"></div>
|
|
</div>
|
|
</div>
|
|
<!-- To mask off the pixels that may be blurry/antialiased while the rendering
|
|
quality is acceptable. -->
|
|
<div style="position: absolute; top: 45px; left: 0; width: 100px; height: 10px; background: white"></div>
|
|
</div>
|
|
<script>
|
|
var startedCount = 0;
|
|
function animationStarted() {
|
|
startedCount++;
|
|
if (startedCount == 2)
|
|
takeScreenshotDelayed(900);
|
|
}
|
|
</script>
|