Chromium Code Reviews Chromium Code Reviews
Issue 2618293002:
CSS Animations: fix flaky transition-and-animation-2.html (Closed)
| Index: third_party/WebKit/LayoutTests/animations/transition-and-animation-2.html |
| diff --git a/third_party/WebKit/LayoutTests/animations/transition-and-animation-2.html b/third_party/WebKit/LayoutTests/animations/transition-and-animation-2.html |
| index 9709ef7f84f1a414d89faff656eb5519765af8df..f91cf294fac4c1b1e4c157e2999a0288cc3dc692 100644 |
| --- a/third_party/WebKit/LayoutTests/animations/transition-and-animation-2.html |
| +++ b/third_party/WebKit/LayoutTests/animations/transition-and-animation-2.html |
| @@ -1,11 +1,11 @@ |
| -<!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,42 @@ |
| 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 => { |
| + |
| + box.addEventListener('animationend', t.step_func_done(() => { |
| + assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 400, 0)'); |
|
alancutter (OOO until 2018)
2017/01/11 05:11:36
This expectation needs some explanation. We expect
Eric Willigers
2017/01/11 06:28:16
Correct. Comment added.
|
| + })); |
| + |
| + t.step(() => { |
| + box.offsetTop; // force style recalc |
| + |
| + // Start animation |
| + box.classList.add('running'); |
| + assert_equals(getComputedStyle(box).transform, 'matrix(1, 0, 0, 1, 0, 100)'); |
| + |
| + // Trigger transition |
| + box.style.transform = 'translate(400px, 0)'; |
|
alancutter (OOO until 2018)
2017/01/11 04:00:50
What is the point of starting the transition? The
Eric Willigers
2017/01/11 05:06:52
We show what happens when the animation completes:
alancutter (OOO until 2018)
2017/01/11 05:11:36
Sorry, the ordering of the code confused me. I thi
Eric Willigers
2017/01/11 06:28:16
Reordered.
|
| + }); |
| + }, 'Inline style applies when animation completes'); |
| + </script> |
| </body> |
| </html> |
