| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> |
| 4 <div id="container"></div> |
| 5 <script> |
| 6 function testTiming({timing, expectations}, description) { |
| 7 test(() => { |
| 8 for (let {at, expect} of expectations) { |
| 9 let target = document.createElement('div'); |
| 10 container.appendChild(target); |
| 11 let animation = target.animate({opacity: [0, 1]}, timing); |
| 12 animation.currentTime = at; |
| 13 assert_equals(Number(getComputedStyle(target).opacity), expect, 'at ' + at
); |
| 14 animation.cancel(); |
| 15 } |
| 16 }, description); |
| 17 } |
| 18 |
| 19 testTiming({ |
| 20 timing: { |
| 21 duration: 10, |
| 22 delay: 1, |
| 23 endDelay: 1, |
| 24 fill: 'both', |
| 25 }, |
| 26 expectations: [ |
| 27 { at: 0, expect: 0 }, |
| 28 { at: 1, expect: 0 }, |
| 29 { at: 2, expect: 0.1 }, |
| 30 { at: 10, expect: 0.9 }, |
| 31 { at: 11, expect: 1 }, |
| 32 { at: 12, expect: 1 }, |
| 33 ], |
| 34 }, 'delay and endDelay both positive'); |
| 35 |
| 36 testTiming({ |
| 37 timing: { |
| 38 duration: 10, |
| 39 delay: 1, |
| 40 endDelay: -1, |
| 41 fill: 'both', |
| 42 }, |
| 43 expectations: [ |
| 44 { at: 0, expect: 0 }, |
| 45 { at: 1, expect: 0 }, |
| 46 { at: 2, expect: 0.1 }, |
| 47 { at: 9, expect: 0.8 }, |
| 48 { at: 10, expect: 1 }, |
| 49 { at: 11, expect: 1 }, |
| 50 ], |
| 51 }, 'Positive delay and negative endDelay'); |
| 52 |
| 53 testTiming({ |
| 54 timing: { |
| 55 duration: 10, |
| 56 delay: -1, |
| 57 endDelay: 1, |
| 58 fill: 'both', |
| 59 }, |
| 60 expectations: [ |
| 61 { at: -2, expect: 0 }, |
| 62 { at: -1, expect: 0 }, |
| 63 { at: 0, expect: 0.1 }, |
| 64 { at: 1, expect: 0.2 }, |
| 65 { at: 8, expect: 0.9 }, |
| 66 { at: 9, expect: 1 }, |
| 67 { at: 10, expect: 1 }, |
| 68 ], |
| 69 }, 'Negative delay and positive endDelay'); |
| 70 |
| 71 testTiming({ |
| 72 timing: { |
| 73 duration: 10, |
| 74 delay: -1, |
| 75 endDelay: -1, |
| 76 fill: 'both', |
| 77 }, |
| 78 expectations: [ |
| 79 { at: -2, expect: 0 }, |
| 80 { at: -1, expect: 0 }, |
| 81 { at: 0, expect: 0.1 }, |
| 82 { at: 1, expect: 0.2 }, |
| 83 { at: 7, expect: 0.8 }, |
| 84 { at: 8, expect: 1 }, |
| 85 { at: 9, expect: 1 }, |
| 86 { at: 10, expect: 1 }, |
| 87 ], |
| 88 }, 'delay and endDelay both negative'); |
| 89 |
| 90 testTiming({ |
| 91 timing: { |
| 92 duration: 10, |
| 93 delay: 1, |
| 94 endDelay: -12, |
| 95 fill: 'both', |
| 96 }, |
| 97 expectations: [ |
| 98 { at: -2, expect: 0 }, |
| 99 { at: -1, expect: 1 }, |
| 100 { at: 0, expect: 1 }, |
| 101 { at: 5, expect: 1 }, |
| 102 { at: 10, expect: 1 }, |
| 103 { at: 11, expect: 1 }, |
| 104 { at: 12, expect: 1 }, |
| 105 ], |
| 106 }, 'Negative endDelay that eclipses delay and duration'); |
| 107 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1933113002:
Web Animations: Clip animation active intervals if endDelay is negative (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master