LayoutTests/animations/transition-and-animation-3.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5     <style type="text/css" media="screen">
   6         .box {
   7             position: absolute;
   8             height: 100px;
   9             width: 100px;
  10             left: 0px;
  11             background-color: blue;
  12         }
  13
  14         .box.animating {
  15             -webkit-animation: move 0.1s linear;
  16             left: 100px;
  17             -webkit-transition: left 10s linear;
  18         }
  19
  20         /* When the animation is done, the box should be running a transition from 100px to 200px */
  21         .box.animating.moved {
  22             left: 200px;
  23         }
  24
  25         @-webkit-keyframes move {
  26             from {
  27                 left: 500px;
  28             }
  29             to   {
  30                 left: 501px;
  31             }
  32         }
  33
  34         #result {
  35             margin-top: 130px;
  36         }
  37     </style>
  38     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  39     <script type="text/javascript" charset="utf-8">
  40
  41     if (window.layoutTestController)
  42         layoutTestController.waitUntilDone();
  43
  44       const expectedValues = [
  45         // [animation-name, time, element-id, property, expected-value, tolerance]
  46         [null, 0.2, "test", "left", 100, 10],
  47       ];
  48
  49       function animationStarted()
  50       {
  51           document.getElementById('test').className = 'animating moved box';
  52       }
  53
  54       function setupTest()
  55       {
  56         document.getElementById('test').className = 'animating box';
  57         runAnimationTest(expectedValues, animationStarted);
  58       }
  59
  60       window.addEventListener('load', function() {
  61           window.setTimeout(setupTest, 0);
  62       }, false);
  63
  64     </script>
  65 </head>
  66 <body>
  67     <p>Once animation has finished, box should be running left transition from 100px to 200px.</p>
  68     <div id="test" class="box"></div>
  69     <div id="result"></div>
  70 </body>
  71 </html>