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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: pkg/polymer/lib/elements/web-animations-js/test/testcases/impl-test-from-css-value.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 10 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « pkg/polymer/lib/elements/web-animations-js/test/testcases/disabled-test-compositing-order.html ('k') | pkg/polymer/lib/elements/web-animations-js/test/testcases/impl-test-paced-timing-function.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: pkg/polymer/lib/elements/web-animations-js/test/testcases/impl-test-from-css-value.html
diff --git a/pkg/polymer/lib/elements/web-animations-js/test/testcases/impl-test-from-css-value.html b/pkg/polymer/lib/elements/web-animations-js/test/testcases/impl-test-from-css-value.html
new file mode 100644
index 0000000000000000000000000000000000000000..22dfc7ddc3d3255ba69f924b30325c9e96c6c9ae
--- /dev/null
+++ b/pkg/polymer/lib/elements/web-animations-js/test/testcases/impl-test-from-css-value.html
@@ -0,0 +1,219 @@
+<!--
+Copyright 2013 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!DOCTYPE html><meta charset="UTF-8">
+<style>
+div.anim {
+ position: relative;
+ left: 0px;
+}
+</style>
+
+<div id="anim" class="anim"></div>
+
+<script src="../bootstrap.js"></script>
+<script>
+'use strict';
+
+test(function() {
+
+function assert_object_equals(actual, expected, message) {
+ assert_equals(JSON.stringify(actual), JSON.stringify(expected), message);
+}
+function assert_shadow_equals(actual, expected, message) {
+ assert_not_equals(typeof actual, 'undefined', 'actual not undefined: ' + message);
+ assert_equals(actual.length, expected.length, 'actual and expected lengths match: ' + message);
+ for (var i = 0; i < expected.length; i++) {
+ var a = actual[i];
+ var e = expected[i];
+
+ // hOffset and vOffset are always required
+ assert_object_equals(a['hOffset'], e['hOffset'], 'hOffset matches: ' + message);
+ assert_object_equals(a['vOffset'], e['vOffset'], 'vOffset matches: ' + message);
+
+ // Inset is always set
+ if (typeof e['inset'] != 'undefined')
+ assert_equals(a['inset'], e['inset'], 'inset matches: ' + message);
+
+ if (typeof e['color'] != 'undefined')
+ assert_array_equals(a['color'], e['color'], 'color matches: ' + message);
+
+ if (typeof e['blur'] != 'undefined')
+ assert_object_equals(a['blur'], e['blur'], 'blur matches: ' + message);
+
+ if (typeof e['spread'] != 'undefined')
+ assert_object_equals(a['spread'], e['spread'], 'spread matches: ' + message);
+ }
+}
+
+var shadowType = window._WebAnimationsTestingUtilities._types['textShadow'];
+
+// Test all the different color types as part of a shadow
+var expected = [{
+ color: [255, 0, 0, 1.0],
+ hOffset: {px: 10},
+ vOffset: {px: 15},
+ blur: {px: 5},
+ inset: false
+}];
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px red'), expected, '10px 15px 5px red');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgba(255, 0, 0, 1.0)'), expected, '10px 15px 5px rgba(255, 0, 0, 1.0)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgba(100%, 0, 0, 1.0)'), expected, '10px 15px 5px rgba(100%, 0, 0, 1.0)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgb(255, 0, 0)'), expected, '10px 15px 5px rgb(255, 0, 0)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgb(100%, 0, 0)'), expected, '10px 15px 5px rgb(100%, 0, 0)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px hsl(0, 100%, 50%)'), expected, '10px 15px 5px hsl(0, 100%, 50%)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px hsla(0, 100%, 50%, 1.0)'), expected, '10px 15px 5px hsla(0, 100%, 50%, 1.0)');
+assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px #ff0000'), expected, '10px 15px 5px #ff0000');
+assert_shadow_equals(shadowType.fromCssValue('red 10px 15px 5px'), expected, 'red 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('rgba(255, 0, 0, 1.0) 10px 15px 5px'), expected, 'rgba(255, 0, 0, 1.0) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('rgba(100%, 0, 0, 1.0) 10px 15px 5px'), expected, 'rgba(100%, 0, 0, 1.0) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('rgb(255, 0, 0) 10px 15px 5px'), expected, 'rgb(255, 0, 0) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('rgb(100%, 0, 0) 10px 15px 5px'), expected, 'rgb(100%, 0, 0) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('hsl(0, 100%, 50%) 10px 15px 5px'), expected, 'hsl(0, 100%, 50%) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('hsla(0, 100%, 50%, 1.0) 10px 15px 5px'), expected, 'hsla(0, 100%, 50%, 1.0) 10px 15px 5px');
+assert_shadow_equals(shadowType.fromCssValue('#ff0000 10px 15px 5px'), expected, '#ff0000 10px 15px 5px');
+
+
+// [ <color>? <offset-x> <offset-y> <blur-radius>? ]
+// [ <offset-x> <offset-y> <blur-radius>? <color>? ]
+// [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]
+
+
+assert_shadow_equals(
+ shadowType.fromCssValue('10px 15px'), [{hOffset:{px: 10}, vOffset:{px: 15}}],
+ 'just offsets');
+assert_shadow_equals(
+ shadowType.fromCssValue('10px 15px 5px'),
+ [{hOffset:{px: 10}, vOffset:{px: 15}, blur: {px: 5}}],
+ 'no spread');
+
+// Test some 'real world examples', taken from the MDN documentation
+assert_shadow_equals(
+ shadowType.fromCssValue('1px 2px 3px black, 0 0 1em blue, 0 0 0.2em blue'),
+ [{hOffset:{px: 1}, vOffset:{px: 2}, blur: {px: 3}, color: [0, 0, 0, 1.0]},
+ {hOffset:{'': 0}, vOffset:{'': 0}, blur: {em: 1}, color: [0, 0, 255, 1.0]},
+ {hOffset:{'': 0}, vOffset:{'': 0}, blur: {em: 0.2}, color: [0, 0, 255, 1.0]}],
+ 'MDN Example 1');
+
+assert_shadow_equals(
+ shadowType.fromCssValue('rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px, rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px'),
+ [{hOffset:{px: -1}, vOffset:{'': 0}, color: [0, 0, 0, 0.1]},
+ {hOffset:{'': 0}, vOffset:{px: -1}, color: [0, 0, 0, 0.1]},
+ {hOffset:{px: 1}, vOffset:{'': 0}, color: [255, 255, 255, 0.1]},
+ {hOffset:{'': 0}, vOffset:{px: 1}, color: [255, 255, 255, 0.1]},
+ {hOffset:{px: -1}, vOffset:{px: -1}, color: [0, 0, 0, 0.1]},
+ {hOffset:{px: 1}, vOffset:{px: 1}, color: [255, 255, 255, 0.1]}],
+ 'MDN Example 2');
+
+assert_shadow_equals(
+ shadowType.fromCssValue('64px 64px 12px 40px rgba(0,0,0,0.4), 12px 12px 0px 8px rgba(0,0,0,0.4) inset'),
+ [{hOffset:{px: 64}, vOffset:{px: 64}, blur: {px: 12}, spread: {px: 40}, color: [0, 0, 0, 0.4]},
+ {hOffset:{px: 12}, vOffset:{px: 12}, blur: {px: 0}, spread: {px: 8}, color: [0, 0, 0, 0.4], inset: true}],
+ 'MDN Example 3');
+
+assert_shadow_equals(
+ shadowType.fromCssValue('10px 10px 5px #888'),
+ [{hOffset:{px: 10}, vOffset:{px: 10}, blur: {px: 5}, color: [136, 136, 136, 1.0]}],
+ 'MDN Example 4');
+
+}, 'shadowType.cssFromValue');
+
+test(function() {
+
+var colorType = window._WebAnimationsTestingUtilities._types.color;
+
+assert_array_equals(colorType.fromCssValue('#000000'), [0, 0, 0, 1.0], '#000000');
+assert_array_equals(colorType.fromCssValue('#000'), [0, 0, 0, 1.0], '#000');
+assert_array_equals(colorType.fromCssValue('#123456'), [18, 52, 86, 1.0], '#123456');
+assert_array_equals(colorType.fromCssValue('#123'), [17, 34, 51, 1.0], '#123');
+assert_array_equals(colorType.fromCssValue('#ffffff'), [255, 255, 255, 1.0], '#ffffff');
+assert_array_equals(colorType.fromCssValue('#fff'), [255, 255, 255, 1.0], '#fff');
+assert_array_equals(colorType.fromCssValue('#ABCDEF'), [171, 205, 239, 1.0], '#ABCDEF');
+assert_array_equals(colorType.fromCssValue('#ABC'), [170, 187, 204, 1.0], '#ABC');
+
+assert_array_equals(colorType.fromCssValue('rgb(0, 0, 0)'), [0, 0, 0, 1.0], 'rgb(0, 0, 0)');
+assert_array_equals(colorType.fromCssValue('rgb(0,0,0)'), [0, 0, 0, 1.0], 'rgb(0,0,0)');
+assert_array_equals(colorType.fromCssValue('rgb(0%, 0%, 0%)'), [0, 0, 0, 1.0], 'rgb(0%, 0%, 0%)');
+assert_array_equals(colorType.fromCssValue('rgb(0%,0%,0%)'), [0, 0, 0, 1.0], 'rgb(0%,0%,0%)');
+assert_array_equals(colorType.fromCssValue('rgb(1, 2, 3)'), [1, 2, 3, 1.0], 'rgb(1, 2, 3)');
+assert_array_equals(colorType.fromCssValue('rgb(10%, 20%, 30%)'), [26, 51, 77, 1.0], 'rgb(10%, 20%, 30%)');
+assert_array_equals(colorType.fromCssValue('rgb(255, 255, 255)'), [255, 255, 255, 1.0], 'rgb(255, 255, 255)');
+assert_array_equals(colorType.fromCssValue('rgb(100%, 100%, 100%)'), [255, 255, 255, 1.0], 'rgb(100%, 100%, 100%)');
+
+// Color cliping or RGB - 4.2.1 - RGB color values - Example 6
+// em { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
+// em { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
+// em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
+assert_array_equals(colorType.fromCssValue('rgb(300, 0, 0)'), [255, 0, 0, 1.0], 'rgb(255, 0, 0)');
+assert_array_equals(colorType.fromCssValue('rgb(255, -10, 0)'), [255, 0, 0, 1.0], 'rgb(255, -10, 0)');
+assert_array_equals(colorType.fromCssValue('rgb(110%, 0%, 0%)'), [255, 0, 0, 1.0], 'rgb(110%, 0, 0)');
+
+assert_array_equals(colorType.fromCssValue('rgba(0, 0, 0, 0)'), [0, 0, 0, 0.0], 'rgba(0, 0, 0, 0)');
+assert_array_equals(colorType.fromCssValue('rgba(0,0,0,0)'), [0, 0, 0, 0.0], 'rgba(0,0,0,0)');
+assert_array_equals(colorType.fromCssValue('rgba(1, 2, 3, 0.4)'), [1, 2, 3, 0.4], 'rgba(1, 2, 3, 0.4)');
+assert_array_equals(colorType.fromCssValue('rgba(1,2,3,0.4)'), [1, 2, 3, 0.4], 'rgba(1,2,3,0.4)');
+assert_array_equals(colorType.fromCssValue('rgba(255, 255, 255, 0.5)'), [255, 255, 255, 0.5], 'rgba(255, 255, 255, 0.5)');
+
+// hsl and hsla converted to RGB
+var hsl2rgb = window._WebAnimationsTestingUtilities._hsl2rgb;
+assert_array_equals(hsl2rgb(0, 0, 100), [255, 255, 255]);
+assert_array_equals(hsl2rgb(0, 0, 75), [192, 192, 192]);
+assert_array_equals(hsl2rgb(0, 0, 50), [128, 128, 128]);
+assert_array_equals(hsl2rgb(0, 0, 0), [0, 0, 0]);
+assert_array_equals(hsl2rgb(0, 100, 50), [255, 0, 0]);
+assert_array_equals(hsl2rgb(0, 100, 25), [128, 0, 0]);
+assert_array_equals(hsl2rgb(60, 100, 50), [255, 255, 0]);
+assert_array_equals(hsl2rgb(60, 100, 25), [128, 128, 0]);
+assert_array_equals(hsl2rgb(120, 100, 50), [0, 255, 0]);
+assert_array_equals(hsl2rgb(120, 100, 25), [0, 128, 0]);
+assert_array_equals(hsl2rgb(-240, 100, 50), [0, 255, 0]);
+assert_array_equals(hsl2rgb(480, 100, 25), [0, 128, 0]);
+assert_array_equals(hsl2rgb(180, 100, 50), [0, 255, 255]);
+assert_array_equals(hsl2rgb(180, 100, 25), [0, 128, 128]);
+assert_array_equals(hsl2rgb(-180, 100, 50), [0, 255, 255]);
+assert_array_equals(hsl2rgb(540, 100, 25), [0, 128, 128]);
+assert_array_equals(hsl2rgb(240, 100, 50), [0, 0, 255]);
+assert_array_equals(hsl2rgb(240, 100, 25), [0, 0, 128]);
+assert_array_equals(hsl2rgb(300, 100, 50), [255, 0, 255]);
+assert_array_equals(hsl2rgb(300, 100, 25), [128, 0, 128]);
+
+// hsl
+// * { color: hsl(0, 100%, 50%) } /* red */
+// * { color: hsl(120, 100%, 50%) } /* lime */
+// * { color: hsl(120, 100%, 25%) } /* dark green */
+// * { color: hsl(120, 100%, 75%) } /* light green */
+// * { color: hsl(120, 75%, 75%) } /* pastel green, and so on */
+assert_array_equals(colorType.fromCssValue('hsl(0, 0%, 100%)'), [255, 255, 255, 1.0], 'hsl(0, 0%, 100%)');
+assert_array_equals(colorType.fromCssValue('hsl(0,0%,75%)'), [192, 192, 192, 1.0], 'hsl(0,0%,75%)');
+assert_array_equals(colorType.fromCssValue('hsl(-0, 100%, 50%)'), [255, 0, 0, 1.0], 'hsl(0, 100%, 50%)');
+assert_array_equals(colorType.fromCssValue('hsla(120, 100%, 50%, 0.0)'), [0, 255, 0, 0.0], 'hsl(120, 100%, 50%, 0.0)');
+assert_array_equals(colorType.fromCssValue('hsla(120, 100%, 25%, 0.25)'), [0, 128, 0, 0.25], 'hsl(120, 100%, 25%, 0.25)');
+assert_array_equals(colorType.fromCssValue('hsla(180, 100%, 50%, 0.5)'), [0, 255, 255, 0.5], 'hsl(180, 100%, 50%, 0.5)');
+assert_array_equals(colorType.fromCssValue('hsla(180, 100%, 25%, 0.75)'), [0, 128, 128, 0.75], 'hsl(180, 100%, 25%, 0.75)');
+assert_array_equals(colorType.fromCssValue('hsla(240, 100%, 50%, 1.0)'), [0, 0, 255, 1.0], 'hsl(240, 100%, 50%, 1.0)');
+assert_array_equals(colorType.fromCssValue('hsla(240, 100%, 25%, 1.25)'), [0, 0, 128, 1.0], 'hsl(240, 100%, 25%, 1.25)');
+
+assert_array_equals(colorType.fromCssValue('transparent'), [0, 0, 0, 0], 'transparent');
+
+assert_equals(colorType.fromCssValue('#00'), undefined);
+assert_equals(colorType.fromCssValue('#0f0g'), undefined);
+assert_equals(colorType.fromCssValue('rgba(0, abc, 0, 0)'), undefined);
+assert_equals(colorType.fromCssValue('asdf(0, 0, 0, 0)'), undefined);
+
+// currentColor ????
+}, 'colorType.cssFromValue');
+
+</script>
« no previous file with comments | « pkg/polymer/lib/elements/web-animations-js/test/testcases/disabled-test-compositing-order.html ('k') | pkg/polymer/lib/elements/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