Skip to content

GitLab

T
tangled
Commit 7686b278 authored by ericwilligers's avatar ericwilligers Committed by Commit bot
Browse files
Options

CSS Animations: fix flaky transition-and-animation-2.html 

We now wait for the end event instead of using setTimeout.

BUG=248938

Review-Url: https://codereview.chromium.org/2618293002
Cr-Commit-Position: refs/heads/master@{#442839}
parent 5df504c9
Hide whitespace changes
Inline Side-by-side
Showing with 40 additions and 41 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 7686b278
...@@ -708,7 +708,6 @@ crbug.com/636053 [ Mac Win ] virtual/threaded/printing/thead-repeats-at-top-of-e ...@@ -708,7 +708,6 @@ crbug.com/636053 [ Mac Win ] virtual/threaded/printing/thead-repeats-at-top-of-e
crbug.com/636239 [ Win7 ] media/video-zoom-controls.html [ Failure ] crbug.com/636239 [ Win7 ] media/video-zoom-controls.html [ Failure ]
crbug.com/432129 fast/html/marquee-scroll.html [ Failure Pass ] crbug.com/432129 fast/html/marquee-scroll.html [ Failure Pass ]
crbug.com/248938 [ Win Debug ] virtual/threaded/animations/transition-and-animation-2.html [ Timeout ]
crbug.com/326139 crbug.com/390125 media/video-frame-accurate-seek.html [ Failure Pass ] crbug.com/326139 crbug.com/390125 media/video-frame-accurate-seek.html [ Failure Pass ]
crbug.com/248938 virtual/threaded/animations/animation-iteration-event-destroy-renderer.html [ Pass Timeout ] crbug.com/248938 virtual/threaded/animations/animation-iteration-event-destroy-renderer.html [ Pass Timeout ]
crbug.com/446385 [ Win7 Debug ] http/tests/xmlhttprequest/xmlhttprequest-json-response-overflow.html [ Crash Pass Timeout ] crbug.com/446385 [ Win7 Debug ] http/tests/xmlhttprequest/xmlhttprequest-json-response-overflow.html [ Crash Pass Timeout ]
......
third_party/WebKit/LayoutTests/animations/transition-and-animation-2-expected.txt deleted 100644 → 0
View file @ 5df504c9
Warning this test is running in real-time and may be flaky.
PASS - "transform" property for "box" element at 0.4s saw something close to: none
third_party/WebKit/LayoutTests/animations/transition-and-animation-2.html
View file @ 7686b278
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <!DOCTYPE html>
"http://www.w3.org/TR/html4/loose.dtd"> <html>
<html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8">
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<title>Transition/Animation Test #2</title> <title>Transition/Animation Test #2</title>
<style type="text/css" media="screen"> <style>
#box { #box {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -13,44 +13,47 @@ ...@@ -13,44 +13,47 @@
height: 100px; height: 100px;
width: 100px; width: 100px;
background-color: blue; background-color: blue;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-name: anim;
transition-property: transform; transition-property: transform;
transition-duration: 10s; transition-duration: 10s;
transition-timing-function: linear; transition-timing-function: linear;
} }
@keyframes anim { #box.running {
from { transform: translate(0,100px) } animation-duration: 0.3s;
to { transform: translate(400px, 100px) } animation-timing-function: linear;
animation-name: anim;
} }
</style> @keyframes anim {
<script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script> from { transform: translate(0, 100px); }
<script type="text/javascript" charset="utf-8"> to { transform: translate(400px, 100px); }
const expectedValues = [
// [time, element-id, property, expected-value, tolerance]
[0.4, "box", "transform", "none", 0],
];
// FIXME: This doesn't get called so we don't trigger a transition...
function setup()
{
document.getElementById("box").style.transform = "translateX(400px)";
} }
</style>
runAnimationTest(expectedValues, undefined, undefined, 'do-not-use-pause-api');
</script>
</head> </head>
<body> <body>
This test has a transition and animation on the same property (transform). <div id="box"></div>
The animation starts and then the transition is triggered. The transition should start <script>
at the position before the animation started (the unanimated position), which is (0,0). If it 'use strict';
starts from the start point of the animation (0,100) then there is an error async_test(t => {
<div id="box">
</div> t.step(() => {
<div id="result"> box.offsetTop; // force style recalc
</div>
// Start animation
box.classList.add('running');
// No transition - we jump to the animation's initial frame.
assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 0, 100)');
// This would trigger a transition if no animation was in progress.
box.style.transform = 'translate(400px, 0)';
// We remain at the animation's initial frame.
assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 0, 100)');
});
box.addEventListener('animationend', t.step_func_done(() => {
// No transition - the inline style takes immediate effect.
assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 400, 0)');
}));
}, 'Inline style applies when animation completes');
</script>
</body> </body>
</html> </html>
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