<!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>
Codebase Browser
chromium