animations/dynamic-stylesheet-loading.html

<!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">
  <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>