third_party/WebKit/LayoutTests/compositing/transitions/scale-transition-no-start.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <title>Scale without initial value.</title>
   6   <style type="text/css" media="screen">
   7     .box {
   8       height: 200px;
   9       width: 200px;
  10       border: 1px solid #EEE;
  11     }
  12
  13     .indicator {
  14       position: absolute;
  15       height: 150px;
  16       width: 150px;
  17       margin: 25px;
  18       -webkit-box-sizing: border-box;
  19       border: 1px solid black;
  20     }
  21
  22     .inner {
  23       height: 100px;
  24       width: 100px;
  25       margin: 50px;
  26       background-color: green;
  27       opacity: 0.7;
  28       -webkit-transition: -webkit-transform 1s linear;
  29     }
  30
  31     .box.final #inner1 {
  32       transform: scale(2);
  33     }
  34
  35     .box.final #inner2 {
  36       transform: scaleX(2);
  37     }
  38   </style>
  39
  40   <script src="../../animations/resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  41   <script type="text/javascript" charset="utf-8">
  42
  43     const expectedValues = [
  44       // [time, element-id, property, expected-value, tolerance]
  45       [0.5, 'inner1', '-webkit-transform.0', 1.5, 0.1],
  46       [0.5, 'inner2', '-webkit-transform.0', 1.5, 0.1],
  47     ];
  48
  49     function setupTest()
  50     {
  51       var boxes = document.querySelectorAll('.box');
  52       boxes[0].className = 'box final';
  53       boxes[1].className = 'box final';
  54     }
  55     runTransitionTest(expectedValues, setupTest, undefined, true /* pixel test */);
  56   </script>
  57 </head>
  58 <body>
  59   <p>In the pixel result, the green boxes should be coincident with the black outline.</p>
  60   <div class="box" id="box1">
  61     <div class="indicator"></div>
  62     <div class="inner" id="inner1"></div>
  63   </div>
  64
  65   <div class="box" id="box2">
  66     <div class="indicator"></div>
  67     <div class="inner" id="inner2"></div>
  68   </div>
  69
  70   <div id="result"></div>
  71 </body>
  72 </html>