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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.html

Issue 2573413002: CSS Animations: More layout tests use testharness.js (Closed)
Patch Set: review comments 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-reverse-non-hardware-expected.txt ('k') | third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions-expected.txt » ('j') | no next file with comments »
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 timing functions</title>
3 <head> 3 <script src="../resources/testharness.js"></script>
4 <title>Test of animation-direction timing functions</title> 4 <script src="../resources/testharnessreport.js"></script>
5 <style> 5 <style>
6 body {
7 margin: 0;
8 }
9
10 .box { 6 .box {
11 position: relative;
12 left: 20px;
13 top: 10px;
14 height: 50px;
15 width: 250px;
16 margin-bottom: 10px;
17 animation-duration: 2s; 7 animation-duration: 2s;
8 animation-iteration-count: 4;
9 animation-name: move1;
18 animation-timing-function: ease; /* ease is good for testing because it is not symmetric */ 10 animation-timing-function: ease; /* ease is good for testing because it is not symmetric */
19 animation-iteration-count: 4;
20 }
21
22 .move1 {
23 animation-name: move1;
24 background-color: blue; 11 background-color: blue;
25 color: white; 12 color: white;
13 height: 50px;
14 left: 20px;
15 margin-bottom: 10px;
16 position: relative;
17 top: 10px;
18 width: 250px;
26 } 19 }
27 20
28 .normal { 21 .normal {
29 animation-direction: normal; 22 animation-direction: normal;
30 } 23 }
31 24
32 .alternate { 25 .alternate {
33 animation-direction: alternate; 26 animation-direction: alternate;
34 } 27 }
35 28
36 .reverse { 29 .reverse {
37 animation-direction: reverse; 30 animation-direction: reverse;
38 } 31 }
39 32
40 .alternate-reverse { 33 .alternate-reverse {
41 animation-direction: alternate-reverse; 34 animation-direction: alternate-reverse;
42 } 35 }
43 36
44 @keyframes move1 { 37 @keyframes move1 {
45 from { left: 0px; } 38 from { left: 0px; }
46 to { left: 200px; } 39 to { left: 200px; }
47 } 40 }
48 </style> 41 </style>
49 <script src="resources/animation-test-helpers.js"></script> 42 <div id="box1" class="box normal">normal</div>
50 <script> 43 <div id="box2" class="box alternate">alternate</div>
51 const expectedValues = [ 44 <div id="box3" class="box reverse">reverse</div>
52 // [time, element-id, property, expected-value, tolerance] 45 <div id="box4" class="box alternate-reverse">alternate-reverse</div>
53 [0.2, "box1", "left", 18, 10], 46 <script>
54 [0.2, "box2", "left", 18, 10], 47 'use strict';
55 [0.2, "box3", "left", 198, 10],
56 [0.2, "box4", "left", 198, 10],
57 [2.2, "box1", "left", 18, 10],
58 [2.2, "box2", "left", 198, 10],
59 [2.2, "box3", "left", 198, 10],
60 [2.2, "box4", "left", 18, 10],
61 ];
62 48
63 runAnimationTest(expectedValues); 49 function computedLeft(element) {
50 return Number(getComputedStyle(element).left.slice(0, -2));
51 }
64 52
65 </script> 53 test(function() {
66 </head> 54 const epsilon = 0.002;
67 <body> 55
68 <div id="box1" class="box move1 normal">normal</div> 56 box1.style.animationDelay = '-0.2s';
69 <div id="box2" class="box move1 alternate">alternate</div> 57 assert_approx_equals(computedLeft(box1), 18.6525, epsilon, 'early box1');
70 <div id="box3" class="box move1 reverse">reverse</div> 58
71 <div id="box4" class="box move1 alternate-reverse">alternate-reverse</div> 59 box2.style.animationDelay = '-0.2s';
72 <div id="result"></div> 60 assert_approx_equals(computedLeft(box2), 18.6525, epsilon, 'early box2');
73 </div> 61
74 </body> 62 box3.style.animationDelay = '-0.2s';
75 </html> 63 assert_approx_equals(computedLeft(box3), 198.864, epsilon, 'early box3');
64
65 box4.style.animationDelay = '-0.2s';
66 assert_approx_equals(computedLeft(box4), 198.864, epsilon, 'early box4');
67
68
69 box1.style.animationDelay = '-2.2s';
70 assert_approx_equals(computedLeft(box1), 18.6525, epsilon, 'late box1');
71
72 box2.style.animationDelay = '-2.2s';
73 assert_approx_equals(computedLeft(box2), 198.864, epsilon, 'late box2');
74
75 box3.style.animationDelay = '-2.2s';
76 assert_approx_equals(computedLeft(box3), 198.864, epsilon, 'late box3');
77
78 box4.style.animationDelay = '-2.2s';
79 assert_approx_equals(computedLeft(box4), 18.6525, epsilon, 'late box4');
80 }, "animation-direction works with timing functions");
81 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/animation-direction-reverse-non-hardware-expected.txt ('k') | third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698