third_party/WebKit/LayoutTests/animations/dynamic-stylesheet-loading.html

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