src/third_party/WebKit/LayoutTests/compositing/animation/computed-style-during-delay.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5     <style type="text/css" media="screen">
   6         .box {
   7             height: 100px;
   8             width: 100px;
   9             margin: 20px;
  10             background-color: blue;
  11             transform: translate3d(0, 0, 0);
  12         }
  13
  14         #movers.moved > .box {
  15             -webkit-animation: move 1s 1s linear; /* Note 1 sec delay */
  16         }
  17
  18         /* Test that we fetch the current style, not the one snapshotted when the animation started */
  19         #movers.moved > #changedbox {
  20             transform: translate3d(50px, 0, 0);
  21         }
  22
  23         /* Test that fill-mode: backwards works */
  24         #movers.moved > #filledbox {
  25             -webkit-animation: move 1s 1s linear backwards;
  26         }
  27
  28         @-webkit-keyframes move {
  29             from { transform: translateX(100px);   }
  30             to   { transform: translateX(400px); }
  31         }
  32     </style>
  33     <script type="text/javascript" charset="utf-8">
  34         if (window.testRunner) {
  35             testRunner.dumpAsText();
  36             testRunner.waitUntilDone();
  37         }
  38
  39         var results = [];
  40         function check(message, expected, actual) {
  41             if (expected == actual) {
  42                 results.push('PASS - ' + message);
  43             } else {
  44                 results.push('FAIL - ' + actual);
  45             }
  46         }
  47
  48         onload = function() {
  49             document.getElementById('movers').className = 'moved';
  50             document.body.offsetTop;
  51             check('default', 'matrix(1, 0, 0, 1, 0, 0)', getComputedStyle(document.querySelector('#testbox')).webkitTransform);
  52             check('changed style', 'matrix(1, 0, 0, 1, 50, 0)', getComputedStyle(document.querySelector('#changedbox')).webkitTransform);
  53             check('backwards fill', 'matrix(1, 0, 0, 1, 100, 0)', getComputedStyle(document.querySelector('#filledbox')).webkitTransform);
  54             document.body.innerHTML = results.join('<br>');
  55             if (window.testRunner)
  56                 testRunner.notifyDone();
  57         }
  58
  59     </script>
  60 </head>
  61 <body>
  62     <p>Test computed style during the delay phase of an accelerated animation.</p>
  63     <div id="movers">
  64         <div id="testbox" class="box"></div>
  65         <div id="changedbox" class="box"></div>
  66         <div id="filledbox" class="box"></div>
  67     </div>
  68     <div id="result">
  69     </div>
  70 </body>
  71 </html>