to-inherited-change.html (1507B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 5 <div id='container'> 6 <div id='element'></div> 7 </div> 8 9 <script> 10 11 var container = document.getElementById('container'); 12 var element = document.getElementById('element'); 13 14 test(function() { 15 var keyframes = [ 16 {fontSize: 'inherit'}, 17 {fontSize: '20px'} 18 ]; 19 20 container.style.fontSize = '10px'; 21 var player = element.animate(keyframes, 10); 22 player.pause(); 23 player.currentTime = 5; 24 container.style.fontSize = '30px'; 25 assert_equals(getComputedStyle(element).fontSize, '25px'); 26 }, 'Font size responsive to inherited changes at start'); 27 28 test(function() { 29 var keyframes = [ 30 {fontSize: '50px'}, 31 {fontSize: 'inherit'} 32 ]; 33 34 container.style.fontSize = '40px'; 35 var player = element.animate(keyframes, 10); 36 player.pause(); 37 player.currentTime = 5; 38 container.style.fontSize = '60px'; 39 assert_equals(getComputedStyle(element).fontSize, '55px'); 40 }, 'Font size responsive to inherited changes at end'); 41 42 test(function() { 43 var keyframes = [ 44 {fontSize: 'inherit'}, 45 {fontSize: 'inherit'} 46 ]; 47 48 container.style.fontSize = '70px'; 49 var player = element.animate(keyframes, 10); 50 player.pause(); 51 player.currentTime = 5; 52 container.style.fontSize = '80px'; 53 assert_equals(getComputedStyle(element).fontSize, '80px'); 54 }, 'Font size responsive to inherited changes'); 55 56 </script>