| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Test Changing Name of A Keyframes Rule Using CSSOM</title> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| #target { |
| position: absolute; |
| left: 0; |
| top: 0; |
| height: 100px; |
| width: 100px; |
| background-color: blue; |
| animation-duration: 0.05s; |
| animation-fill-mode: forwards; |
| animation-timing-function: linear; |
| animation-name: bar; |
| } |
| @keyframes foo { |
| from { left: 100px; } |
| to { left: 200px; } |
| } |
| </style> |
| </head> |
| <body> |
| <div id="target"></div> |
| <script> |
| 'use strict'; |
| |
| function findKeyframesRule(rule) |
| { |
| var ss = document.styleSheets; |
| for (var i = 0; i < ss.length; ++i) { |
| for (var j = 0; j < ss[i].cssRules.length; ++j) { |
| if (ss[i].cssRules[j].type == window.CSSRule.KEYFRAMES_RULE && ss[i].cssRules[j].name == rule) |
| return ss[i].cssRules[j]; |
| } |
| } |
| |
| return null; |
| } |
| |
| async_test(t => { |
| target.offsetTop; // Force style recalc |
| |
| document.addEventListener('animationend', t.step_func_done(() => { |
| assert_equals(getComputedStyle(target).left, '200px'); |
| })); |
| |
| t.step(() => { |
| |
| // change keyframes name |
| var keyframes = findKeyframesRule('foo'); |
| assert_not_equals(keyframes, null); |
| keyframes.name = 'anim'; |
| target.style.animationName = 'anim'; |
| |
| assert_equals(getComputedStyle(target).left, '100px', 'animation not started'); |
| }); |
| }, 'Changing Name of A Keyframes Rule Using CSSOM starts animation'); |
| </script> |
| </body> |
| </html> |
