third_party/WebKit/LayoutTests/web-animations-api/animations-responsive-assorted-lengths.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 var element = document.getElementById('element');
  11 var container = document.getElementById('container');
  12
  13 test(function() {
  14     element.style.fontSize = '10px';
  15     var player = element.animate([{bottom: '3em'}, {bottom: '5em'}], 10);
  16     player.pause();
  17     player.currentTime = 5;
  18     element.style.fontSize = '20px';
  19     assert_equals(getComputedStyle(element).bottom, '80px');
  20 }, 'bottom responsive to style changes');
  21
  22 test(function() {
  23     element.style.fontSize = '10px';
  24     var player = element.animate([{height: '3em'}, {height: '5em'}], 10);
  25     player.pause();
  26     player.currentTime = 5;
  27     element.style.fontSize = '20px';
  28     assert_equals(getComputedStyle(element).height, '80px');
  29 }, 'height responsive to style changes');
  30
  31 test(function() {
  32     element.style.fontSize = '10px';
  33     var player = element.animate([{letterSpacing: '3em'}, {letterSpacing: '5em'}], 10);
  34     player.pause();
  35     player.currentTime = 5;
  36     element.style.fontSize = '20px';
  37     assert_equals(getComputedStyle(element).letterSpacing, '80px');
  38 }, 'letterSpacing responsive to style changes');
  39
  40 test(function() {
  41     var player = element.animate([{letterSpacing: 'normal'}, {letterSpacing: 'normal'}], 10);
  42     player.pause();
  43     player.currentTime = 5;
  44     assert_equals(getComputedStyle(element).letterSpacing, 'normal');
  45 }, 'letterSpacing can be normal');
  46
  47 test(function() {
  48     element.style.fontSize = '10px';
  49     var player = element.animate([{marginRight: '3em'}, {marginRight: '5em'}], 10);
  50     player.pause();
  51     player.currentTime = 5;
  52     element.style.fontSize = '20px';
  53     assert_equals(getComputedStyle(element).marginRight, '80px');
  54 }, 'marginRight responsive to style changes');
  55
  56 test(function() {
  57     element.style.fontSize = '10px';
  58     container.style.width = '300px';
  59     var player = element.animate([{marginRight: '3em'}, {marginRight: '50%'}], 10);
  60     player.pause();
  61     player.currentTime = 5;
  62     element.style.fontSize = '20px';
  63     container.style.width = '600px';
  64     assert_equals(getComputedStyle(element).marginRight, '180px');
  65 }, 'marginRight allows percentages');
  66
  67 test(function() {
  68     element.style.fontSize = '10px';
  69     var player = element.animate([{outlineOffset: '3em'}, {outlineOffset: '5em'}], 10);
  70     player.pause();
  71     player.currentTime = 5;
  72     element.style.outline = 'dashed thin';
  73     element.style.fontSize = '20px';
  74     assert_equals(getComputedStyle(element).outlineOffset, '80px');
  75 }, 'outlineOffset responsive to style changes');
  76
  77 test(function() {
  78     container.style.fontSize = '10px';
  79     var player = container.animate([{perspective: '3em'}, {perspective: '5em'}], 10);
  80     player.pause();
  81     player.currentTime = 5;
  82     container.style.fontSize = '20px';
  83     assert_equals(getComputedStyle(container).perspective, '80px');
  84 }, 'perspective responsive to style changes');
  85
  86 test(function() {
  87     var player = element.animate([{perspective: 'none'}, {perspective: 'none'}], 10);
  88     player.pause();
  89     player.currentTime = 10;
  90     assert_equals(getComputedStyle(element).perspective, 'none');
  91 }, 'perspective can be none');
  92
  93 test(function() {
  94     element.style.fontSize = '10px';
  95     var player = element.animate([{wordSpacing: '3em'}, {wordSpacing: '5em'}], 10);
  96     player.pause();
  97     player.currentTime = 5;
  98     element.style.fontSize = '20px';
  99     assert_equals(getComputedStyle(element).wordSpacing, '80px');
 100 }, 'wordSpacing responsive to style changes');
 101
 102 </script>