third_party/WebKit/LayoutTests/animations/responsive-neutral-keyframes.html

   1 <!DOCTYPE html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4 <style>
   5   @keyframes anim-missing-from { to { width: 200px; height: 200px; } }
   6   @keyframes anim-missing-to { from { left: 100px; } }
   7   @keyframes anim-missing-both { 50% { left: 100px; } }
   8   @keyframes anim-missing-compositor { 100% { opacity: 0.0; } }
   9   @keyframes anim-missing-ems { from { top: 1em; } }
  10
  11   .target {
  12     visibility: hidden;
  13     position: absolute;
  14     width: 100px;
  15     height: 100px;
  16     background-color: rgb(0, 0, 0);
  17     left: 20px;
  18     top: 50px;
  19     font-size: 10px;
  20     opacity: 1.0;
  21   }
  22
  23   .target.changed {
  24     width: 600px;
  25     height: 300px;
  26     background-color: rgb(120, 160, 200);
  27     left: 200px;
  28     opacity: 0.5;
  29   }
  30
  31   #target1 { animation: anim-missing-from 4s -1s linear paused; }
  32   #target2 { animation: anim-missing-to 4s -1s linear paused; }
  33   #target3 { animation: anim-missing-both 4s -1s linear paused; }
  34   #target4 { animation: anim-missing-ems 4s -1s linear paused; }
  35   #target5 { animation: anim-missing-compositor 2s -1s linear paused; }
  36   #target6 { animation: anim-missing-from 1e10s linear; }
  37
  38 </style>
  39 <div id="target1" class="target"></div>
  40 <div id="target2" class="target"></div>
  41 <div id="target3" class="target"></div>
  42 <div id="target4" class="target"></div>
  43 <div id="target5" class="target"></div>
  44 <div id="target6" class="target"></div>
  45 <script>
  46   test(function() {
  47     assert_equals(parseInt(getComputedStyle(target1).width), 125);
  48     assert_equals(parseInt(getComputedStyle(target1).height), 125);
  49     target1.classList.add('changed');
  50     assert_equals(parseInt(getComputedStyle(target1).width), 500);
  51     assert_equals(parseInt(getComputedStyle(target1).height), 275);
  52   }, "Check that animations missing 'from' keyframes are responsive to underlying style changes");
  53
  54   test(function() {
  55     assert_equals(parseInt(getComputedStyle(target2).left), 80);
  56     target2.classList.add('changed');
  57     assert_equals(parseInt(getComputedStyle(target2).left), 125);
  58   }, "Check that animations missing 'to' keyframes are responsive to underlying style changes");
  59
  60   test(function() {
  61     assert_equals(parseInt(getComputedStyle(target3).left), 60);
  62     target3.classList.add('changed');
  63     assert_equals(parseInt(getComputedStyle(target3).left), 150);
  64   }, "Check that animations missing both 'from' and 'to' keyframes are responsive to underlying style changes");
  65
  66   test(function() {
  67     assert_equals(parseInt(getComputedStyle(target4).top), 20);
  68     target4.style.fontSize = '90px';
  69     assert_equals(parseInt(getComputedStyle(target4).top), 80);
  70   }, "Check that animations with neutral keyframes are responsive to font size changes");
  71
  72   test(function() {
  73     assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.5, 0.001);
  74     target5.classList.add('changed');
  75     assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.25, 0.001);
  76   }, "Check that composited animations with neutral keyframes are responsive to underlying style changes");
  77
  78   var async = async_test("Check that running animations with neutral keyframes are responsive to style changes");
  79   requestAnimationFrame(function() {
  80     assert_less_than(parseInt(getComputedStyle(target6).width), 200);
  81     requestAnimationFrame(function() {
  82       target6.classList.add('changed');
  83       assert_greater_than(parseInt(getComputedStyle(target6).width), 200);
  84       async.done();
  85     });
  86   });
  87 </script>