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

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: 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
« third_party/WebKit/LayoutTests/animations/animation-direction-reverse-fill-mode.html ('K') | « 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], 48 test(function() {
56 [0.2, "box4", "left", 198, 10], 49 box1.style.animationDelay = '-0.2s';
57 [2.2, "box1", "left", 18, 10], 50 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
58 [2.2, "box2", "left", 198, 10],
59 [2.2, "box3", "left", 198, 10],
60 [2.2, "box4", "left", 18, 10],
61 ];
62 51
63 runAnimationTest(expectedValues); 52 box2.style.animationDelay = '-0.2s';
53 assert_equals(getComputedStyle(box2).left, '18.6525px');
64 54
65 </script> 55 box3.style.animationDelay = '-0.2s';
66 </head> 56 assert_equals(getComputedStyle(box3).left, '198.864px');
67 <body> 57
68 <div id="box1" class="box move1 normal">normal</div> 58 box4.style.animationDelay = '-0.2s';
69 <div id="box2" class="box move1 alternate">alternate</div> 59 assert_equals(getComputedStyle(box4).left, '198.864px');
70 <div id="box3" class="box move1 reverse">reverse</div> 60
71 <div id="box4" class="box move1 alternate-reverse">alternate-reverse</div> 61
72 <div id="result"></div> 62 box1.style.animationDelay = '-2.2s';
73 </div> 63 assert_equals(getComputedStyle(box1).left, '18.6525px');
74 </body> 64
75 </html> 65 box2.style.animationDelay = '-2.2s';
66 assert_equals(getComputedStyle(box2).left, '198.864px');
67
68 box3.style.animationDelay = '-2.2s';
69 assert_equals(getComputedStyle(box3).left, '198.864px');
70
71 box4.style.animationDelay = '-2.2s';
72 assert_equals(getComputedStyle(box4).left, '18.6525px');
73 }, "animation-direction works with timing functions");
74 </script>
OLDNEW
« third_party/WebKit/LayoutTests/animations/animation-direction-reverse-fill-mode.html ('K') | « 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