Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(62)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/animation-direction-reverse-fill-mode.html

Issue 2573413002: CSS Animations: More layout tests use testharness.js (Closed)
Patch Set: animation-direction-reverse-non-hardware.html Created 4 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/animation-direction-expected.txt ('k') | third_party/WebKit/LayoutTests/animations/animation-direction-reverse-fill-mode-expected.txt » ('j') | third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <title>Test of animation-direction</title>
3 <head> 3 <script src="../resources/testharness.js"></script>
4 <title>Test animation direction reverse with fill modes</title> 4 <script src="../resources/testharnessreport.js"></script>
5 <style> 5 <style>
6 .box { 6 .box {
7 animation-delay: 1s;
8 animation-direction: reverse;
9 animation-duration: 1s;
10 animation-name: anim;
11 animation-timing-function: linear;
12 height: 100px;
13 left: 100px;
7 position: relative; 14 position: relative;
8 left: 100px;
9 height: 100px;
10 width: 100px; 15 width: 100px;
11 animation-delay: 0.1s;
12 animation-duration: 0.1s;
13 animation-timing-function: linear;
14 animation-name: anim;
15 animation-direction: reverse;
16 } 16 }
17 @keyframes anim { 17 @keyframes anim {
18 from { left: 200px; } 18 from { left: 200px; }
19 to { left: 300px; } 19 to { left: 300px; }
20 } 20 }
21 #none { 21 #none {
22 animation-fill-mode: none;
22 background-color: blue; 23 background-color: blue;
23 animation-fill-mode: none;
24 } 24 }
25 #backwards { 25 #backwards {
26 animation-fill-mode: backwards;
26 background-color: red; 27 background-color: red;
27 animation-fill-mode: backwards;
28 } 28 }
29 #forwards { 29 #forwards {
30 animation-fill-mode: forwards;
30 background-color: green; 31 background-color: green;
31 animation-fill-mode: forwards;
32 } 32 }
33 #both { 33 #both {
34 animation-fill-mode: both;
34 background-color: yellow; 35 background-color: yellow;
35 animation-fill-mode: both;
36 } 36 }
37 #both_iterating { 37 #both_iterating {
suzyh_UTC10 (ex-contributor) 2016/12/15 23:57:28 Should these alternate and alternate-reverse tests
Eric Willigers 2016/12/16 00:53:19 Done.
38 background-color: cyan; 38 animation-direction: alternate;
39 animation-fill-mode: both; 39 animation-fill-mode: both;
40 animation-iteration-count: 2; 40 animation-iteration-count: 2;
41 animation-direction: alternate; 41 background-color: cyan;
42 } 42 }
43 #both_iterating_reverse { 43 #both_iterating_reverse {
44 background-color: #999; 44 animation-direction: alternate-reverse;
45 animation-fill-mode: both; 45 animation-fill-mode: both;
46 animation-iteration-count: 2; 46 animation-iteration-count: 2;
47 animation-direction: alternate-reverse; 47 background-color: #999;
48 } 48 }
49 </style> 49 </style>
50 <script src="resources/animation-test-helpers.js"></script>
51 <script type="text/javascript" charset="utf-8">
52 const numAnims = 6;
53 var animsFinished = 0;
54 const allowance = 5;
55 const expectedValues = [
56 {id: "none", start: "100px", end: "100px"},
57 {id: "backwards", start: "300px", end: "100px"},
58 {id: "forwards", start: "100px", end: "200px"},
59 {id: "both", start: "300px", end: "200px"},
60 {id: "both_iterating", start: "200px", end: "200px"},
61 {id: "both_iterating_reverse", start: "300px", end: "300px"}
62 ];
63 var result = "";
64
65 if (window.testRunner) {
66 testRunner.dumpAsText();
67 testRunner.waitUntilDone();
68 }
69
70 function animationEnded(event) {
71 if (++animsFinished == numAnims) {
72 // This call to setTimeout should be ok in the test environment
73 // since we're just giving style a chance to resolve.
74 setTimeout(endTest, 0);
75 }
76 };
77
78 function endTest() {
79 for (var i = 0; i < expectedValues.length; i++) {
80 var realValue = getPropertyValue("left", expectedValues[i].id);
81 var expectedValue = expectedValues[i].end;
82 if (comparePropertyValue(realValue, expectedValue, allowance))
83 result += "PASS";
84 else
85 result += "FAIL";
86 result += " - end of animation - id: " + expectedValues[i].id + " ex pected: " + expectedValue + " actual: " + realValue + "<br>";
87 }
88 document.getElementById('result').innerHTML = result;
89
90 if (window.testRunner)
91 testRunner.notifyDone();
92 }
93
94 window.onload = function () {
95 for (var i = 0; i < expectedValues.length; i++) {
96 var realValue = getPropertyValue("left", expectedValues[i].id);
97 var expectedValue = expectedValues[i].start;
98 if (comparePropertyValue(realValue, expectedValue, allowance))
99 result += "PASS";
100 else
101 result += "FAIL";
102 result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
103 }
104 document.addEventListener("animationend", animationEnded, false);
105 };
106 </script>
107 </head>
108 <body>
109 <div>
110 This test performs an animation of the left property with direction reverse
111 and four different fill modes. It animates over 0.1 seconds with a 0.1
112 second delay. It takes snapshots at document load and the end of the
113 animation.
114 </div>
115 <div id="none" class="box"> 50 <div id="none" class="box">
116 None 51 None
117 </div> 52 </div>
118 <div id="backwards" class="box"> 53 <div id="backwards" class="box">
119 Backwards 54 Backwards
120 </div> 55 </div>
121 <div id="forwards" class="box"> 56 <div id="forwards" class="box">
122 Forwards 57 Forwards
123 </div> 58 </div>
124 <div id="both" class="box"> 59 <div id="both" class="box">
125 Both 60 Both
126 </div> 61 </div>
127 <div id="both_iterating" class="box"> 62 <div id="both_iterating" class="box">
128 Both iterating 63 Both iterating
129 </div> 64 </div>
130 <div id="both_iterating_reverse" class="box"> 65 <div id="both_iterating_reverse" class="box">
131 Both iterating reverse 66 Both iterating reverse
132 </div> 67 </div>
133 <div id="result"> 68 <script>
134 </div> 69 'use strict';
135 </body> 70 test(function() {
136 </html> 71 none.style.animationDelay = '1s';
72 assert_equals(getComputedStyle(none).left, '100px');
73
74 backwards.style.animationDelay = '1s';
75 assert_equals(getComputedStyle(backwards).left, '300px');
76
77 forwards.style.animationDelay = '1s';
78 assert_equals(getComputedStyle(forwards).left, '100px');
79
80 both.style.animationDelay = '1s';
81 assert_equals(getComputedStyle(both).left, '300px');
82
83 both_iterating.style.animationDelay = '1s';
84 assert_equals(getComputedStyle(both_iterating).left, '200px');
85
86 both_iterating_reverse.style.animationDelay = '1s';
87 assert_equals(getComputedStyle(both_iterating_reverse).left, '300px');
88
89
90 none.style.animationDelay = '-5s';
91 assert_equals(getComputedStyle(none).left, '100px');
92
93 backwards.style.animationDelay = '-5s';
94 assert_equals(getComputedStyle(backwards).left, '100px');
95
96 forwards.style.animationDelay = '-5s';
97 assert_equals(getComputedStyle(forwards).left, '200px');
98
99 both.style.animationDelay = '-5s';
100 assert_equals(getComputedStyle(both).left, '200px');
101
102 both_iterating.style.animationDelay = '-5s';
103 assert_equals(getComputedStyle(both_iterating).left, '200px');
104
105 both_iterating_reverse.style.animationDelay = '-5s';
106 assert_equals(getComputedStyle(both_iterating_reverse).left, '300px');
107 }, "animation directions work with fill modes");
108 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/animation-direction-expected.txt ('k') | third_party/WebKit/LayoutTests/animations/animation-direction-reverse-fill-mode-expected.txt » ('j') | third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698