third_party/WebKit/LayoutTests/animations/keyframes-cssom-change-name-updates-animation.html

   1 <!doctype html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4 <style>
   5   @keyframes anim {
   6     0% { left: 100px; }
   7     100% { left: 100px; }
   8   }
   9
  10   #target {
  11       animation: anim 1s paused;
  12       left: 0px;
  13   }
  14
  15 </style>
  16 <div id="target"></div>
  17 <script>
  18   test(function() {
  19     var sheet = document.styleSheets[0];
  20     var rules = sheet.rules;
  21     var keyframes = rules[0];
  22
  23     assert_equals(parseInt(getComputedStyle(target).left), 100, 'left offset');
  24     keyframes.name = 'foobar';
  25     assert_equals(parseInt(getComputedStyle(target).left), 0,  'left offset');
  26     keyframes.name = 'anim';
  27     assert_equals(parseInt(getComputedStyle(target).left), 100,  'left offset');
  28
  29   }, "Check that changes to @keyframes name updates the animating element accordingly");
  30 </script>