Chromium Code Reviews Chromium Code Reviews
Issue 2580703002:
CSS Animations layout tests: fix flaky animation-direction-normal.html (Closed)
| 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..8fddf1e72a2374934925a7c6dd4ad59d0ef3957c 100644 |
| --- a/third_party/WebKit/LayoutTests/animations/animation-direction-normal.html |
| +++ b/third_party/WebKit/LayoutTests/animations/animation-direction-normal.html |
| @@ -1,67 +1,41 @@ |
| -<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"; |
| - } |
| +</style> |
| +<div id="target"></div> |
| +<script> |
| + test(function() { |
| + target.offsetTop; |
|
alancutter (OOO until 2018)
2016/12/15 04:20:17
This line is not necessary.
|
| - function setTimers() |
| - { |
| - setTimeout(pauseAnimation, 2500); |
| - } |
| + 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> |
