effect-value-context-filling.html (10205B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>The effect value of a keyframe effect: Forwards-filling animations whose 4 values depend on their context (target element)</title> 5 <link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-computed-keyframes"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../testcommon.js"></script> 9 <body> 10 <div id="log"></div> 11 <script> 12 'use strict'; 13 14 test(t => { 15 const div = createDiv(t); 16 div.style.fontSize = '10px'; 17 const animation = div.animate( 18 [{ marginLeft: '10em' }, { marginLeft: '20em' }], 19 { duration: 1000, fill: 'forwards' } 20 ); 21 animation.finish(); 22 assert_equals( 23 getComputedStyle(div).marginLeft, 24 '200px', 25 'Effect value before updating font-size' 26 ); 27 28 div.style.fontSize = '20px'; 29 30 assert_equals( 31 getComputedStyle(div).marginLeft, 32 '400px', 33 'Effect value after updating font-size' 34 ); 35 }, 'Filling effect values reflect changes to font-size on element'); 36 37 test(t => { 38 const parentDiv = createDiv(t); 39 const div = createDiv(t); 40 parentDiv.appendChild(div); 41 parentDiv.style.fontSize = '10px'; 42 43 const animation = div.animate( 44 [{ marginLeft: '10em' }, { marginLeft: '20em' }], 45 { duration: 1000, fill: 'forwards' } 46 ); 47 animation.finish(); 48 assert_equals( 49 getComputedStyle(div).marginLeft, 50 '200px', 51 'Effect value before updating font-size on parent element' 52 ); 53 54 parentDiv.style.fontSize = '20px'; 55 56 assert_equals( 57 getComputedStyle(div).marginLeft, 58 '400px', 59 'Effect value after updating font-size on parent element' 60 ); 61 }, 'Filling effect values reflect changes to font-size on parent element'); 62 63 test(t => { 64 const div = createDiv(t); 65 div.style.setProperty('--target', '100px'); 66 const animation = div.animate( 67 [{ marginLeft: '0px' }, { marginLeft: 'var(--target)' }], 68 { duration: 1000, fill: 'forwards' } 69 ); 70 animation.finish(); 71 assert_equals( 72 getComputedStyle(div).marginLeft, 73 '100px', 74 'Effect value before updating variable' 75 ); 76 77 div.style.setProperty('--target', '200px'); 78 79 assert_equals( 80 getComputedStyle(div).marginLeft, 81 '200px', 82 'Effect value after updating variable' 83 ); 84 }, 'Filling effect values reflect changes to variables on element'); 85 86 test(t => { 87 const parentDiv = createDiv(t); 88 const div = createDiv(t); 89 parentDiv.appendChild(div); 90 91 parentDiv.style.setProperty('--target', '10em'); 92 parentDiv.style.fontSize = '10px'; 93 94 const animation = div.animate( 95 [{ marginLeft: '0px' }, { marginLeft: 'calc(var(--target) * 2)' }], 96 { duration: 1000, fill: 'forwards' } 97 ); 98 animation.finish(); 99 assert_equals( 100 getComputedStyle(div).marginLeft, 101 '200px', 102 'Effect value before updating variable' 103 ); 104 105 parentDiv.style.setProperty('--target', '20em'); 106 107 assert_equals( 108 getComputedStyle(div).marginLeft, 109 '400px', 110 'Effect value after updating variable' 111 ); 112 }, 'Filling effect values reflect changes to variables on parent element'); 113 114 test(t => { 115 const div = createDiv(t); 116 const animation = div.animate( 117 [{ marginLeft: '100px' }, { marginLeft: '200px' }], 118 { duration: 1000, fill: 'forwards' } 119 ); 120 animation.finish(); 121 assert_equals( 122 getComputedStyle(div).marginLeft, 123 '200px', 124 'Effect value before updating the animation' 125 ); 126 127 animation.effect.setKeyframes([ 128 { marginLeft: '100px' }, 129 { marginLeft: '300px' }, 130 ]); 131 132 assert_equals( 133 getComputedStyle(div).marginLeft, 134 '300px', 135 'Effect value after updating the animation' 136 ); 137 }, 'Filling effect values reflect changes to the animation\'s keyframes'); 138 139 test(t => { 140 const div = createDiv(t); 141 div.style.marginLeft = '100px'; 142 const animation = div.animate( 143 [{ marginLeft: '100px' }, { marginLeft: '200px' }], 144 { duration: 1000, fill: 'forwards' } 145 ); 146 animation.finish(); 147 assert_equals( 148 getComputedStyle(div).marginLeft, 149 '200px', 150 'Effect value before updating the animation' 151 ); 152 153 animation.effect.composite = 'add'; 154 155 assert_equals( 156 getComputedStyle(div).marginLeft, 157 '300px', 158 'Effect value after updating the composite mode' 159 ); 160 }, 'Filling effect values reflect changes to the animation\'s composite mode'); 161 162 test(t => { 163 const div = createDiv(t); 164 const animation = div.animate( 165 [{ marginLeft: '0px' }, { marginLeft: '100px' }], 166 { duration: 1000, iterations: 2, fill: 'forwards' } 167 ); 168 animation.finish(); 169 assert_equals( 170 getComputedStyle(div).marginLeft, 171 '100px', 172 'Effect value before updating the animation' 173 ); 174 175 animation.effect.iterationComposite = 'accumulate'; 176 177 assert_equals( 178 getComputedStyle(div).marginLeft, 179 '200px', 180 'Effect value after updating the iteration composite mode' 181 ); 182 }, 'Filling effect values reflect changes to the animation\'s iteration composite mode'); 183 184 test(t => { 185 const div = createDiv(t); 186 div.style.marginLeft = '100px'; 187 const animation = div.animate( 188 [{ marginLeft: '100px' }, { marginLeft: '200px' }], 189 { duration: 1000, fill: 'forwards', composite: 'add' } 190 ); 191 animation.finish(); 192 assert_equals( 193 getComputedStyle(div).marginLeft, 194 '300px', 195 'Effect value before updating underlying value' 196 ); 197 198 div.style.marginLeft = '200px'; 199 200 assert_equals( 201 getComputedStyle(div).marginLeft, 202 '400px', 203 'Effect value after updating underlying value' 204 ); 205 }, 'Filling effect values reflect changes to the base value when using' 206 + ' additive animation'); 207 208 test(t => { 209 const div = createDiv(t); 210 div.style.marginLeft = '100px'; 211 const animation = div.animate( 212 [{ marginLeft: '100px' }, { marginLeft: '200px', composite: 'add' }], 213 { duration: 1000, fill: 'forwards' } 214 ); 215 animation.finish(); 216 assert_equals( 217 getComputedStyle(div).marginLeft, 218 '300px', 219 'Effect value before updating underlying value' 220 ); 221 222 div.style.marginLeft = '200px'; 223 224 assert_equals( 225 getComputedStyle(div).marginLeft, 226 '400px', 227 'Effect value after updating underlying value' 228 ); 229 }, 'Filling effect values reflect changes to the base value when using' 230 + ' additive animation on a single keyframe'); 231 232 test(t => { 233 const div = createDiv(t); 234 div.style.marginLeft = '0px'; 235 const animation = div.animate([{ marginLeft: '100px', offset: 0 }], { 236 duration: 1000, 237 fill: 'forwards', 238 }); 239 animation.finish(); 240 assert_equals( 241 getComputedStyle(div).marginLeft, 242 '0px', 243 'Effect value before updating underlying value' 244 ); 245 246 div.style.marginLeft = '200px'; 247 248 assert_equals( 249 getComputedStyle(div).marginLeft, 250 '200px', 251 'Effect value after updating underlying value' 252 ); 253 }, 'Filling effect values reflect changes to the base value when using' 254 + ' the fill value is an implicit keyframe'); 255 256 test(t => { 257 const parentDiv = createDiv(t); 258 const div = createDiv(t); 259 parentDiv.appendChild(div); 260 parentDiv.style.fontSize = '10px'; 261 div.style.marginLeft = '10em'; 262 // Computed underlying margin-left is 100px 263 264 const animation = div.animate( 265 [{ marginLeft: '100px' }, { marginLeft: '200px' }], 266 { duration: 1000, fill: 'forwards', composite: 'add' } 267 ); 268 animation.finish(); 269 assert_equals( 270 getComputedStyle(div).marginLeft, 271 '300px', 272 'Effect value before updating font-size on parent' 273 ); 274 275 parentDiv.style.fontSize = '20px'; 276 // Computed underlying margin-left is now 200px 277 278 assert_equals( 279 getComputedStyle(div).marginLeft, 280 '400px', 281 'Effect value after updating font-size on parent' 282 ); 283 }, 'Filling effect values reflect changes to the base value via a' 284 + ' parent element'); 285 286 test(t => { 287 const div = createDiv(t); 288 const animationA = div.animate( 289 [{ marginLeft: '0px' }, { marginLeft: '100px' }], 290 { duration: 2000, fill: 'forwards', easing: 'step-end' } 291 ); 292 const animationB = div.animate( 293 [{ marginLeft: '100px' }, { marginLeft: '200px' }], 294 { duration: 1000, fill: 'forwards', composite: 'add' } 295 ); 296 animationB.finish(); 297 assert_equals( 298 getComputedStyle(div).marginLeft, 299 '200px', 300 'Effect value before updating underyling animation' 301 ); 302 303 // Go to end of the underlying animation so that it jumps to 100px 304 animationA.finish(); 305 306 assert_equals( 307 getComputedStyle(div).marginLeft, 308 '300px', 309 'Effect value after updating underlying animation' 310 ); 311 }, 'Filling effect values reflect changes to underlying animations'); 312 313 test(t => { 314 const parentDiv = createDiv(t); 315 const div = createDiv(t); 316 parentDiv.appendChild(div); 317 318 parentDiv.style.fontSize = '10px'; 319 320 const animationA = div.animate( 321 [{ marginLeft: '0px' }, { marginLeft: '10em' }], 322 { duration: 2000, fill: 'forwards', easing: 'step-start' } 323 ); 324 const animationB = div.animate( 325 [{ marginLeft: '100px' }, { marginLeft: '200px' }], 326 { duration: 1000, fill: 'forwards', composite: 'add' } 327 ); 328 animationB.finish(); 329 assert_equals( 330 getComputedStyle(div).marginLeft, 331 '300px', 332 'Effect value before updating parent font-size' 333 ); 334 335 parentDiv.style.fontSize = '20px'; 336 // At this point the underlying animation's output should jump to 200px. 337 338 assert_equals( 339 getComputedStyle(div).marginLeft, 340 '400px', 341 'Effect value after updating parent font-size' 342 ); 343 }, 'Filling effect values reflect changes to underlying animations via a' 344 + ' a parent element'); 345 346 test(t => { 347 const div = createDiv(t); 348 const animationA = div.animate( 349 [{ marginLeft: '0px' }, { marginLeft: '0px' }], 350 { duration: 2000, fill: 'forwards' } 351 ); 352 const animationB = div.animate( 353 [{ marginLeft: '100px' }, { marginLeft: '200px' }], 354 { duration: 1000, fill: 'forwards', composite: 'add' } 355 ); 356 animationB.finish(); 357 assert_equals( 358 getComputedStyle(div).marginLeft, 359 '200px', 360 'Effect value before updating underyling animation' 361 ); 362 363 animationA.effect.setKeyframes([ 364 { marginLeft: '100px' }, 365 { marginLeft: '100px' }, 366 ]); 367 368 assert_equals( 369 getComputedStyle(div).marginLeft, 370 '300px', 371 'Effect value after updating underlying animation' 372 ); 373 }, 'Filling effect values reflect changes to underlying animations made by' 374 + ' directly changing the keyframes'); 375 376 </script> 377 </body>