third_party/WebKit/LayoutTests/web-animations-api/animations-responsive-fontSize.html

   1 <!DOCTYPE html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4 <div id='container'>
   5     <div id='element'></div>
   6 </div>
   7 <script>
   8
   9 var container = document.getElementById('container');
  10 var element = document.getElementById('element');
  11
  12 test(function() {
  13     var keyframes = [
  14         {fontSize: 'larger'},
  15         {fontSize: 'larger'}
  16     ];
  17
  18     container.style.fontSize = 'small';
  19     var player = element.animate(keyframes, 10);
  20     player.pause();
  21     player.currentTime = 5;
  22     fontSize = getComputedStyle(element).fontSize;
  23     container.style.fontSize = 'medium';
  24     assert_not_equals(getComputedStyle(element).fontSize, fontSize);
  25 }, 'Relative font size larger responsive to style changes');
  26
  27 test(function() {
  28     var keyframes = [
  29         {fontSize: 'smaller'},
  30         {fontSize: 'smaller'}
  31     ];
  32
  33     container.style.fontSize = 'large';
  34     var player = element.animate(keyframes, 10);
  35     player.pause();
  36     player.currentTime = 5;
  37     fontSize = getComputedStyle(element).fontSize;
  38     container.style.fontSize = 'medium';
  39     assert_not_equals(getComputedStyle(element).fontSize, fontSize);
  40 }, 'Relative font size smaller responsive to style changes');
  41
  42 </script>