third_party/WebKit/LayoutTests/transitions/svg-layout-transition.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
  24     .r {
  25       transition-property: r;
  26     }
  27     .r.final {
  28       r: 200px;
  29     }
  30
  31     .rx {
  32       transition-property: rx;
  33     }
  34     .rx.final {
  35       rx: 200px;
  36     }
  37
  38     .ry {
  39       transition-property: ry;
  40     }
  41     .ry.final {
  42       ry: 200px;
  43     }
  44
  45     .cx {
  46       transition-property: cx;
  47     }
  48     .cx.final {
  49       cx: 200px;
  50     }
  51
  52     .cy {
  53       transition-property: cy;
  54     }
  55     .cy.final {
  56       cy: 200px;
  57     }
  58   </style>
  59   <script src="../animations/resources/animation-test-helpers.js"></script>
  60   <script type="text/javascript">
  61
  62     const expectedValues = [
  63       // [time, element-id, property, expected-value, tolerance]
  64       [0.5, 'x', 'x', 150, 20],
  65       [0.5, 'y', 'y', 150, 20],
  66       [0.5, 'sx', 'x', 150, 20],
  67       [0.5, 'sy', 'y', 150, 20],
  68       [0.5, 'mx', 'x', 150, 20],
  69       [0.5, 'my', 'y', 150, 20],
  70       [0.5, 'ix', 'x', 150, 20],
  71       [0.5, 'iy', 'y', 150, 20],
  72       [0.5, 'fx', 'x', 150, 20],
  73       [0.5, 'fy', 'y', 150, 20],
  74       [0.5, 'rx', 'rx', 150, 20],
  75       [0.5, 'ry', 'ry', 150, 20],
  76       [0.5, 'erx', 'rx', 150, 20],
  77       [0.5, 'ery', 'ry', 150, 20],
  78       [0.5, 'cr', 'r', 150, 20],
  79       [0.5, 'cx', 'cx', 150, 20],
  80       [0.5, 'cy', 'cy', 150, 20],
  81     ];
  82     function setupTest()
  83     {
  84       for (var i = 0; i < expectedValues.length; i++)
  85         document.getElementById(expectedValues[i][1]).classList.add("final");
  86     }
  87
  88     runTransitionTest(expectedValues, setupTest);
  89   </script>
  90 </head>
  91 <body>
  92   <svg>
  93     <rect x="100" y="100" width="100" height="100" class="init x" id="x"/>
  94     <rect x="100" y="100" width="100" height="100" class="init y" id="y"/>
  95     <svg id="sx" class="init x" x="100"/>
  96     <svg id="sy" class="init y" y="100"/>
  97     <mask id="mx" class="init x" x="100"/>
  98     <mask id="my" class="init y" y="100"/>
  99     <image id="ix" class="init x" x="100" y="100" width="100" height="100"/>
 100     <image id="iy" class="init y" x="100" y="100" width="100" height="100"/>
 101     <foreignObject id="fx" class="init x" x="100" y="100" width="100" height="100"/>
 102     <foreignObject id="fy" class="init y" x="100" y="100" width="100" height="100"/>
 103     <rect x="100" y="100" width="100" height="100" rx="100" ry="100" class="init rx" id="rx"/>
 104     <rect x="100" y="100" width="100" height="100" rx="100" ry="100" class="init ry" id="ry"/>
 105     <ellipse class="init rx" rx="100" ry="100" id="erx"/>
 106     <ellipse class="init ry" rx="100" ry="100" id="ery"/>
 107     <circle class="init r" cx="100" cy="100" r="100" id="cr"/>
 108     <circle class="init cx" cx="100" cy="100" r="100" id="cx"/>
 109     <circle class="init cy" cx="100" cy="100" r="100" id="cy"/>
 110   </svg>
 111
 112   <div id="result">
 113   </div>
 114 </body>
 115 </html>