| 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..a6808bc5e66d92df05d86fbf6fcabcec208c3b71 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,44 @@
|
| 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';
|
| +
|
| + function computedLeft(element) {
|
| + return Number(getComputedStyle(element).left.slice(0, -2));
|
| + }
|
| +
|
| + test(function() {
|
| + const epsilon = 0.002;
|
| +
|
| + box1.style.animationDelay = '-0.2s';
|
| + assert_approx_equals(computedLeft(box1), 18.6525, epsilon, 'early box1');
|
| +
|
| + box2.style.animationDelay = '-0.2s';
|
| + assert_approx_equals(computedLeft(box2), 18.6525, epsilon, 'early box2');
|
| +
|
| + box3.style.animationDelay = '-0.2s';
|
| + assert_approx_equals(computedLeft(box3), 198.864, epsilon, 'early box3');
|
| +
|
| + box4.style.animationDelay = '-0.2s';
|
| + assert_approx_equals(computedLeft(box4), 198.864, epsilon, 'early box4');
|
| +
|
| +
|
| + box1.style.animationDelay = '-2.2s';
|
| + assert_approx_equals(computedLeft(box1), 18.6525, epsilon, 'late box1');
|
| +
|
| + box2.style.animationDelay = '-2.2s';
|
| + assert_approx_equals(computedLeft(box2), 198.864, epsilon, 'late box2');
|
|
|
| - runAnimationTest(expectedValues);
|
| + box3.style.animationDelay = '-2.2s';
|
| + assert_approx_equals(computedLeft(box3), 198.864, epsilon, 'late box3');
|
|
|
| - </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_approx_equals(computedLeft(box4), 18.6525, epsilon, 'late box4');
|
| + }, "animation-direction works with timing functions");
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 2573413002:
CSS Animations: More layout tests use testharness.js (Closed)
