| 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..59ed7b3028f1ed0a1a87eb73df28646811e66ac2 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,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>
|
|
|
Chromium Code Reviews
Issue 2618293002:
CSS Animations: fix flaky transition-and-animation-2.html (Closed)
