third_party/WebKit/LayoutTests/transitions/svg-layout-transition-zoom.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4   <style>
   5     .init {
   6       transition-duration: 1s;
   7       transition-timing-function: linear;
   8     }
   9
  10     #x {
  11       transition-property: x;
  12     }
  13     #x.final {
  14       x: 200px;
  15     }
  16
  17     #y {
  18       transition-property: y;
  19     }
  20     #y.final {
  21       y: 200px;
  22     }
  23   </style>
  24   <script src="../animations/resources/animation-test-helpers.js"></script>
  25   <script type="text/javascript">
  26
  27     const expectedValues = [
  28       // [time, element-id, property, expected-value, tolerance]
  29       [0.5, 'x', 'x', 150, 20],
  30       [0.5, 'y', 'y', 150, 20],
  31     ];
  32
  33     function setupTest()
  34     {
  35       document.getElementById('x').setAttribute('class', 'init final');
  36       document.getElementById('y').setAttribute('class', 'init final');
  37     }
  38
  39     runTransitionTest(expectedValues, setupTest);
  40   </script>
  41 </head>
  42 <body>
  43   <svg style="zoom: 2">
  44     <rect x="100" y="100" width="100" height="100" class="init" id="x"/>
  45     <rect x="100" y="100" width="100" height="100" class="init" id="y"/>
  46   </svg>
  47
  48   <div id="result">
  49   </div>
  50
  51 </body>
  52 </html>