Chromium Code Reviews Chromium Code Reviews
Issue 2573413002:
CSS Animations: More layout tests use testharness.js (Closed)
| Index: third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.html |
| diff --git a/third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.html b/third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.html |
| index 57a075d1dc79f03bcf0ed80845035d1ca74b6136..5a5e779d13b9016a46f98f103df52a2275927d46 100644 |
| --- a/third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.html |
| +++ b/third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.html |
| @@ -1,28 +1,21 @@ |
| -<!doctype html> |
| -<html lang="en"> |
| -<head> |
| - <title>Test of animation-direction timing functions</title> |
| - <style> |
| - body { |
| - margin: 0; |
| - } |
| - |
| +<!DOCTYPE html> |
| +<title>Test of animation-direction timing functions</title> |
| +<script src="../resources/testharness.js"></script> |
| +<script src="../resources/testharnessreport.js"></script> |
| +<style> |
| .box { |
| - position: relative; |
| - left: 20px; |
| - top: 10px; |
| - height: 50px; |
| - width: 250px; |
| - margin-bottom: 10px; |
| animation-duration: 2s; |
| - animation-timing-function: ease; /* ease is good for testing because it is not symmetric */ |
| animation-iteration-count: 4; |
| - } |
| - |
| - .move1 { |
| animation-name: move1; |
| + animation-timing-function: ease; /* ease is good for testing because it is not symmetric */ |
| background-color: blue; |
| color: white; |
| + height: 50px; |
| + left: 20px; |
| + margin-bottom: 10px; |
| + position: relative; |
| + top: 10px; |
| + width: 250px; |
| } |
| .normal { |
| @@ -45,31 +38,37 @@ |
| from { left: 0px; } |
| to { left: 200px; } |
| } |
| - </style> |
| - <script src="resources/animation-test-helpers.js"></script> |
| - <script> |
| - const expectedValues = [ |
| - // [time, element-id, property, expected-value, tolerance] |
| - [0.2, "box1", "left", 18, 10], |
| - [0.2, "box2", "left", 18, 10], |
| - [0.2, "box3", "left", 198, 10], |
| - [0.2, "box4", "left", 198, 10], |
| - [2.2, "box1", "left", 18, 10], |
| - [2.2, "box2", "left", 198, 10], |
| - [2.2, "box3", "left", 198, 10], |
| - [2.2, "box4", "left", 18, 10], |
| - ]; |
| +</style> |
| +<div id="box1" class="box normal">normal</div> |
| +<div id="box2" class="box alternate">alternate</div> |
| +<div id="box3" class="box reverse">reverse</div> |
| +<div id="box4" class="box alternate-reverse">alternate-reverse</div> |
| +<script> |
| + 'use strict'; |
| + test(function() { |
| + box1.style.animationDelay = '-0.2s'; |
| + assert_equals(getComputedStyle(box1).left, '18.6525px'); |
|
suzyh_UTC10 (ex-contributor)
2016/12/15 23:57:28
Are these values likely to be flaky at all? Should
Eric Willigers
2016/12/16 00:36:17
Changed to use assert_approx_equals.
They shouldn
|
| + |
| + box2.style.animationDelay = '-0.2s'; |
| + assert_equals(getComputedStyle(box2).left, '18.6525px'); |
| + |
| + box3.style.animationDelay = '-0.2s'; |
| + assert_equals(getComputedStyle(box3).left, '198.864px'); |
| + |
| + box4.style.animationDelay = '-0.2s'; |
| + assert_equals(getComputedStyle(box4).left, '198.864px'); |
| + |
| + |
| + box1.style.animationDelay = '-2.2s'; |
| + assert_equals(getComputedStyle(box1).left, '18.6525px'); |
| + |
| + box2.style.animationDelay = '-2.2s'; |
| + assert_equals(getComputedStyle(box2).left, '198.864px'); |
| - runAnimationTest(expectedValues); |
| + box3.style.animationDelay = '-2.2s'; |
| + assert_equals(getComputedStyle(box3).left, '198.864px'); |
| - </script> |
| -</head> |
| -<body> |
| -<div id="box1" class="box move1 normal">normal</div> |
| -<div id="box2" class="box move1 alternate">alternate</div> |
| -<div id="box3" class="box move1 reverse">reverse</div> |
| -<div id="box4" class="box move1 alternate-reverse">alternate-reverse</div> |
| -<div id="result"></div> |
| -</div> |
| -</body> |
| -</html> |
| + box4.style.animationDelay = '-2.2s'; |
| + assert_equals(getComputedStyle(box4).left, '18.6525px'); |
| + }, "animation-direction works with timing functions"); |
| +</script> |
