third_party/WebKit/LayoutTests/web-animations-api/animations-responsive-to-inherited-change.html

   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>