| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <script src="../../resources/testharness.js"></script> | |
| 3 <script src="../../resources/testharnessreport.js"></script> | |
| 4 <div id="container"> | |
| 5 <div id="target"></div> | |
| 6 </div> | |
| 7 <script> | |
| 8 target.style.fontSize = '140px'; | |
| 9 | |
| 10 function assertAnimationValues(keyword, states) { | |
| 11 test(() => { | |
| 12 var animation = target.animate({fontSize: keyword}, 1); | |
| 13 for ({inheritedValue, expectations} of states) { | |
| 14 container.style.fontSize = inheritedValue; | |
| 15 for ({at, is} of expectations) { | |
| 16 animation.currentTime = at; | |
| 17 assert_equals(getComputedStyle(target).fontSize, is, `Animating font-siz
e from [${target.style.fontSize}] to [${keyword}] with inherited value [${inheri
tedValue}] at (${at}) is [${is}]`); | |
| 18 } | |
| 19 } | |
| 20 animation.cancel(); | |
| 21 }, `Animating {font-size: '${keyword}'} should be responsive to changes in the
inherited font-size.`); | |
| 22 } | |
| 23 | |
| 24 assertAnimationValues('inherit', [{ | |
| 25 inheritedValue: '100px', | |
| 26 expectations: [ | |
| 27 {at: 0.25, is: '130px'}, | |
| 28 {at: 0.75, is: '110px'}, | |
| 29 ], | |
| 30 }, { | |
| 31 inheritedValue: '200px', | |
| 32 expectations: [ | |
| 33 {at: 0.25, is: '155px'}, | |
| 34 {at: 0.75, is: '185px'}, | |
| 35 ], | |
| 36 }]); | |
| 37 | |
| 38 assertAnimationValues('larger', [{ | |
| 39 inheritedValue: '100px', | |
| 40 expectations: [ | |
| 41 {at: 0.25, is: '135px'}, | |
| 42 {at: 0.75, is: '125px'}, | |
| 43 ], | |
| 44 }, { | |
| 45 inheritedValue: '200px', | |
| 46 expectations: [ | |
| 47 {at: 0.25, is: '165px'}, | |
| 48 {at: 0.75, is: '215px'}, | |
| 49 ], | |
| 50 }]); | |
| 51 | |
| 52 assertAnimationValues('smaller', [{ | |
| 53 inheritedValue: '120px', | |
| 54 expectations: [ | |
| 55 {at: 0.25, is: '130px'}, | |
| 56 {at: 0.75, is: '110px'}, | |
| 57 ], | |
| 58 }, { | |
| 59 inheritedValue: '240px', | |
| 60 expectations: [ | |
| 61 {at: 0.25, is: '155px'}, | |
| 62 {at: 0.75, is: '185px'}, | |
| 63 ], | |
| 64 }]); | |
| 65 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2973013002:
Group all responsive animation tests together (Closed)
