| 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.createElementNS('http://www.w3.org/1999/x
html', '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 |