third_party/WebKit/LayoutTests/animations/unanimated-style.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 1s linear;
  16             left: 400px;
  17         }
  18
  19         @-webkit-keyframes move {
  20             from {
  21             }
  22             to   {
  23                 left: 500px;
  24             }
  25         }
  26
  27         #result {
  28             margin-top: 130px;
  29         }
  30     </style>
  31     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  32     <script type="text/javascript" charset="utf-8">
  33
  34     if (window.testRunner)
  35         testRunner.waitUntilDone();
  36
  37       const expectedValues = [
  38         // [time, element-id, property, expected-value, tolerance]
  39         [0.5, "test", "left", 450, 8],
  40       ];
  41
  42       function setupTest()
  43       {
  44         document.getElementById('test').className = 'animating box';
  45         runAnimationTest(expectedValues);
  46       }
  47
  48       window.addEventListener('load', function() {
  49           window.setTimeout(setupTest, 0);
  50       }, false);
  51
  52     </script>
  53 </head>
  54 <body>
  55     <p>Box should animate from left of 400px to 500px.</p>
  56     <div id="test" class="box"></div>
  57     <div id="result"></div>
  58 </body>
  59 </html>