| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <meta charset=utf-8> |
| 3 <title>Test for effect composition</title> |
| 4 <link rel="help" href="https://w3c.github.io/web-animations/#effect-composition"
> |
| 5 <script src=/resources/testharness.js></script> |
| 6 <script src=/resources/testharnessreport.js></script> |
| 7 <script src="../../testcommon.js"></script> |
| 8 <div id="log"></div> |
| 9 <script> |
| 10 'use strict'; |
| 11 |
| 12 [ 'accumulate', 'add' ].forEach(function(composite) { |
| 13 test(function(t) { |
| 14 var div = createDiv(t); |
| 15 div.style.marginLeft = '10px'; |
| 16 var anim = |
| 17 div.animate({ marginLeft: ['0px', '10px'], composite }, 100); |
| 18 |
| 19 anim.currentTime = 50; |
| 20 assert_equals(getComputedStyle(div).marginLeft, '15px', |
| 21 'Animated margin-left style at 50%'); |
| 22 }, composite + ' onto the base value'); |
| 23 |
| 24 test(function(t) { |
| 25 var div = createDiv(t); |
| 26 var anims = []; |
| 27 anims.push(div.animate({ marginLeft: ['10px', '20px'], |
| 28 composite: 'replace' }, |
| 29 100)); |
| 30 anims.push(div.animate({ marginLeft: ['0px', '10px'], |
| 31 composite }, |
| 32 100)); |
| 33 |
| 34 anims.forEach(function(anim) { |
| 35 anim.currentTime = 50; |
| 36 }); |
| 37 |
| 38 assert_equals(getComputedStyle(div).marginLeft, '20px', |
| 39 'Animated style at 50%'); |
| 40 }, composite + ' onto an underlying animation value'); |
| 41 |
| 42 test(function(t) { |
| 43 var div = createDiv(t); |
| 44 div.style.marginLeft = '10px'; |
| 45 var anim = |
| 46 div.animate([{ marginLeft: '10px', composite }, |
| 47 { marginLeft: '30px', composite: 'replace' }], |
| 48 100); |
| 49 |
| 50 anim.currentTime = 50; |
| 51 assert_equals(getComputedStyle(div).marginLeft, '25px', |
| 52 'Animated style at 50%'); |
| 53 }, 'Composite when mixing ' + composite + ' and replace'); |
| 54 |
| 55 test(function(t) { |
| 56 var div = createDiv(t); |
| 57 div.style.marginLeft = '10px'; |
| 58 var anim = |
| 59 div.animate([{ marginLeft: '10px', composite: 'replace' }, |
| 60 { marginLeft: '20px' }], |
| 61 { duration: 100 , composite }); |
| 62 |
| 63 anim.currentTime = 50; |
| 64 assert_equals(getComputedStyle(div).marginLeft, '20px', |
| 65 'Animated style at 50%'); |
| 66 }, composite + ' specified on a keyframe overrides the composite mode of ' + |
| 67 'the effect'); |
| 68 |
| 69 test(function(t) { |
| 70 var div = createDiv(t); |
| 71 div.style.marginLeft = '10px'; |
| 72 var anim = |
| 73 div.animate([{ marginLeft: '10px', composite: 'replace' }, |
| 74 { marginLeft: '20px' }], |
| 75 100); |
| 76 |
| 77 anim.effect.composite = composite; |
| 78 anim.currentTime = 50; // (10 + (10 + 20)) * 0.5 |
| 79 assert_equals(getComputedStyle(div).marginLeft, '20px', |
| 80 'Animated style at 50%'); |
| 81 }, 'unspecified composite mode on a keyframe is overriden by setting ' + |
| 82 composite + ' of the effect'); |
| 83 }); |
| 84 |
| 85 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2610243002:
Import wpt@5e1a3b80cea8d36774d2afd78b29a74792e9f15a (Closed)
