| 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 var players = []; |
| 24 |
| 25 function testLength(property, parentUnderlyingValue, underlyingValue, keyframePa
irs, expected) { |
| 26 container.style[property] = parentUnderlyingValue; |
| 27 element.style[property] = underlyingValue; |
| 28 |
| 29 // Clear existing players (from a previous failed test) |
| 30 players.forEach(function(player) { |
| 31 player.cancel(); |
| 32 }); |
| 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 |
| 62 function resetLength(property) { |
| 63 container.style[property] = ''; |
| 64 element.style[property] = ''; |
| 65 } |
| 66 |
| 67 var properties = [ |
| 68 'borderBottomWidth', |
| 69 'borderLeftWidth', |
| 70 'borderRightWidth', |
| 71 'borderTopWidth', |
| 72 'flexBasis', |
| 73 'fontSize', |
| 74 'height', |
| 75 'maxHeight', |
| 76 'maxWidth', |
| 77 'minHeight', |
| 78 'minWidth', |
| 79 'motionPosition', |
| 80 'outlineWidth', |
| 81 'paddingBottom', |
| 82 'paddingLeft', |
| 83 'paddingRight', |
| 84 'paddingTop', |
| 85 'perspective', |
| 86 'shapeMargin', |
| 87 'width', |
| 88 ]; |
| 89 |
| 90 properties.forEach(function(property) { |
| 91 var suffix = ' (for ' + property + ')'; |
| 92 |
| 93 // Cases in which auto can be used, but won't be resolved |
| 94 switch (property) { |
| 95 case 'width': |
| 96 case 'height': |
| 97 case 'flexBasis': |
| 98 case 'minWidth': |
| 99 case 'minHeight': |
| 100 test(function() { |
| 101 testLength(property, '', 'auto', [[{value: '100px', composite: 'repl
ace'}, {value: '200px', composite: 'replace'}]], { |
| 102 0.0: '100px', |
| 103 0.25: '125px', |
| 104 0.5: '150px', |
| 105 0.75: '175px', |
| 106 1.0: '200px', |
| 107 }); |
| 108 }, 'Underlying value of auto ignored in replace -> replace keyframes' +
suffix); |
| 109 |
| 110 test(function() { |
| 111 testLength(property, '500px', '300px', [[{value: 'auto', composite:
'add'}, {value: 'auto', composite: 'add'}]], { |
| 112 0.0: '300px', |
| 113 0.25: '300px', |
| 114 0.5: '300px', |
| 115 0.75: '300px', |
| 116 1.0: '300px', |
| 117 }); |
| 118 }, 'Add -> add auto keyframes ignored with underlying value length' + su
ffix); |
| 119 |
| 120 break; |
| 121 } |
| 122 |
| 123 // Cases in which we expect auto to be resolved |
| 124 switch (property) { |
| 125 case 'width': |
| 126 test(function() { |
| 127 testLength(property, '500px', 'auto', [[{value: '100px', composite:
'add'}, {value: '200px', composite: 'add'}]], { |
| 128 0.0: '500px', |
| 129 0.25: '500px', |
| 130 0.5: '500px', |
| 131 0.75: '500px', |
| 132 1.0: '500px', |
| 133 }); |
| 134 }, 'Underlying value auto ignored in add -> add length keyframes' + suff
ix); |
| 135 |
| 136 break; |
| 137 |
| 138 case 'height': |
| 139 test(function() { |
| 140 testLength(property, '500px', 'auto', [[{value: '100px', composite:
'add'}, {value: '200px', composite: 'add'}]], { |
| 141 0.0: '0px', |
| 142 0.25: '0px', |
| 143 0.5: '0px', |
| 144 0.75: '0px', |
| 145 1.0: '0px', |
| 146 }); |
| 147 }, 'Underlying value of auto ignored in add -> add keyframes' + suffix); |
| 148 |
| 149 break; |
| 150 } |
| 151 |
| 152 test(function() { |
| 153 testLength(property, '', '300px', [[{value: '100px', composite: 'replace
'}, {value: '200px', composite: 'replace'}]], { |
| 154 0.0: '100px', |
| 155 0.25: '125px', |
| 156 0.5: '150px', |
| 157 0.75: '175px', |
| 158 1.0: '200px', |
| 159 }); |
| 160 }, 'Underlying value length ignored in replace -> replace keyframes' + suffi
x); |
| 161 |
| 162 test(function() { |
| 163 testLength(property, '', '300px', [[{value: '100px', composite: 'add'},
{value: '200px', composite: 'add'}]], { |
| 164 0.0: '400px', |
| 165 0.25: '425px', |
| 166 0.5: '450px', |
| 167 0.75: '475px', |
| 168 1.0: '500px', |
| 169 }); |
| 170 }, 'Underlying value length added in add -> add keyframes' + suffix); |
| 171 |
| 172 test(function() { |
| 173 testLength(property, '500px', 'inherit', [[{value: '100px', composite: '
add'}, {value: '200px', composite: 'add'}]], { |
| 174 0.0: '600px', |
| 175 0.25: '625px', |
| 176 0.5: '650px', |
| 177 0.75: '675px', |
| 178 1.0: '700px', |
| 179 }); |
| 180 }, 'Underlying value of inherit added to in add -> add keyframes' + suffix); |
| 181 |
| 182 test(function() { |
| 183 testLength(property, '', '1000px', [ |
| 184 [{value: '100px', composite: 'replace'}, {value: '200px', composite:
'replace'}], |
| 185 [{value: '300px', composite: 'replace'}, {value: '400px', composite:
'replace'}] |
| 186 ], { |
| 187 0.0: '300px', |
| 188 0.25: '325px', |
| 189 0.5: '350px', |
| 190 0.75: '375px', |
| 191 1.0: '400px', |
| 192 }); |
| 193 }, 'Replace -> replace animations override earlier replace -> replace animat
ions' + suffix); |
| 194 |
| 195 test(function() { |
| 196 testLength(property, '', '1000px', [ |
| 197 [{value: '100px', composite: 'add'}, {value: '200px', composite: 'ad
d'}], |
| 198 [{value: '300px', composite: 'replace'}, {value: '400px', composite:
'replace'}] |
| 199 ], { |
| 200 0.0: '300px', |
| 201 0.25: '325px', |
| 202 0.5: '350px', |
| 203 0.75: '375px', |
| 204 1.0: '400px', |
| 205 }); |
| 206 }, 'Replace -> replace animations override earlier add -> add animations' +
suffix); |
| 207 |
| 208 test(function() { |
| 209 testLength(property, '', '1000px', [ |
| 210 [{value: '100px', composite: 'replace'}, {value: '200px', composite:
'replace'}], |
| 211 [{value: '300px', composite: 'add'}, {value: '400px', composite: 'ad
d'}] |
| 212 ], { |
| 213 0.0: '400px', |
| 214 0.25: '450px', |
| 215 0.5: '500px', |
| 216 0.75: '550px', |
| 217 1.0: '600px', |
| 218 }); |
| 219 }, 'Add -> add animations add on to earlier replace -> replace animations' +
suffix); |
| 220 |
| 221 test(function() { |
| 222 testLength(property, '', '1000px', [ |
| 223 [{value: '100px', composite: 'add'}, {value: '200px', composite: 'ad
d'}], |
| 224 [{value: '300px', composite: 'add'}, {value: '400px', composite: 'ad
d'}] |
| 225 ], { |
| 226 0.0: '1400px', |
| 227 0.25: '1450px', |
| 228 0.5: '1500px', |
| 229 0.75: '1550px', |
| 230 1.0: '1600px', |
| 231 }); |
| 232 }, 'Multiple add -> add animations add on to underlying value' + suffix); |
| 233 |
| 234 // The new Interpolation code path doesn't yet support interpolation |
| 235 // (and addition) of inherit/initial/unset values |
| 236 test(function() { |
| 237 testLength(property, '500px', '300px', [[{value: '100px', composite: 'ad
d'}, {value: 'inherit', composite: 'add'}]], { |
| 238 0.0: '400px', |
| 239 0.25: '500px', |
| 240 0.5: '600px', |
| 241 0.75: '700px', |
| 242 1.0: '800px', |
| 243 }); |
| 244 }, 'inherit added in add -> add keyframes' + suffix); |
| 245 |
| 246 resetLength(property); |
| 247 }); |
| 248 |
| 249 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 863863004:
Implemented additive animations for length (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master