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
crbug.com/636239 [ Win7 ] media/video-zoom-controls.html [ Failure ]
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/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 ]
......
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<!DOCTYPE html>
<html>
<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>
<style type="text/css" media="screen">
<style>
#box {
position: absolute;
left: 0;
......@@ -13,44 +13,47 @@
height: 100px;
width: 100px;
background-color: blue;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-name: anim;
transition-property: transform;
transition-duration: 10s;
transition-timing-function: linear;
}
@keyframes anim {
from { transform: translate(0,100px) }
to { transform: translate(400px, 100px) }
#box.running {
animation-duration: 0.3s;
animation-timing-function: linear;
animation-name: anim;
}
</style>
<script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
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)";
@keyframes anim {
from { transform: translate(0, 100px); }
to { transform: translate(400px, 100px); }
}
runAnimationTest(expectedValues, undefined, undefined, 'do-not-use-pause-api');
</script>
</style>
</head>
<body>
This test has a transition and animation on the same property (transform).
The animation starts and then the transition is triggered. The transition should start
at the position before the animation started (the unanimated position), which is (0,0). If it
starts from the start point of the animation (0,100) then there is an error
<div id="box">
</div>
<div id="result">
</div>
<div id="box"></div>
<script>
'use strict';
async_test(t => {
t.step(() => {
box.offsetTop; // force style recalc
// 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>
</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