| Index: third_party/WebKit/LayoutTests/animations/animation-direction-normal.html
|
| diff --git a/third_party/WebKit/LayoutTests/animations/animation-direction-normal.html b/third_party/WebKit/LayoutTests/animations/animation-direction-normal.html
|
| index a1f31bdb6910d967a7bbcda3afda9d685c411226..feb0adba16b16cb419ff032cad0005c4df683181 100644
|
| --- a/third_party/WebKit/LayoutTests/animations/animation-direction-normal.html
|
| +++ b/third_party/WebKit/LayoutTests/animations/animation-direction-normal.html
|
| @@ -1,67 +1,39 @@
|
| -<html lang="en">
|
| -<head>
|
| - <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
| - <title>Test of animation-direction</title>
|
| - <style type="text/css" media="screen">
|
| - body {
|
| - margin: 0;
|
| - }
|
| -
|
| - #box {
|
| - position: absolute;
|
| - left: 0px;
|
| - top: 100px;
|
| - height: 100px;
|
| - width: 100px;
|
| - background-color: red;
|
| - margin: 0;
|
| - animation-duration: 2s;
|
| +<!DOCTYPE html>
|
| +<title>Test of animation-direction</title>
|
| +<script src="../resources/testharness.js"></script>
|
| +<script src="../resources/testharnessreport.js"></script>
|
| +<style>
|
| + #target {
|
| animation-direction: normal;
|
| + animation-duration: 2s;
|
| animation-iteration-count: 2;
|
| - animation-timing-function: linear;
|
| animation-name: move1;
|
| - }
|
| - #safezone {
|
| + animation-play-state: paused;
|
| + animation-timing-function: linear;
|
| + background-color: red;
|
| + height: 100px;
|
| + left: 0px;
|
| + margin: 0;
|
| position: absolute;
|
| top: 100px;
|
| - height: 100px;
|
| - width: 130px;
|
| - left: 30px;
|
| - background-color: green;
|
| + width: 100px;
|
| }
|
| @keyframes move1 {
|
| - from { transform: translateX(0px); }
|
| - to { transform: translateX(200px); }
|
| + from { left: 0px; }
|
| + to { left: 200px; }
|
| }
|
| - </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.5, "box", "transform", [1,0,0,1, 50,0], 20],
|
| - [1.0, "box", "transform", [1,0,0,1,100,0], 20],
|
| - [2.5, "box", "transform", [1,0,0,1, 50,0], 20],
|
| - ];
|
|
|
| - function pauseAnimation()
|
| - {
|
| - document.getElementById("box").style.animationPlayState = "paused";
|
| - }
|
| -
|
| - function setTimers()
|
| - {
|
| - setTimeout(pauseAnimation, 2500);
|
| - }
|
| +</style>
|
| +<div id="target"></div>
|
| +<script>
|
| + test(function() {
|
| + target.style.animationDelay = '-0.5s';
|
| + assert_equals(getComputedStyle(target).left, '50px');
|
|
|
| - runAnimationTest(expectedValues, setTimers, null, true, true);
|
| + target.style.animationDelay = '-1s';
|
| + assert_equals(getComputedStyle(target).left, '100px');
|
|
|
| - </script>
|
| -</head>
|
| -<body>
|
| -<!-- This tests the operation of animation-direction. After 1 second the red boxes should be hidden by the green boxes. You should see no red boxes. -->
|
| -<div id="box"></div>
|
| -<div id="safezone"></div>
|
| -<div id="result"></div>
|
| -</div>
|
| -</body>
|
| -</html>
|
| + target.style.animationDelay = '-2.5s';
|
| + assert_equals(getComputedStyle(target).left, '50px');
|
| + }, "animation-direction normal plays forwards");
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 2580703002:
CSS Animations layout tests: fix flaky animation-direction-normal.html (Closed)
