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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: bower_components/web-animations-js/test/testcases/impl-test-from-css-value.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 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 | « bower_components/web-animations-js/test/testcases/impl-test-deprecation.html ('k') | bower_components/web-animations-js/test/testcases/impl-test-paced-timing-function.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 <!--
2 Copyright 2013 Google Inc. All Rights Reserved.
3
4 Licensed under the Apache License, Version 2.0 (the "License");
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
15 -->
16
17 <!DOCTYPE html><meta charset="UTF-8">
18 <style>
19 div.anim {
20 position: relative;
21 left: 0px;
22 }
23 </style>
24
25 <div id="anim" class="anim"></div>
26
27 <script src="../bootstrap.js"></script>
28 <script>
29 'use strict';
30
31 test(function() {
32
33 function assert_object_equals(actual, expected, message) {
34 assert_equals(JSON.stringify(actual), JSON.stringify(expected), message);
35 }
36 function assert_shadow_equals(actual, expected, message) {
37 assert_not_equals(typeof actual, 'undefined', 'actual not undefined: ' + messa ge);
38 assert_equals(actual.length, expected.length, 'actual and expected lengths mat ch: ' + message);
39 for (var i = 0; i < expected.length; i++) {
40 var a = actual[i];
41 var e = expected[i];
42
43 // hOffset and vOffset are always required
44 assert_object_equals(a['hOffset'], e['hOffset'], 'hOffset matches: ' + messa ge);
45 assert_object_equals(a['vOffset'], e['vOffset'], 'vOffset matches: ' + messa ge);
46
47 // Inset is always set
48 if (typeof e['inset'] != 'undefined')
49 assert_equals(a['inset'], e['inset'], 'inset matches: ' + message);
50
51 if (typeof e['color'] != 'undefined')
52 assert_array_equals(a['color'], e['color'], 'color matches: ' + message);
53
54 if (typeof e['blur'] != 'undefined')
55 assert_object_equals(a['blur'], e['blur'], 'blur matches: ' + message);
56
57 if (typeof e['spread'] != 'undefined')
58 assert_object_equals(a['spread'], e['spread'], 'spread matches: ' + messag e);
59 }
60 }
61
62 var shadowType = window._WebAnimationsTestingUtilities._types['textShadow'];
63
64 // Test all the different color types as part of a shadow
65 var expected = [{
66 color: [255, 0, 0, 1.0],
67 hOffset: {px: 10},
68 vOffset: {px: 15},
69 blur: {px: 5},
70 inset: false
71 }];
72 assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px red'), expected, '10 px 15px 5px red');
73 assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgba(255, 0, 0, 1.0) '), expected, '10px 15px 5px rgba(255, 0, 0, 1.0)');
74 assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgba(100%, 0, 0, 1.0 )'), expected, '10px 15px 5px rgba(100%, 0, 0, 1.0)');
75 assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgb(255, 0, 0)'), ex pected, '10px 15px 5px rgb(255, 0, 0)');
76 assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgb(100%, 0, 0)'), e xpected, '10px 15px 5px rgb(100%, 0, 0)');
77 assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px hsl(0, 100%, 50%)'), expected, '10px 15px 5px hsl(0, 100%, 50%)');
78 assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px hsla(0, 100%, 50%, 1 .0)'), expected, '10px 15px 5px hsla(0, 100%, 50%, 1.0)');
79 assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px #ff0000'), expected, '10px 15px 5px #ff0000');
80 assert_shadow_equals(shadowType.fromCssValue('red 10px 15px 5px'), expected, 're d 10px 15px 5px');
81 assert_shadow_equals(shadowType.fromCssValue('rgba(255, 0, 0, 1.0) 10px 15px 5px '), expected, 'rgba(255, 0, 0, 1.0) 10px 15px 5px');
82 assert_shadow_equals(shadowType.fromCssValue('rgba(100%, 0, 0, 1.0) 10px 15px 5p x'), expected, 'rgba(100%, 0, 0, 1.0) 10px 15px 5px');
83 assert_shadow_equals(shadowType.fromCssValue('rgb(255, 0, 0) 10px 15px 5px'), ex pected, 'rgb(255, 0, 0) 10px 15px 5px');
84 assert_shadow_equals(shadowType.fromCssValue('rgb(100%, 0, 0) 10px 15px 5px'), e xpected, 'rgb(100%, 0, 0) 10px 15px 5px');
85 assert_shadow_equals(shadowType.fromCssValue('hsl(0, 100%, 50%) 10px 15px 5px'), expected, 'hsl(0, 100%, 50%) 10px 15px 5px');
86 assert_shadow_equals(shadowType.fromCssValue('hsla(0, 100%, 50%, 1.0) 10px 15px 5px'), expected, 'hsla(0, 100%, 50%, 1.0) 10px 15px 5px');
87 assert_shadow_equals(shadowType.fromCssValue('#ff0000 10px 15px 5px'), expected, '#ff0000 10px 15px 5px');
88
89
90 // [ <color>? <offset-x> <offset-y> <blur-radius>? ]
91 // [ <offset-x> <offset-y> <blur-radius>? <color>? ]
92 // [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]
93
94
95 assert_shadow_equals(
96 shadowType.fromCssValue('10px 15px'), [{hOffset:{px: 10}, vOffset:{px: 15}}],
97 'just offsets');
98 assert_shadow_equals(
99 shadowType.fromCssValue('10px 15px 5px'),
100 [{hOffset:{px: 10}, vOffset:{px: 15}, blur: {px: 5}}],
101 'no spread');
102
103 // Test some 'real world examples', taken from the MDN documentation
104 assert_shadow_equals(
105 shadowType.fromCssValue('1px 2px 3px black, 0 0 1em blue, 0 0 0.2em blue'),
106 [{hOffset:{px: 1}, vOffset:{px: 2}, blur: {px: 3}, color: [0, 0, 0, 1.0]},
107 {hOffset:{'': 0}, vOffset:{'': 0}, blur: {em: 1}, color: [0, 0, 255, 1.0]},
108 {hOffset:{'': 0}, vOffset:{'': 0}, blur: {em: 0.2}, color: [0, 0, 255, 1.0]}],
109 'MDN Example 1');
110
111 assert_shadow_equals(
112 shadowType.fromCssValue('rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px, rgba(2 55,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, rgba(0,0,0,0.1) -1px -1px, r gba(255,255,255,0.1) 1px 1px'),
113 [{hOffset:{px: -1}, vOffset:{'': 0}, color: [0, 0, 0, 0.1]},
114 {hOffset:{'': 0}, vOffset:{px: -1}, color: [0, 0, 0, 0.1]},
115 {hOffset:{px: 1}, vOffset:{'': 0}, color: [255, 255, 255, 0.1]},
116 {hOffset:{'': 0}, vOffset:{px: 1}, color: [255, 255, 255, 0.1]},
117 {hOffset:{px: -1}, vOffset:{px: -1}, color: [0, 0, 0, 0.1]},
118 {hOffset:{px: 1}, vOffset:{px: 1}, color: [255, 255, 255, 0.1]}],
119 'MDN Example 2');
120
121 assert_shadow_equals(
122 shadowType.fromCssValue('64px 64px 12px 40px rgba(0,0,0,0.4), 12px 12px 0px 8px rgba(0,0,0,0.4) inset'),
123 [{hOffset:{px: 64}, vOffset:{px: 64}, blur: {px: 12}, spread: {px: 40}, color: [0, 0, 0, 0.4]},
124 {hOffset:{px: 12}, vOffset:{px: 12}, blur: {px: 0}, spread: {px: 8}, color: [0 , 0, 0, 0.4], inset: true}],
125 'MDN Example 3');
126
127 assert_shadow_equals(
128 shadowType.fromCssValue('10px 10px 5px #888'),
129 [{hOffset:{px: 10}, vOffset:{px: 10}, blur: {px: 5}, color: [136, 136, 136, 1.0 ]}],
130 'MDN Example 4');
131
132 }, 'shadowType.cssFromValue');
133
134 test(function() {
135
136 var colorType = window._WebAnimationsTestingUtilities._types.color;
137
138 assert_array_equals(colorType.fromCssValue('#000000'), [0, 0, 0, 1.0], '#000000' );
139 assert_array_equals(colorType.fromCssValue('#000'), [0, 0, 0, 1.0], '#000');
140 assert_array_equals(colorType.fromCssValue('#123456'), [18, 52, 86, 1.0], '#1234 56');
141 assert_array_equals(colorType.fromCssValue('#123'), [17, 34, 51, 1.0], '#123');
142 assert_array_equals(colorType.fromCssValue('#ffffff'), [255, 255, 255, 1.0], '#f fffff');
143 assert_array_equals(colorType.fromCssValue('#fff'), [255, 255, 255, 1.0], '#fff' );
144 assert_array_equals(colorType.fromCssValue('#ABCDEF'), [171, 205, 239, 1.0], '#A BCDEF');
145 assert_array_equals(colorType.fromCssValue('#ABC'), [170, 187, 204, 1.0], '#ABC' );
146
147 assert_array_equals(colorType.fromCssValue('rgb(0, 0, 0)'), [0, 0, 0, 1.0], 'rgb (0, 0, 0)');
148 assert_array_equals(colorType.fromCssValue('rgb(0,0,0)'), [0, 0, 0, 1.0], 'rgb(0 ,0,0)');
149 assert_array_equals(colorType.fromCssValue('rgb(0%, 0%, 0%)'), [0, 0, 0, 1.0], ' rgb(0%, 0%, 0%)');
150 assert_array_equals(colorType.fromCssValue('rgb(0%,0%,0%)'), [0, 0, 0, 1.0], 'rg b(0%,0%,0%)');
151 assert_array_equals(colorType.fromCssValue('rgb(1, 2, 3)'), [1, 2, 3, 1.0], 'rgb (1, 2, 3)');
152 assert_array_equals(colorType.fromCssValue('rgb(10%, 20%, 30%)'), [26, 51, 77, 1 .0], 'rgb(10%, 20%, 30%)');
153 assert_array_equals(colorType.fromCssValue('rgb(255, 255, 255)'), [255, 255, 255 , 1.0], 'rgb(255, 255, 255)');
154 assert_array_equals(colorType.fromCssValue('rgb(100%, 100%, 100%)'), [255, 255, 255, 1.0], 'rgb(100%, 100%, 100%)');
155
156 // Color cliping or RGB - 4.2.1 - RGB color values - Example 6
157 // em { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
158 // em { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
159 // em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
160 assert_array_equals(colorType.fromCssValue('rgb(300, 0, 0)'), [255, 0, 0, 1.0], 'rgb(255, 0, 0)');
161 assert_array_equals(colorType.fromCssValue('rgb(255, -10, 0)'), [255, 0, 0, 1.0] , 'rgb(255, -10, 0)');
162 assert_array_equals(colorType.fromCssValue('rgb(110%, 0%, 0%)'), [255, 0, 0, 1.0 ], 'rgb(110%, 0, 0)');
163
164 assert_array_equals(colorType.fromCssValue('rgba(0, 0, 0, 0)'), [0, 0, 0, 0.0], 'rgba(0, 0, 0, 0)');
165 assert_array_equals(colorType.fromCssValue('rgba(0,0,0,0)'), [0, 0, 0, 0.0], 'rg ba(0,0,0,0)');
166 assert_array_equals(colorType.fromCssValue('rgba(1, 2, 3, 0.4)'), [1, 2, 3, 0.4] , 'rgba(1, 2, 3, 0.4)');
167 assert_array_equals(colorType.fromCssValue('rgba(1,2,3,0.4)'), [1, 2, 3, 0.4], ' rgba(1,2,3,0.4)');
168 assert_array_equals(colorType.fromCssValue('rgba(255, 255, 255, 0.5)'), [255, 25 5, 255, 0.5], 'rgba(255, 255, 255, 0.5)');
169
170 // hsl and hsla converted to RGB
171 var hsl2rgb = window._WebAnimationsTestingUtilities._hsl2rgb;
172 assert_array_equals(hsl2rgb(0, 0, 100), [255, 255, 255]);
173 assert_array_equals(hsl2rgb(0, 0, 75), [192, 192, 192]);
174 assert_array_equals(hsl2rgb(0, 0, 50), [128, 128, 128]);
175 assert_array_equals(hsl2rgb(0, 0, 0), [0, 0, 0]);
176 assert_array_equals(hsl2rgb(0, 100, 50), [255, 0, 0]);
177 assert_array_equals(hsl2rgb(0, 100, 25), [128, 0, 0]);
178 assert_array_equals(hsl2rgb(60, 100, 50), [255, 255, 0]);
179 assert_array_equals(hsl2rgb(60, 100, 25), [128, 128, 0]);
180 assert_array_equals(hsl2rgb(120, 100, 50), [0, 255, 0]);
181 assert_array_equals(hsl2rgb(120, 100, 25), [0, 128, 0]);
182 assert_array_equals(hsl2rgb(-240, 100, 50), [0, 255, 0]);
183 assert_array_equals(hsl2rgb(480, 100, 25), [0, 128, 0]);
184 assert_array_equals(hsl2rgb(180, 100, 50), [0, 255, 255]);
185 assert_array_equals(hsl2rgb(180, 100, 25), [0, 128, 128]);
186 assert_array_equals(hsl2rgb(-180, 100, 50), [0, 255, 255]);
187 assert_array_equals(hsl2rgb(540, 100, 25), [0, 128, 128]);
188 assert_array_equals(hsl2rgb(240, 100, 50), [0, 0, 255]);
189 assert_array_equals(hsl2rgb(240, 100, 25), [0, 0, 128]);
190 assert_array_equals(hsl2rgb(300, 100, 50), [255, 0, 255]);
191 assert_array_equals(hsl2rgb(300, 100, 25), [128, 0, 128]);
192
193 // hsl
194 // * { color: hsl(0, 100%, 50%) } /* red */
195 // * { color: hsl(120, 100%, 50%) } /* lime */
196 // * { color: hsl(120, 100%, 25%) } /* dark green */
197 // * { color: hsl(120, 100%, 75%) } /* light green */
198 // * { color: hsl(120, 75%, 75%) } /* pastel green, and so on */
199 assert_array_equals(colorType.fromCssValue('hsl(0, 0%, 100%)'), [255, 255, 255, 1.0], 'hsl(0, 0%, 100%)');
200 assert_array_equals(colorType.fromCssValue('hsl(0,0%,75%)'), [192, 192, 192, 1.0 ], 'hsl(0,0%,75%)');
201 assert_array_equals(colorType.fromCssValue('hsl(-0, 100%, 50%)'), [255, 0, 0, 1. 0], 'hsl(0, 100%, 50%)');
202 assert_array_equals(colorType.fromCssValue('hsla(120, 100%, 50%, 0.0)'), [0, 255 , 0, 0.0], 'hsl(120, 100%, 50%, 0.0)');
203 assert_array_equals(colorType.fromCssValue('hsla(120, 100%, 25%, 0.25)'), [0, 12 8, 0, 0.25], 'hsl(120, 100%, 25%, 0.25)');
204 assert_array_equals(colorType.fromCssValue('hsla(180, 100%, 50%, 0.5)'), [0, 255 , 255, 0.5], 'hsl(180, 100%, 50%, 0.5)');
205 assert_array_equals(colorType.fromCssValue('hsla(180, 100%, 25%, 0.75)'), [0, 12 8, 128, 0.75], 'hsl(180, 100%, 25%, 0.75)');
206 assert_array_equals(colorType.fromCssValue('hsla(240, 100%, 50%, 1.0)'), [0, 0, 255, 1.0], 'hsl(240, 100%, 50%, 1.0)');
207 assert_array_equals(colorType.fromCssValue('hsla(240, 100%, 25%, 1.25)'), [0, 0, 128, 1.0], 'hsl(240, 100%, 25%, 1.25)');
208
209 assert_array_equals(colorType.fromCssValue('transparent'), [0, 0, 0, 0], 'transp arent');
210
211 assert_equals(colorType.fromCssValue('#00'), undefined);
212 assert_equals(colorType.fromCssValue('#0f0g'), undefined);
213 assert_equals(colorType.fromCssValue('rgba(0, abc, 0, 0)'), undefined);
214 assert_equals(colorType.fromCssValue('asdf(0, 0, 0, 0)'), undefined);
215
216 // currentColor ????
217 }, 'colorType.cssFromValue');
218
219 </script>
OLDNEW
« no previous file with comments | « bower_components/web-animations-js/test/testcases/impl-test-deprecation.html ('k') | bower_components/web-animations-js/test/testcases/impl-test-paced-timing-function.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698