src/third_party/WebKit/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         .box.animating.moved {
  21             left: 200px;
  22         }
  23
  24         @-webkit-keyframes move {
  25             from {
  26                 left: 500px;
  27             }
  28             to   {
  29                 left: 501px;
  30             }
  31         }
  32
  33         #result {
  34             margin-top: 130px;
  35         }
  36     </style>
  37     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  38     <script type="text/javascript" charset="utf-8">
  39
  40     if (window.testRunner)
  41         testRunner.waitUntilDone();
  42
  43       const expectedValues = [
  44         // [time, element-id, property, expected-value, tolerance]
  45         [0.2, "test", "left", 200, 10],
  46       ];
  47
  48       function animationStarted()
  49       {
  50           document.getElementById('test').className = 'animating moved box';
  51       }
  52
  53       function setupTest()
  54       {
  55         document.getElementById('test').className = 'animating box';
  56         runAnimationTest(expectedValues, animationStarted, undefined, 'do-not-use-pause-api');
  57       }
  58
  59       window.addEventListener('load', function() {
  60           window.setTimeout(setupTest, 0);
  61       }, false);
  62
  63     </script>
  64 </head>
  65 <body>
  66     <p>Once animation has finished, box shouldn't transitioning.</p>
  67     <div id="test" class="box"></div>
  68     <div id="result"></div>
  69 </body>
  70 </html>