third_party/WebKit/LayoutTests/compositing/animation/animation-compositing.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       background-color: blue;
  10     }
  11
  12     .spinning {
  13       -webkit-animation: spin 2s infinite linear;
  14     }
  15
  16     @-webkit-keyframes spin {
  17       from { transform: rotate(0); }
  18       to   { transform: rotate(360deg); }
  19     }
  20   </style>
  21   <script type="text/javascript" charset="utf-8">
  22     if (window.testRunner) {
  23         testRunner.dumpAsText();
  24         testRunner.waitUntilDone();
  25     }
  26
  27     function doTest()
  28     {
  29       var box = document.getElementById('box');
  30       box.addEventListener('webkitAnimationStart', function() {
  31         if (window.testRunner) {
  32             var layers = window.internals.layerTreeAsText(document);
  33             var result;
  34             if (layers != "")
  35               result = "PASS: created compositing layers when animating transform.";
  36             else
  37               result = "FAIL: no layers found";
  38             document.getElementById('result').innerHTML = result;
  39             testRunner.notifyDone();
  40         }
  41       }, false);
  42       document.getElementById('box').className = 'spinning';
  43     }
  44
  45     window.addEventListener('load', doTest, false);
  46   </script>
  47 </head>
  48 <body>
  49
  50   <div id="box" class="box"></div>
  51
  52   <!-- We should create layers, even on platforms that don't support accelerated animation. -->
  53   <div id="result">Test only works in DRT</div>
  54
  55 </body>
  56 </html>