| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] --> |
| |
| <html lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| <title>Test of dynamic stylesheet loading</title> |
| <link rel="stylesheet" href="resources/dynamic-stylesheet-insertion-main.css"> |
| <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] |
| ["splashdown", 0.3, "splash", "webkitTransform.5", 100, 0.1], |
| ]; |
| |
| var controller = {}; |
| |
| controller.init = function () { |
| // put a listener on the initial splash animation |
| this.splash = document.getElementById('splash'); |
| this.splash.addEventListener('webkitAnimationStart', this, false); |
| this.splash.addEventListener('webkitAnimationEnd', this, false); |
| |
| runAnimationTest(expectedValues, undefined, undefined, true); |
| }; |
| |
| controller.handleEvent = function (event) { |
| if (event.type == 'webkitAnimationStart') { |
| // pre-load the stylesheet |
| var link = document.createElement('link'); |
| link.rel = 'stylesheet'; |
| link.href = 'resources/dynamic-stylesheet-insertion-inserted.css'; |
| document.head.appendChild(link); |
| } |
| }; |
| |
| window.addEventListener('DOMContentLoaded', function () { |
| controller.init(); |
| }, false); |
| |
| </script> |
| </head> |
| <body> |
| This test performs an animation and then dynamically loads a new stylesheet (which is empty). It should start |
| animating after a 100ms delay and then stop halfway through the animation at which point we see if it is at the |
| correct position. The loading of the stylesheet should not prevent the animation from running. |
| <div id="splash"></div> |
| <div id="result"> |
| </div> |
| </body> |
| </html> |
