| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| |
| <html lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <title>Dynamic Keyframes test</title> |
| <style type="text/css" media="screen"> |
| .box { |
| position: absolute; |
| left: 0; |
| top: 100px; |
| height: 100px; |
| width: 100px; |
| background-color: blue; |
| -webkit-animation-duration: 1s; |
| -webkit-animation-timing-function: linear; |
| } |
| #box2 { top: 210px; } |
| #box3 { top: 320px; } |
| </style> |
| <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script> |
| <script type="text/javascript" charset="utf-8"> |
| |
| const expectedValues = [ |
| // [animation-name, time, element-id, property, expected-value, tolerance] |
| ["anim1", 0.3, "box1", "left", 100, 1], |
| ["anim1", 0.7, "box1", "left", 200, 1], |
| ["anim2", 0.3, "box2", "left", 100, 1], |
| ["anim2", 0.7, "box2", "left", 200, 1], |
| ]; |
| |
| function addKeyframes() { |
| var style = document.createElement('style'); |
| document.head.appendChild(style); |
| var keyframes = |
| "{\n" + |
| " from { left: 50px; }\n" + |
| " 20% { left: 100px; }\n" + |
| " 40% { left: 100px; }\n" + |
| " 60% { left: 200px; }\n" + |
| " 80% { left: 200px; }\n" + |
| " to { left: 300px; }\n" + |
| "}"; |
| var box1Keyframes = "@-webkit-keyframes anim1 " + keyframes; |
| var box2Keyframes = "@-webkit-keyframes anim2 " + keyframes; |
| var box3Keyframes = "@-webkit-keyframes anim3 " + keyframes; |
| |
| style.sheet.insertRule(box1Keyframes, 0); |
| var box2Index = style.sheet.insertRule(box2Keyframes, 0); |
| var box3Index = style.sheet.insertRule(box3Keyframes, 0); |
| |
| var box1 = document.getElementById("box1"); |
| var box2 = document.getElementById("box2"); |
| var box3 = document.getElementById("box3"); |
| |
| box1.style.webkitAnimationName = 'anim1'; |
| box2.style.webkitAnimationName = 'anim2'; |
| box3.style.webkitAnimationName = 'anim3'; |
| |
| box2.addEventListener('webkitAnimationStart', |
| function() { style.sheet.removeRule(box2Index); }, true); |
| |
| style.sheet.removeRule(box3Index); |
| |
| runAnimationTest(expectedValues, () => { |
| setTimeout(() => { |
| document.getElementById("result").appendChild(document.createTextNode(`${!box3.getAnimations().length ? "PASS" : "FAIL"} - Animation is not running on box3.`)); |
| }) |
| }); |
| } |
| |
| window.addEventListener('DOMContentLoaded', addKeyframes, false); |
| |
| </script> |
| </head> |
| <body> |
| This test performs an animation of the left property. It should stop for 100ms at 100px and 200px |
| We test for those values 50ms after it has stopped at each position. The animations for the three |
| boxes are inserted by JavaScript. The first box's keyframes remain in the stylesheet. The second |
| box's keyframes are removed after its animation starts (but it should animate). The third box's |
| keyframes are removed before its animation starts, and it should not animate. |
| <div class="box" id="box1"> |
| </div> |
| <div class="box" id="box2"> |
| </div> |
| <div class="box" id="box3"> |
| </div> |
| <div id="result"> |
| </div> |
| </body> |
| </html> |
