LayoutTests/animations/dynamic-stylesheet-loading.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   8   <title>Test of dynamic stylesheet loading</title>
   9   <link rel="stylesheet" href="resources/dynamic-stylesheet-insertion-main.css">
  10     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  11     <script type="text/javascript" charset="utf-8">
  12
  13     const expectedValues = [
  14       // [animation-name, time, element-id, property, expected-value, tolerance]
  15       ["splashdown", 0.3, "splash", "webkitTransform.5", 100, 0.1],
  16     ];
  17
  18     var controller = {};
  19
  20     controller.init = function () {
  21         // put a listener on the initial splash animation
  22         this.splash = document.getElementById('splash');
  23         this.splash.addEventListener('webkitAnimationStart', this, false);
  24         this.splash.addEventListener('webkitAnimationEnd', this, false);
  25
  26         runAnimationTest(expectedValues, undefined, undefined, true);
  27     };
  28
  29     controller.handleEvent = function (event) {
  30         if (event.type == 'webkitAnimationStart') {
  31             // pre-load the stylesheet
  32             var link = document.createElement('link');
  33             link.rel = 'stylesheet';
  34             link.href = 'resources/dynamic-stylesheet-insertion-inserted.css';
  35             document.head.appendChild(link);
  36         }
  37     };
  38
  39     window.addEventListener('DOMContentLoaded', function () {
  40         controller.init();
  41     }, false);
  42
  43   </script>
  44 </head>
  45 <body>
  46 This test performs an animation and then dynamically loads a new stylesheet (which is empty). It should start
  47 animating after a 100ms delay and then stop halfway through the animation at which point we see if it is at the
  48 correct position. The loading of the stylesheet should not prevent the animation from running.
  49 <div id="splash"></div>
  50 <div id="result">
  51 </div>
  52 </body>
  53 </html>