OLD | NEW |
(Empty) | |
| 1 // Copyright 2014 Google Inc. All rights reserved. |
| 2 // |
| 3 // Licensed under the Apache License, Version 2.0 (the "License"); |
| 4 // you may not use this file except in compliance with the License. |
| 5 // You may obtain a copy of the License at |
| 6 // |
| 7 // http://www.apache.org/licenses/LICENSE-2.0 |
| 8 // |
| 9 // Unless required by applicable law or agreed to in writing, software |
| 10 // distributed under the License is distributed on an "AS IS" BASIS, |
| 11 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 12 // See the License for the specific language governing permissions and |
| 13 // limitations under the License. |
| 14 |
| 15 (function(shared, testing) { |
| 16 var shorthandToLonghand = { |
| 17 background: [ |
| 18 'backgroundImage', |
| 19 'backgroundPosition', |
| 20 'backgroundSize', |
| 21 'backgroundRepeat', |
| 22 'backgroundAttachment', |
| 23 'backgroundOrigin', |
| 24 'backgroundClip', |
| 25 'backgroundColor' |
| 26 ], |
| 27 border: [ |
| 28 'borderTopColor', |
| 29 'borderTopStyle', |
| 30 'borderTopWidth', |
| 31 'borderRightColor', |
| 32 'borderRightStyle', |
| 33 'borderRightWidth', |
| 34 'borderBottomColor', |
| 35 'borderBottomStyle', |
| 36 'borderBottomWidth', |
| 37 'borderLeftColor', |
| 38 'borderLeftStyle', |
| 39 'borderLeftWidth' |
| 40 ], |
| 41 borderBottom: [ |
| 42 'borderBottomWidth', |
| 43 'borderBottomStyle', |
| 44 'borderBottomColor' |
| 45 ], |
| 46 borderColor: [ |
| 47 'borderTopColor', |
| 48 'borderRightColor', |
| 49 'borderBottomColor', |
| 50 'borderLeftColor' |
| 51 ], |
| 52 borderLeft: [ |
| 53 'borderLeftWidth', |
| 54 'borderLeftStyle', |
| 55 'borderLeftColor' |
| 56 ], |
| 57 borderRadius: [ |
| 58 'borderTopLeftRadius', |
| 59 'borderTopRightRadius', |
| 60 'borderBottomRightRadius', |
| 61 'borderBottomLeftRadius' |
| 62 ], |
| 63 borderRight: [ |
| 64 'borderRightWidth', |
| 65 'borderRightStyle', |
| 66 'borderRightColor' |
| 67 ], |
| 68 borderTop: [ |
| 69 'borderTopWidth', |
| 70 'borderTopStyle', |
| 71 'borderTopColor' |
| 72 ], |
| 73 borderWidth: [ |
| 74 'borderTopWidth', |
| 75 'borderRightWidth', |
| 76 'borderBottomWidth', |
| 77 'borderLeftWidth' |
| 78 ], |
| 79 flex: [ |
| 80 'flexGrow', |
| 81 'flexShrink', |
| 82 'flexBasis' |
| 83 ], |
| 84 font: [ |
| 85 'fontFamily', |
| 86 'fontSize', |
| 87 'fontStyle', |
| 88 'fontVariant', |
| 89 'fontWeight', |
| 90 'lineHeight' |
| 91 ], |
| 92 margin: [ |
| 93 'marginTop', |
| 94 'marginRight', |
| 95 'marginBottom', |
| 96 'marginLeft' |
| 97 ], |
| 98 outline: [ |
| 99 'outlineColor', |
| 100 'outlineStyle', |
| 101 'outlineWidth' |
| 102 ], |
| 103 padding: [ |
| 104 'paddingTop', |
| 105 'paddingRight', |
| 106 'paddingBottom', |
| 107 'paddingLeft' |
| 108 ] |
| 109 }; |
| 110 |
| 111 var shorthandExpanderElem = document.createElement('div'); |
| 112 |
| 113 var borderWidthAliases = { |
| 114 thin: '1px', |
| 115 medium: '3px', |
| 116 thick: '5px' |
| 117 }; |
| 118 |
| 119 var aliases = { |
| 120 borderBottomWidth: borderWidthAliases, |
| 121 borderLeftWidth: borderWidthAliases, |
| 122 borderRightWidth: borderWidthAliases, |
| 123 borderTopWidth: borderWidthAliases, |
| 124 fontSize: { |
| 125 'xx-small': '60%', |
| 126 'x-small': '75%', |
| 127 'small': '89%', |
| 128 'medium': '100%', |
| 129 'large': '120%', |
| 130 'x-large': '150%', |
| 131 'xx-large': '200%' |
| 132 }, |
| 133 fontWeight: { |
| 134 normal: '400', |
| 135 bold: '700' |
| 136 }, |
| 137 outlineWidth: borderWidthAliases, |
| 138 textShadow: { |
| 139 none: '0px 0px 0px transparent' |
| 140 }, |
| 141 boxShadow: { |
| 142 none: '0px 0px 0px 0px transparent' |
| 143 } |
| 144 }; |
| 145 |
| 146 function antiAlias(property, value) { |
| 147 if (property in aliases) { |
| 148 return aliases[property][value] || value; |
| 149 } |
| 150 return value; |
| 151 } |
| 152 |
| 153 // This delegates parsing shorthand value syntax to the browser. |
| 154 function expandShorthandAndAntiAlias(property, value, result) { |
| 155 var longProperties = shorthandToLonghand[property]; |
| 156 if (longProperties) { |
| 157 shorthandExpanderElem.style[property] = value; |
| 158 for (var i in longProperties) { |
| 159 var longProperty = longProperties[i]; |
| 160 var longhandValue = shorthandExpanderElem.style[longProperty]; |
| 161 result[longProperty] = antiAlias(longProperty, longhandValue); |
| 162 } |
| 163 } else { |
| 164 result[property] = antiAlias(property, value); |
| 165 } |
| 166 }; |
| 167 |
| 168 function normalizeKeyframes(effectInput) { |
| 169 if (!Array.isArray(effectInput) && effectInput !== null) |
| 170 throw new TypeError('Keyframe effect must be null or an array of keyframes
'); |
| 171 |
| 172 if (effectInput == null) |
| 173 return []; |
| 174 |
| 175 var keyframeEffect = effectInput.map(function(originalKeyframe) { |
| 176 var keyframe = {}; |
| 177 for (var member in originalKeyframe) { |
| 178 var memberValue = originalKeyframe[member]; |
| 179 if (member == 'offset') { |
| 180 if (memberValue != null) { |
| 181 memberValue = Number(memberValue); |
| 182 if (!isFinite(memberValue)) |
| 183 throw new TypeError('keyframe offsets must be numbers.'); |
| 184 } |
| 185 } else if (member == 'composite') { |
| 186 throw { |
| 187 type: DOMException.NOT_SUPPORTED_ERR, |
| 188 name: 'NotSupportedError', |
| 189 message: 'add compositing is not supported' |
| 190 }; |
| 191 } else if (member == 'easing') { |
| 192 memberValue = shared.toTimingFunction(memberValue); |
| 193 } else { |
| 194 memberValue = '' + memberValue; |
| 195 } |
| 196 expandShorthandAndAntiAlias(member, memberValue, keyframe); |
| 197 } |
| 198 if (keyframe.offset == undefined) |
| 199 keyframe.offset = null; |
| 200 if (keyframe.easing == undefined) |
| 201 keyframe.easing = shared.toTimingFunction('linear'); |
| 202 return keyframe; |
| 203 }); |
| 204 |
| 205 var everyFrameHasOffset = true; |
| 206 var looselySortedByOffset = true; |
| 207 var previousOffset = -Infinity; |
| 208 for (var i = 0; i < keyframeEffect.length; i++) { |
| 209 var offset = keyframeEffect[i].offset; |
| 210 if (offset != null) { |
| 211 if (offset < previousOffset) { |
| 212 throw { |
| 213 code: DOMException.INVALID_MODIFICATION_ERR, |
| 214 name: 'InvalidModificationError', |
| 215 message: 'Keyframes are not loosely sorted by offset. Sort or specif
y offsets.' |
| 216 }; |
| 217 } |
| 218 previousOffset = offset; |
| 219 } else { |
| 220 everyFrameHasOffset = false; |
| 221 } |
| 222 } |
| 223 |
| 224 keyframeEffect = keyframeEffect.filter(function(keyframe) { |
| 225 return keyframe.offset >= 0 && keyframe.offset <= 1; |
| 226 }); |
| 227 |
| 228 function spaceKeyframes() { |
| 229 var length = keyframeEffect.length; |
| 230 if (keyframeEffect[length - 1].offset == null) |
| 231 keyframeEffect[length - 1].offset = 1; |
| 232 if (length > 1 && keyframeEffect[0].offset == null) |
| 233 keyframeEffect[0].offset = 0; |
| 234 |
| 235 var previousIndex = 0; |
| 236 var previousOffset = keyframeEffect[0].offset; |
| 237 for (var i = 1; i < length; i++) { |
| 238 var offset = keyframeEffect[i].offset; |
| 239 if (offset != null) { |
| 240 for (var j = 1; j < i - previousIndex; j++) |
| 241 keyframeEffect[previousIndex + j].offset = previousOffset + (offset
- previousOffset) * j / (i - previousIndex); |
| 242 previousIndex = i; |
| 243 previousOffset = offset; |
| 244 } |
| 245 } |
| 246 } |
| 247 if (!everyFrameHasOffset) |
| 248 spaceKeyframes(); |
| 249 |
| 250 return keyframeEffect; |
| 251 } |
| 252 |
| 253 shared.normalizeKeyframes = normalizeKeyframes; |
| 254 |
| 255 if (WEB_ANIMATIONS_TESTING) { |
| 256 testing.normalizeKeyframes = normalizeKeyframes; |
| 257 } |
| 258 |
| 259 })(webAnimationsShared, webAnimationsTesting); |
OLD | NEW |