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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/web-animations-api/keyframe-effect-iterable-keyframes.html

Issue 2142733002: Modified iterable keyframes test to use KeyframeEffect constructor and (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Add test expectations now that this test fails Created 4 years, 5 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/web-animations-api/element-animate-iterable-keyframes.html ('k') | third_party/WebKit/LayoutTests/web-animations-api/keyframe-effect-iterable-keyframes-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 <meta charset='utf-8'>
3 <title>Test that KeyframeEffect can take iterable objects as keyframes</title>
4 <link rel='help' href='https://w3c.github.io/web-animations/#processing-a-keyfra mes-argument'>
2 <script src="../resources/testharness.js"></script> 5 <script src="../resources/testharness.js"></script>
3 <script src="../resources/testharnessreport.js"></script> 6 <script src="../resources/testharnessreport.js"></script>
4 <body></body> 7 <body></body>
5 <script> 8 <script>
6 function assertAnimationEffect({keyframes, expect}) { 9 function assertAnimationEffect({keyframes, expect}) {
7 var target = document.createElement('target'); 10 var effect = new KeyframeEffect(null, keyframes);
8 document.body.appendChild(target); 11 var frames = effect.getKeyframes();
9 var animation = target.animate(keyframes, {duration: 1, fill: 'forwards'}); 12 for (let i = 0; i < expect.length; i++) {
10 animation.pause(); 13 assert_equals(frames[i].computedOffset, expect[i].at);
11 for (var {at, is} of expect) { 14 for (var property in expect[i].is)
12 animation.currentTime = at; 15 assert_equals(frames[i][property], expect[i].is[property],
13 for (var property in is) 16 » `${property} is ${expect[i].is[property]} at ${expect[i].at}`);
14 assert_equals(getComputedStyle(target)[property], is[property], `${propert y} is ${is[property]} at ${at}`);
15 } 17 }
16 target.remove(); 18 return frames;
17 } 19 }
18 20
19 function createIterable(iterations) { 21 function createIterable(iterations) {
20 return { 22 return {
21 [Symbol.iterator]() { 23 [Symbol.iterator]() {
22 var i = 0; 24 var i = 0;
23 return {next: () => iterations[i++]}; 25 return {next: () => iterations[i++]};
24 }, 26 },
25 }; 27 };
26 } 28 }
27 29
28 test(() => { 30 test(() => {
29 assertAnimationEffect({ 31 assertAnimationEffect({
30 keyframes: createIterable([ 32 keyframes: createIterable([
31 {done: false, value: {left: '100px'}}, 33 {done: false, value: {left: '100px'}},
32 {done: false, value: {left: '300px'}}, 34 {done: false, value: {left: '300px'}},
33 {done: false, value: {left: '200px'}}, 35 {done: false, value: {left: '200px'}},
34 {done: true}, 36 {done: true},
35 ]), 37 ]),
36 expect: [ 38 expect: [
37 {at: 0, is: {left: '100px'}}, 39 {at: 0, is: {left: '100px'}},
38 {at: 0.25, is: {left: '200px'}},
39 {at: 0.5, is: {left: '300px'}}, 40 {at: 0.5, is: {left: '300px'}},
40 {at: 0.75, is: {left: '250px'}},
41 {at: 1, is: {left: '200px'}}, 41 {at: 1, is: {left: '200px'}},
42 ], 42 ],
43 }); 43 });
44 }, 'Custom iterator with basic keyframes.'); 44 }, 'Custom iterator with basic keyframes.');
45 45
46 test(() => { 46 test(() => {
47 var keyframes = createIterable([ 47 var keyframes = createIterable([
48 {done: false, value: {left: '100px'}}, 48 {done: false, value: {left: '100px'}},
49 {done: false, value: {left: '300px'}}, 49 {done: false, value: {left: '300px'}},
50 {done: false, value: {left: '200px'}}, 50 {done: false, value: {left: '200px'}},
51 {done: true}, 51 {done: true},
52 ]); 52 ]);
53 keyframes.easing = 'ease-in-out'; 53 keyframes.easing = 'ease-in-out';
54 keyframes.offset = '0.1'; 54 keyframes.offset = '0.1';
55 assertAnimationEffect({ 55 let frames = assertAnimationEffect({
56 keyframes, 56 keyframes,
57 expect: [ 57 expect: [
58 {at: 0, is: {left: '100px'}}, 58 {at: 0, is: {left: '100px'}},
59 {at: 0.25, is: {left: '200px'}},
60 {at: 0.5, is: {left: '300px'}}, 59 {at: 0.5, is: {left: '300px'}},
61 {at: 0.75, is: {left: '250px'}},
62 {at: 1, is: {left: '200px'}}, 60 {at: 1, is: {left: '200px'}},
63 ], 61 ],
64 }); 62 });
63 assert_equals(frames[0].easing, 'linear');
64 assert_equals(frames[0].offset, null);
65 }, 'easing and offset are ignored on iterable objects.'); 65 }, 'easing and offset are ignored on iterable objects.');
66 66
67 test(() => { 67 test(() => {
68 assertAnimationEffect({ 68 assertAnimationEffect({
69 keyframes: createIterable([ 69 keyframes: createIterable([
70 {done: false, value: {left: '100px', top: '200px'}}, 70 {done: false, value: {left: '100px', top: '200px'}},
71 {done: false, value: {left: '300px'}}, 71 {done: false, value: {left: '300px'}},
72 {done: false, value: {left: '200px', top: '100px'}}, 72 {done: false, value: {left: '200px', top: '100px'}},
73 {done: true}, 73 {done: true},
74 ]), 74 ]),
75 expect: [ 75 expect: [
76 {at: 0, is: {left: '100px', top: '200px'}}, 76 {at: 0, is: {left: '100px', top: '200px'}},
77 {at: 0.25, is: {left: '200px', top: '175px'}}, 77 {at: 0.5, is: {left: '300px'}},
78 {at: 0.5, is: {left: '300px', top: '150px'}},
79 {at: 0.75, is: {left: '250px', top: '125px'}},
80 {at: 1, is: {left: '200px', top: '100px'}}, 78 {at: 1, is: {left: '200px', top: '100px'}},
81 ], 79 ],
82 }); 80 });
83 }, 'Custom iterator with multiple properties specified.'); 81 }, 'Custom iterator with multiple properties specified.');
84 82
85 test(() => { 83 test(() => {
86 assertAnimationEffect({ 84 assertAnimationEffect({
87 keyframes: createIterable([ 85 keyframes: createIterable([
88 {done: false, value: {left: '100px'}}, 86 {done: false, value: {left: '100px'}},
89 {done: false, value: {left: '250px', offset: 0.75}}, 87 {done: false, value: {left: '250px', offset: 0.75}},
90 {done: false, value: {left: '200px'}}, 88 {done: false, value: {left: '200px'}},
91 {done: true}, 89 {done: true},
92 ]), 90 ]),
93 expect: [ 91 expect: [
94 {at: 0, is: {left: '100px'}}, 92 {at: 0, is: {left: '100px'}},
95 {at: 0.25, is: {left: '150px'}},
96 {at: 0.5, is: {left: '200px'}},
97 {at: 0.75, is: {left: '250px'}}, 93 {at: 0.75, is: {left: '250px'}},
98 {at: 1, is: {left: '200px'}}, 94 {at: 1, is: {left: '200px'}},
99 ], 95 ],
100 }); 96 });
101 }, 'Custom iterator with offset specified.'); 97 }, 'Custom iterator with offset specified.');
102 98
103 test(() => { 99 test(() => {
104 assert_throws({name: 'TypeError'}, () => { 100 assert_throws({name: 'TypeError'}, () => {
105 assertAnimationEffect({ 101 assertAnimationEffect({
106 keyframes: createIterable([ 102 keyframes: createIterable([
107 {done: false, value: {left: '100px'}}, 103 {done: false, value: {left: '100px'}},
108 {done: false, value: 1234}, 104 {done: false, value: 1234},
109 {done: false, value: {left: '200px'}}, 105 {done: false, value: {left: '200px'}},
110 {done: true}, 106 {done: true},
111 ]), 107 ]),
112 expect: [], 108 expect: [],
113 }); 109 });
114 }); 110 });
115 }, 'Custom iterator with non object keyframe should throw.'); 111 }, 'Custom iterator with non object keyframe should throw.');
116 112
117 test(() => { 113 test(() => {
118 assert_throws({name: 'TypeError'}, () => { 114 assertAnimationEffect({
119 assertAnimationEffect({ 115 keyframes: createIterable([
120 keyframes: createIterable([ 116 {done: false, value: {left: ['100px', '200px']}},
121 {done: false, value: {left: ['100px', '200px']}}, 117 {done: true},
122 {done: true}, 118 ]),
123 ]), 119 expect: [{at: 1, is: {left: "100px,200px"}}],
124 expect: [],
125 });
126 }); 120 });
127 }, 'Custom iterator with value list in keyframe should throw.'); 121 }, 'Custom iterator with value list in keyframe should give bizarre string repre sentation of list.');
128 </script> 122 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/web-animations-api/element-animate-iterable-keyframes.html ('k') | third_party/WebKit/LayoutTests/web-animations-api/keyframe-effect-iterable-keyframes-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698