Skip to content

GitLab

T
tangled
Commit a93be69b authored by Kevin Ellis's avatar Kevin Ellis Committed by Commit Bot
Browse files
Options

Update reversing-an-animation test 

Double rAF start of the test to avoid starting the animation while too
busy to handle updates in a timely manner.

Bug: 1029541
Change-Id: I3e0e665f0b4b9dd6f6a87d84d207b0c18a1b51c2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1946668
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Reviewed-by: default avatarRobert Flack <flackr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#721486}
parent 0dcd705c
Hide whitespace changes
Inline Side-by-side
Showing with 57 additions and 29 deletions
third_party/blink/web_tests/TestExpectations
View file @ a93be69b
......@@ -6050,8 +6050,8 @@ crbug.com/993790 external/wpt/document-policy/required-policy/required-document-
crbug.com/1025667 http/tests/devtools/inspector-backend-commands.js [ Pass Failure ]
crbug.com/1029489 http/tests/devtools/elements/elements-linkify-attributes.js [ Pass Failure ]
crbug.com/1030258 http/tests/devtools/resource-har-conversion.js [ Pass Failure ]
crbug.com/1029521 virtual/threaded/external/wpt/web-animations/timing-model/animations/updating-the-finished-state.html [ Pass Failure Timeout ]
crbug.com/1029541 virtual/threaded/external/wpt/web-animations/timing-model/animations/reverse-running-animation.html [ Pass Failure ]
# Enable scroll-snap tests on impl thread
# These are currently failing on Mac which needs more investigation, snap-scrolls-visual-viewport seems flaky
......
third_party/blink/web_tests/external/wpt/web-animations/timing-model/animations/reverse-running-animation-ref.html
View file @ a93be69b
<!DOCTYPE html>
<title>Reference for reverse running animation</title>
<style>
#box {
background: blue;
height: 40px;
width: 40px;
transform: translateX(100px);
will-change: transform;
#notes {
position: absolute;
left: 0px;
top: 100px;
}
body {
backgrond: white;
}
</style>
<body>
<div id="box"></div>
<p>This test reverses the animation shortly after the box starts moving. If
the box doesn't move back to its original position, the test has failed.
<p id="notes">
This test reverses the animation shortly after the box starts moving. If
any blue pixels are visible the test has failed.
</p>
</body>
third_party/blink/web_tests/external/wpt/web-animations/timing-model/animations/reverse-running-animation.html
View file @ a93be69b
......@@ -6,36 +6,63 @@
<link rel="match" href="reverse-running-animation-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>
#box {
background: blue;
#box, #overlay {
/* Add a border to ensure that anti-aliasing does not leak blue pixels
outside of the element's bounds. */
border: 1px solid white;
height: 40px;
position: absolute;
top: 40px;
width: 40px;
}
#box {
background: blue;
left: 40px;
z-index: 1;
}
#overlay {
background: white;
left: 140px;
z-index: 2;
}
#notes {
position: absolute;
left: 0px;
top: 100px;
}
body {
backgrond: white;
}
</style>
<body>
<div id="box"></div>
<p>This test reverses the animation shortly after the box starts moving. If
the box doesn't move back to its original position, the test has failed.
</p>
<div id="overlay"></div>
<p id="notes">
This test reverses the animation shortly after the box starts moving. If
any blue pixels are visible the test has failed.
</p>
</body>
<script>
onload = function() {
const elem = document.getElementById('box');
const anim = elem.animate([
{ transform: 'translateX(100px)' },
{ transform: 'translateX(100px)' },
{ transform: 'translateX(200px)' },
{ transform: 'translateX(200px)' }
], {
duration: 1000
// Double rAF to ensure that we are not bogged down during initialization
// and the compositor is ready.
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const elem = document.getElementById('box');
const anim = elem.animate([
{ transform: 'translateX(100px)' },
{ transform: 'translateX(100px)' },
{ transform: 'translateX(200px)' },
{ transform: 'translateX(200px)' }
], {
duration: 1000
});
setTimeout(() => {
anim.reverse();
}, 500);
takeScreenshotDelayed(900);
});
anim.ready.then(() => {
setTimeout(() => {
anim.reverse();
}, 500);
takeScreenshotDelayed(900);
});
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment