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- ...@@ -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/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/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/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/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 # Enable scroll-snap tests on impl thread
# These are currently failing on Mac which needs more investigation, snap-scrolls-visual-viewport seems flaky # 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> <!DOCTYPE html>
<title>Reference for reverse running animation</title> <title>Reference for reverse running animation</title>
<style> <style>
#box { #notes {
background: blue; position: absolute;
height: 40px; left: 0px;
width: 40px; top: 100px;
transform: translateX(100px); }
will-change: transform; body {
backgrond: white;
} }
</style> </style>
<body> <body>
<div id="box"></div> <p id="notes">
<p>This test reverses the animation shortly after the box starts moving. If 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. any blue pixels are visible the test has failed.
</p> </p>
</body> </body>
third_party/blink/web_tests/external/wpt/web-animations/timing-model/animations/reverse-running-animation.html
View file @ a93be69b
...@@ -6,36 +6,63 @@ ...@@ -6,36 +6,63 @@
<link rel="match" href="reverse-running-animation-ref.html"> <link rel="match" href="reverse-running-animation-ref.html">
<script src="/common/reftest-wait.js"></script> <script src="/common/reftest-wait.js"></script>
<style> <style>
#box { #box, #overlay {
background: blue; /* 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; height: 40px;
position: absolute;
top: 40px;
width: 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> </style>
<body> <body>
<div id="box"></div> <div id="box"></div>
<p>This test reverses the animation shortly after the box starts moving. If <div id="overlay"></div>
the box doesn't move back to its original position, the test has failed. <p id="notes">
</p> This test reverses the animation shortly after the box starts moving. If
any blue pixels are visible the test has failed.
</p>
</body> </body>
<script> <script>
onload = function() { onload = function() {
const elem = document.getElementById('box'); // Double rAF to ensure that we are not bogged down during initialization
const anim = elem.animate([ // and the compositor is ready.
{ transform: 'translateX(100px)' }, requestAnimationFrame(() => {
{ transform: 'translateX(100px)' }, requestAnimationFrame(() => {
{ transform: 'translateX(200px)' }, const elem = document.getElementById('box');
{ transform: 'translateX(200px)' } const anim = elem.animate([
], { { transform: 'translateX(100px)' },
duration: 1000 { 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> </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