Chromium Code Reviews Chromium Code Reviews
Issue 863863004:
Implemented additive animations for length (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <script src="../resources/testharness.js"></script> | |
| 3 <script src="../resources/testharnessreport.js"></script> | |
| 4 | |
| 5 <style> | |
| 6 #element, #container { | |
| 7 outline-style: solid; | |
| 8 outline-width: 0; | |
| 9 border-style: solid; | |
| 10 border-width: 0; | |
| 11 } | |
| 12 </style> | |
| 13 | |
| 14 <div id='container'> | |
| 15 <div id='element'></div> | |
| 16 </div> | |
| 17 | |
| 18 <script> | |
| 19 | |
| 20 var container = document.getElementById('container'); | |
| 21 var element = document.getElementById('element'); | |
| 22 | |
| 23 function testNonNegativeLength(property, parentUnderlyingValue, underlyingValue, keyframePairs, expected) { | |
| 24 var oldUnderlyingValue = element.style[property]; | |
| 25 var oldParentUnderlyingValue = container.style[property]; | |
| 26 | |
| 27 if (parentUnderlyingValue != '') | |
| 28 container.style[property] = parentUnderlyingValue; | |
| 29 | |
| 30 element.style[property] = underlyingValue; | |
| 31 | |
| 32 var players = []; | |
| 33 | |
| 34 keyframePairs.forEach(function(keyframePair) { | |
| 35 var keyframeA = {}; | |
| 36 var keyframeB = {}; | |
| 37 keyframeA['composite'] = keyframePair[0].composite; | |
| 38 keyframeB['composite'] = keyframePair[1].composite; | |
| 39 | |
| 40 keyframeA[property] = keyframePair[0].value; | |
| 41 keyframeB[property] = keyframePair[1].value; | |
| 42 | |
| 43 var player = element.animate([keyframeA, keyframeB], {duration: 1, fill: 'forwards'}); | |
| 44 player.pause(); | |
| 45 | |
| 46 players.push(player); | |
| 47 }); | |
| 48 | |
| 49 for (var t in expected) { | |
| 50 players.forEach(function(player) { | |
| 51 player.currentTime = t; | |
| 52 }); | |
| 53 | |
| 54 assert_equals(getComputedStyle(element)[property], expected[t]); | |
| 55 } | |
| 56 | |
| 57 players.forEach(function(player) { | |
| 58 player.cancel(); | |
| 59 }); | |
| 60 | |
| 61 container.style[property] = oldParentUnderlyingValue; | |
| 62 element.style[property] = oldUnderlyingValue; | |
| 63 } | |
| 64 | |
| 65 var properties = [ | |
| 66 'borderBottomWidth', | |
| 67 'borderLeftWidth', | |
| 68 'borderRightWidth', | |
| 69 'borderTopWidth', | |
| 70 'flexBasis', | |
| 71 'fontSize', | |
| 72 'height', | |
| 73 'maxHeight', | |
| 74 'maxWidth', | |
| 75 'minHeight', | |
| 76 'minWidth', | |
| 77 'motionPosition', | |
| 78 'outlineWidth', | |
| 79 'paddingBottom', | |
| 80 'paddingLeft', | |
| 81 'paddingRight', | |
| 82 'paddingTop', | |
| 83 'perspective', | |
| 84 'shapeMargin', | |
| 85 'width', | |
| 86 ]; | |
| 87 | |
| 88 properties.forEach(function(property) { | |
| 89 var suffix = ' (for ' + property + ')'; | |
| 90 | |
| 91 switch (property) { | |
| 92 case 'width': | |
| 93 case 'height': | |
| 94 case 'flexBasis': | |
| 95 case 'minWidth': | |
| 96 case 'minHeight': | |
| 97 case 'columnWidth': | |
| 98 test(function() { | |
| 99 testNonNegativeLength(property, '', 'auto', [[{value: '100px', compo site: 'replace'}, {value: '200px', composite: 'replace'}]], { | |
| 100 0.0: '100px', | |
| 101 0.25: '125px', | |
| 102 0.5: '150px', | |
| 103 0.75: '175px', | |
| 104 1.0: '200px', | |
| 105 }); | |
| 106 }, 'Underlying value of auto ignored in replace -> replace keyframes' + suffix); | |
| 107 | |
| 108 break; | |
| 109 } | |
| 110 | |
| 111 switch (property) { | |
| 112 case 'width': | |
| 113 case 'columnWidth': | |
| 114 test(function() { | |
| 115 testNonNegativeLength(property, '500px', 'auto', [[{value: '100px', composite: 'add'}, {value: '200px', composite: 'add'}]], { | |
| 116 0.0: '500px', | |
| 117 0.25: '500px', | |
| 118 0.5: '500px', | |
| 119 0.75: '500px', | |
| 120 1.0: '500px', | |
| 121 }); | |
| 122 }, 'Underlying value of auto ignored in add -> add keyframes' + suffix); | |
| 123 | |
| 124 | |
| 125 test(function() { | |
| 126 testNonNegativeLength(property, '', '300px', [[{value: '100px', comp osite: 'replace'}, {value: '200px', composite: 'replace'}]], { | |
| 127 0.0: '100px', | |
| 128 0.25: '125px', | |
| 129 0.5: '150px', | |
| 130 0.75: '175px', | |
| 131 1.0: '200px', | |
| 132 }); | |
| 133 }, 'Underlying value length ignored in replace -> replace keyframes' + s uffix); | |
| 134 | |
| 135 break; | |
| 136 | |
| 137 case 'height': | |
| 138 test(function() { | |
| 139 testNonNegativeLength(property, '', 'auto', [[{value: '100px', compo site: 'replace'}, {value: '200px', composite: 'replace'}]], { | |
| 140 0.0: '100px', | |
| 141 0.25: '125px', | |
| 142 0.5: '150px', | |
| 143 0.75: '175px', | |
| 144 1.0: '200px', | |
| 145 }); | |
| 146 }, 'Underlying value of auto ignored in replace -> replace keyframes' + suffix); | |
| 147 | |
| 148 test(function() { | |
| 149 testNonNegativeLength(property, '500px', 'auto', [[{value: '100px', composite: 'add'}, {value: '200px', composite: 'add'}]], { | |
| 150 0.0: '0px', | |
| 151 0.25: '0px', | |
| 152 0.5: '0px', | |
| 153 0.75: '0px', | |
| 154 1.0: '0px', | |
| 155 }); | |
| 156 }, 'Underlying value of auto ignored in add -> add keyframes' + suffix); | |
| 157 | |
| 158 | |
| 159 test(function() { | |
| 160 testNonNegativeLength(property, '', '300px', [[{value: '100px', comp osite: 'replace'}, {value: '200px', composite: 'replace'}]], { | |
| 161 0.0: '100px', | |
| 162 0.25: '125px', | |
| 163 0.5: '150px', | |
| 164 0.75: '175px', | |
| 165 1.0: '200px', | |
| 166 }); | |
| 167 }, 'Underlying value length ignored in replace -> replace keyframes' + s uffix); | |
| 168 | |
| 169 break; | |
| 170 } | |
| 171 | |
| 172 test(function() { | |
| 173 testNonNegativeLength(property, '', '300px', [[{value: '100px', composit e: 'add'}, {value: '200px', composite: 'add'}]], { | |
| 174 0.0: '400px', | |
| 175 0.25: '425px', | |
| 176 0.5: '450px', | |
| 177 0.75: '475px', | |
| 178 1.0: '500px', | |
| 179 }); | |
| 180 }, 'Underlying value length added in add -> add keyframes' + suffix); | |
| 181 | |
| 182 test(function() { | |
| 183 testNonNegativeLength(property, '500px', 'inherit', [[{value: '100px', c omposite: 'add'}, {value: '200px', composite: 'add'}]], { | |
| 184 0.0: '600px', | |
| 185 0.25: '625px', | |
| 186 0.5: '650px', | |
| 187 0.75: '675px', | |
| 188 1.0: '700px', | |
| 189 }); | |
| 190 }, 'Underlying value of inherit added to in add -> add keyframes' + suffix); | |
| 191 | |
| 192 test(function() { | |
| 193 testNonNegativeLength(property, '', '1000px', [ | |
| 194 [{value: '100px', composite: 'replace'}, {value: '200px', composite: 'replace'}], | |
| 195 [{value: '300px', composite: 'replace'}, {value: '400px', composite: 'replace'}] | |
| 196 ], { | |
| 197 0.0: '300px', | |
| 198 0.25: '325px', | |
| 199 0.5: '350px', | |
| 200 0.75: '375px', | |
| 201 1.0: '400px', | |
| 202 }); | |
| 203 }, 'Replace -> replace animations override earlier replace -> replace animat ions' + suffix); | |
| 204 | |
| 205 test(function() { | |
| 206 testNonNegativeLength(property, '', '1000px', [ | |
| 207 [{value: '100px', composite: 'add'}, {value: '200px', composite: 'ad d'}], | |
| 208 [{value: '300px', composite: 'replace'}, {value: '400px', composite: 'replace'}] | |
| 209 ], { | |
| 210 0.0: '300px', | |
| 211 0.25: '325px', | |
| 212 0.5: '350px', | |
| 213 0.75: '375px', | |
| 214 1.0: '400px', | |
| 215 }); | |
| 216 }, 'Replace -> replace animations override earlier add -> add animations' + suffix); | |
| 217 | |
| 218 test(function() { | |
| 219 testNonNegativeLength(property, '', '1000px', [ | |
| 220 [{value: '100px', composite: 'replace'}, {value: '200px', composite: 'replace'}], | |
| 221 [{value: '300px', composite: 'add'}, {value: '400px', composite: 'ad d'}] | |
| 222 ], { | |
| 223 0.0: '400px', | |
| 224 0.25: '450px', | |
| 225 0.5: '500px', | |
| 226 0.75: '550px', | |
| 227 1.0: '600px', | |
| 228 }); | |
| 229 }, 'Add -> add animations add on to earlier replace -> replace animations' + suffix); | |
| 230 | |
| 231 test(function() { | |
| 232 testNonNegativeLength(property, '', '1000px', [ | |
| 233 [{value: '100px', composite: 'add'}, {value: '200px', composite: 'ad d'}], | |
| 234 [{value: '300px', composite: 'add'}, {value: '400px', composite: 'ad d'}] | |
| 235 ], { | |
| 236 0.0: '1400px', | |
| 237 0.25: '1450px', | |
| 238 0.5: '1500px', | |
| 239 0.75: '1550px', | |
| 240 1.0: '1600px', | |
| 241 }); | |
| 242 }, 'Multiple add -> add animations add on to underlying value' + suffix); | |
| 243 | |
| 244 // The new Interpolation code path doesn't yet support interpolation | |
| 245 // (and addition) of inherit/initial/unset values | |
| 246 /* | |
| 247 test(function() { | |
| 248 testNonNegativeLength(property, '500px', '300px', [[{value: '100px', com posite: 'add'}, {value: 'inherit', composite: 'add'}]], { | |
| 249 0.0: '400px', | |
| 250 0.25: '500px', | |
| 251 0.5: '600px', | |
| 252 0.75: '700px', | |
| 253 1.0: '800px', | |
| 254 }); | |
| 255 }, 'inherit added in add -> add keyframes' + suffix); | |
| 256 */ | |
|
alancutter (OOO until 2018)
2015/02/12 05:55:45
Uncomment and expect failure.
| |
| 257 }); | |
| 258 | |
| 259 </script> | |
| OLD | NEW |
