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
Show 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;
} }
#box.running {
animation-duration: 0.3s;
animation-timing-function: linear;
animation-name: anim;
}
@keyframes anim { @keyframes anim {
from { transform: translate(0,100px) } from { transform: translate(0, 100px); }
to { transform: translate(400px, 100px) } to { transform: translate(400px, 100px); }
} }
</style> </style>
<script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script> </head>
<script type="text/javascript" charset="utf-8"> <body>
<div id="box"></div>
<script>
'use strict';
async_test(t => {
const expectedValues = [ t.step(() => {
// [time, element-id, property, expected-value, tolerance] box.offsetTop; // force style recalc
[0.4, "box", "transform", "none", 0],
];
// FIXME: This doesn't get called so we don't trigger a transition... // Start animation
function setup() box.classList.add('running');
{ // No transition - we jump to the animation's initial frame.
document.getElementById("box").style.transform = "translateX(400px)"; assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 0, 100)');
}
runAnimationTest(expectedValues, undefined, undefined, 'do-not-use-pause-api'); // 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> </script>
</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>
</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