third_party/WebKit/LayoutTests/compositing/transitions/singular-scale-transition.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <title>Singular scale</title>
   6   <style type="text/css" media="screen">
   7     #box {
   8       height: 200px;
   9       width: 200px;
  10       border: 1px solid black;
  11     }
  12
  13     #inner {
  14       height: 200px;
  15       width: 200px;
  16       background-color: gray;
  17       transform: scale(0);
  18       -webkit-transition: -webkit-transform 1s linear;
  19     }
  20
  21     #box.final #inner {
  22       transform: scale(1);
  23     }
  24
  25     #box:hover #inner {
  26       transform: scale(1);
  27     }
  28   </style>
  29
  30   <script src="../../animations/resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  31   <script type="text/javascript" charset="utf-8">
  32
  33     const expectedValues = [
  34       // [time, element-id, property, expected-value, tolerance]
  35       [0.5, 'inner', '-webkit-transform.0', 0.5, 0.1],
  36     ];
  37
  38     function setupTest()
  39     {
  40       var box = document.getElementById('box');
  41       box.className = 'final';
  42     }
  43     runTransitionTest(expectedValues, setupTest, undefined, true /* pixel test */);
  44   </script>
  45 </head>
  46 <body>
  47   <p>Check the pixel result to make sure that the gray square is half way through the scale animation.</p>
  48   <div id="box">
  49     <div id="inner">
  50     </div>
  51   </div>
  52
  53   <div id="result"></div>
  54 </body>
  55 </html>