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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-effect-timing/getComputedStyle.html

Issue 2015623004: Import wpt@ed94c51f3dfaa5ff4c9c311add1a560408059c51 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 7 months 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/imported/wpt/web-animations/animation-effect-timing/getAnimations.html ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-effect-timing/iterationStart.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <meta charset=utf-8>
3 <title>getComputedStyle tests</title>
4 <link rel="help" href="http://w3c.github.io/web-animations/#animationeffecttimin g">
5 <link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org" >
6 <script src="../../../../resources/testharness.js"></script>
7 <script src="../../../../resources/testharnessreport.js"></script>
8 <script src="../testcommon.js"></script>
9 <body>
10 <div id="log"></div>
11 <script>
12 'use strict';
13
14 test(function(t) {
15 var div = createDiv(t);
16 var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
17 anim.finish();
18 assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
19 anim.effect.timing.duration *= 2;
20 assert_equals(getComputedStyle(div).opacity, '0.5', 'set double duration');
21 anim.effect.timing.duration = 0;
22 assert_equals(getComputedStyle(div).opacity, '1', 'set duration 0');
23 anim.effect.timing.duration = 'auto';
24 assert_equals(getComputedStyle(div).opacity, '1', 'set duration \'auto\'');
25 }, 'changed duration immediately updates its computed styles');
26
27 test(function(t) {
28 var div = createDiv(t);
29 var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
30 anim.finish();
31 assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');
32 anim.effect.timing.iterations = 2;
33 assert_equals(getComputedStyle(div).opacity, '0', 'set 2 iterations');
34 anim.effect.timing.iterations = 0;
35 assert_equals(getComputedStyle(div).opacity, '1', 'set iterations 0');
36 anim.effect.timing.iterations = Infinity;
37 assert_equals(getComputedStyle(div).opacity, '0', 'set iterations Infinity');
38 }, 'changed iterations immediately updates its computed styles');
39
40 test(function(t) {
41 var div = createDiv(t);
42 var anim = div.animate({ opacity: [ 1, 0 ] },
43 { duration: 10000, endDelay: 1000, fill: 'none' });
44
45 anim.currentTime = 9000;
46 assert_equals(getComputedStyle(div).opacity, '0.1',
47 'set currentTime during duration');
48
49 anim.currentTime = 10900;
50 assert_equals(getComputedStyle(div).opacity, '1',
51 'set currentTime during endDelay');
52
53 anim.currentTime = 11100;
54 assert_equals(getComputedStyle(div).opacity, '1',
55 'set currentTime after endDelay');
56 }, 'change currentTime when fill is none and endDelay is positive');
57
58 test(function(t) {
59 var div = createDiv(t);
60 var anim = div.animate({ opacity: [ 1, 0 ] },
61 { duration: 10000,
62 endDelay: 1000,
63 fill: 'forwards' });
64 anim.currentTime = 5000;
65 assert_equals(getComputedStyle(div).opacity, '0.5',
66 'set currentTime during duration');
67
68 anim.currentTime = 9999;
69 assert_equals(getComputedStyle(div).opacity, '0.0001',
70 'set currentTime just a little before duration');
71
72 anim.currentTime = 10900;
73 assert_equals(getComputedStyle(div).opacity, '0',
74 'set currentTime during endDelay');
75
76 anim.currentTime = 11100;
77 assert_equals(getComputedStyle(div).opacity, '0',
78 'set currentTime after endDelay');
79 }, 'change currentTime when fill forwards and endDelay is positive');
80
81 test(function(t) {
82 var div = createDiv(t);
83 var anim = div.animate({ opacity: [ 1, 0 ] },
84 { duration: 10000, endDelay: -5000, fill: 'none' });
85
86 anim.currentTime = 1000;
87 assert_equals(getComputedStyle(div).opacity, '0.9',
88 'set currentTime before endTime');
89
90 anim.currentTime = 10000;
91 assert_equals(getComputedStyle(div).opacity, '1',
92 'set currentTime after endTime');
93 }, 'change currentTime when fill none and endDelay is negative');
94
95 test(function(t) {
96 var div = createDiv(t);
97 var anim = div.animate({ opacity: [ 1, 0 ] },
98 { duration: 10000,
99 endDelay: -5000,
100 fill: 'forwards' });
101
102 anim.currentTime = 1000;
103 assert_equals(getComputedStyle(div).opacity, '0.9',
104 'set currentTime before endTime');
105
106 anim.currentTime = 5000;
107 assert_equals(getComputedStyle(div).opacity, '0',
108 'set currentTime same as endTime');
109
110 anim.currentTime = 9999;
111 assert_equals(getComputedStyle(div).opacity, '0',
112 'set currentTime during duration');
113
114 anim.currentTime = 10000;
115 assert_equals(getComputedStyle(div).opacity, '0',
116 'set currentTime after endTime');
117 }, 'change currentTime when fill forwards and endDelay is negative');
118
119 test(function(t) {
120 var div = createDiv(t);
121 var anim = div.animate({ opacity: [ 0, 1 ] },
122 { duration: 10000,
123 direction: 'normal' });
124
125 anim.currentTime = 7000;
126 anim.effect.timing.direction = 'reverse';
127
128 assert_equals(getComputedStyle(div).opacity, '0.3',
129 'change direction from "normal" to "reverse"');
130 }, 'change direction from "normal" to "reverse"');
131
132 test(function(t) {
133 var div = createDiv(t);
134 var anim = div.animate({ opacity: [ 0, 1 ] },
135 { iterations: 2,
136 duration: 10000,
137 direction: 'normal' });
138
139 anim.currentTime = 17000;
140 anim.effect.timing.direction = 'alternate';
141
142 assert_equals(getComputedStyle(div).opacity, '0.3',
143 'change direction from "normal" to "alternate"');
144 }, 'change direction from "normal" to "alternate"');
145
146 test(function(t) {
147 var div = createDiv(t);
148 var anim = div.animate({ opacity: [ 0, 1 ] },
149 { iterations: 2,
150 duration: 10000,
151 direction: 'normal' });
152
153 anim.currentTime = 17000;
154 anim.effect.timing.direction = 'alternate-reverse';
155
156 assert_equals(getComputedStyle(div).opacity, '0.7',
157 'change direction from "normal" to "alternate-reverse"');
158 }, 'change direction from "normal" to "alternate-reverse"');
159
160 test(function(t) {
161 var div = createDiv(t);
162 var anim = div.animate({ opacity: [ 0, 1 ] },
163 { fill: 'backwards',
164 duration: 10000,
165 direction: 'normal' });
166
167 // test for a flip of value at the currentTime = 0
168 anim.effect.timing.direction = 'reverse';
169
170 assert_equals(getComputedStyle(div).opacity, '1',
171 'change direction from "normal" to "reverse" ' +
172 'at the starting point');
173 }, 'change direction from "normal" to "reverse"');
174
175 </script>
176 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-effect-timing/getAnimations.html ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-effect-timing/iterationStart.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698