third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/animation-effect-timing/getComputedStyle.html - Issue 1899623002: Import latest web-platform-tests

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

Issue 1899623002: Import latest web-platform-tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: handle new failures Created 4 years, 8 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/web-platform-tests/web-animations/animation-effect-timing/getAnimations-expected.txt ('k') | third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/animation-effect-timing/getComputedStyle-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <meta charset=utf-8>	2 <meta charset=utf-8>

3 <title>getComputedStyle tests</title>	3 <title>getComputedStyle tests</title>

4 <link rel="help" href="http://w3c.github.io/web-animations/#animationeffecttimin g">	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" >	5 <link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org" >

6 <script src="../../../../resources/testharness.js"></script>	6 <script src="../../../../resources/testharness.js"></script>

7 <script src="../../../../resources/testharnessreport.js"></script>	7 <script src="../../../../resources/testharnessreport.js"></script>

8 <script src="../testcommon.js"></script>	8 <script src="../testcommon.js"></script>

9 <body>	9 <body>

10 <div id="log"></div>	10 <div id="log"></div>

11 <script>	11 <script>

12 'use strict';	12 'use strict';

13	13

14 test(function(t) {	14 test(function(t) {

15 var div = createDiv(t);	15 var div = createDiv(t);

16 var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);	16 var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);

17 anim.finish();	17 anim.finish();

18 assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');	18 assert_equals(getComputedStyle(div).opacity, '1', 'animation finished');

19 anim.effect.timing.duration *= 2;	19 anim.effect.timing.duration *= 2;

20 assert_equals(getComputedStyle(div).opacity, '0.5', 'set double duration');	20 assert_equals(getComputedStyle(div).opacity, '0.5', 'set double duration');

21 anim.effect.timing.duration = 0;	21 anim.effect.timing.duration = 0;

22 assert_equals(getComputedStyle(div).opacity, '1', 'set duration 0');	22 assert_equals(getComputedStyle(div).opacity, '1', 'set duration 0');

23 anim.effect.timing.duration = 'auto';	23 anim.effect.timing.duration = 'auto';

24 assert_equals(getComputedStyle(div).opacity, '1', 'set duration \'auto\'');	24 assert_equals(getComputedStyle(div).opacity, '1', 'set duration \'auto\'');

25 }, 'changed duration immediately updates its computed styles');	25 }, 'changed duration immediately updates its computed styles');

26	26

27 test(function(t) {	27 test(function(t) {

28 var div = createDiv(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);

29 var anim = div.animate({ opacity: [ 1, 0 ] },	42 var anim = div.animate({ opacity: [ 1, 0 ] },

30 { duration: 10000, endDelay: 1000, fill: 'none' });	43 { duration: 10000, endDelay: 1000, fill: 'none' });

31	44

32 anim.currentTime = 9000;	45 anim.currentTime = 9000;

33 assert_equals(getComputedStyle(div).opacity, '0.1',	46 assert_equals(getComputedStyle(div).opacity, '0.1',

34 'set currentTime during duration');	47 'set currentTime during duration');

35	48

36 anim.currentTime = 10900;	49 anim.currentTime = 10900;

37 assert_equals(getComputedStyle(div).opacity, '1',	50 assert_equals(getComputedStyle(div).opacity, '1',

38 'set currentTime during endDelay');	51 'set currentTime during endDelay');

(...skipping 57 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
96	109

97 anim.currentTime = 9999;	110 anim.currentTime = 9999;

98 assert_equals(getComputedStyle(div).opacity, '0',	111 assert_equals(getComputedStyle(div).opacity, '0',

99 'set currentTime during duration');	112 'set currentTime during duration');

100	113

101 anim.currentTime = 10000;	114 anim.currentTime = 10000;

102 assert_equals(getComputedStyle(div).opacity, '0',	115 assert_equals(getComputedStyle(div).opacity, '0',

103 'set currentTime after endTime');	116 'set currentTime after endTime');

104 }, 'change currentTime when fill forwards and endDelay is negative');	117 }, 'change currentTime when fill forwards and endDelay is negative');

105	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

106 </script>	175 </script>

107 </body>	176 </body>

OLD	NEW