| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <div id="container"> |
| <div id="target"></div> |
| </div> |
| <script> |
| target.style.fontSize = '140px'; |
| |
| function assertAnimationValues(keyword, states) { |
| test(() => { |
| var animation = target.animate({fontSize: keyword}, 1); |
| for ({inheritedValue, expectations} of states) { |
| container.style.fontSize = inheritedValue; |
| for ({at, is} of expectations) { |
| animation.currentTime = at; |
| assert_equals(getComputedStyle(target).fontSize, is, `Animating font-size from [${target.style.fontSize}] to [${keyword}] with inherited value [${inheritedValue}] at (${at}) is [${is}]`); |
| } |
| } |
| animation.cancel(); |
| }, `Animating {font-size: '${keyword}'} should be responsive to changes in the inherited font-size.`); |
| } |
| |
| assertAnimationValues('inherit', [{ |
| inheritedValue: '100px', |
| expectations: [ |
| {at: 0.25, is: '130px'}, |
| {at: 0.75, is: '110px'}, |
| ], |
| }, { |
| inheritedValue: '200px', |
| expectations: [ |
| {at: 0.25, is: '155px'}, |
| {at: 0.75, is: '185px'}, |
| ], |
| }]); |
| |
| assertAnimationValues('larger', [{ |
| inheritedValue: '100px', |
| expectations: [ |
| {at: 0.25, is: '135px'}, |
| {at: 0.75, is: '125px'}, |
| ], |
| }, { |
| inheritedValue: '200px', |
| expectations: [ |
| {at: 0.25, is: '165px'}, |
| {at: 0.75, is: '215px'}, |
| ], |
| }]); |
| |
| assertAnimationValues('smaller', [{ |
| inheritedValue: '120px', |
| expectations: [ |
| {at: 0.25, is: '130px'}, |
| {at: 0.75, is: '110px'}, |
| ], |
| }, { |
| inheritedValue: '240px', |
| expectations: [ |
| {at: 0.25, is: '155px'}, |
| {at: 0.75, is: '185px'}, |
| ], |
| }]); |
| </script> |
