| <!DOCTYPE> |
| <html> |
| <head> |
| <style> |
| .init { |
| transition-duration: 1s; |
| transition-timing-function: linear; |
| } |
| |
| .x { |
| transition-property: x; |
| } |
| .x.final { |
| x: 200px; |
| } |
| |
| .y { |
| transition-property: y; |
| } |
| .y.final { |
| y: 200px; |
| } |
| |
| .r { |
| transition-property: r; |
| } |
| .r.final { |
| r: 200px; |
| } |
| |
| .rx { |
| transition-property: rx; |
| } |
| .rx.final { |
| rx: 200px; |
| } |
| |
| .ry { |
| transition-property: ry; |
| } |
| .ry.final { |
| ry: 200px; |
| } |
| |
| .cx { |
| transition-property: cx; |
| } |
| .cx.final { |
| cx: 200px; |
| } |
| |
| .cy { |
| transition-property: cy; |
| } |
| .cy.final { |
| cy: 200px; |
| } |
| </style> |
| <script src="../animations/resources/animation-test-helpers.js"></script> |
| <script type="text/javascript"> |
| |
| const expectedValues = [ |
| // [time, element-id, property, expected-value, tolerance] |
| [0.5, 'x', 'x', 150, 20], |
| [0.5, 'y', 'y', 150, 20], |
| [0.5, 'sx', 'x', 150, 20], |
| [0.5, 'sy', 'y', 150, 20], |
| [0.5, 'mx', 'x', 150, 20], |
| [0.5, 'my', 'y', 150, 20], |
| [0.5, 'ix', 'x', 150, 20], |
| [0.5, 'iy', 'y', 150, 20], |
| [0.5, 'fx', 'x', 150, 20], |
| [0.5, 'fy', 'y', 150, 20], |
| [0.5, 'rx', 'rx', 150, 20], |
| [0.5, 'ry', 'ry', 150, 20], |
| [0.5, 'erx', 'rx', 150, 20], |
| [0.5, 'ery', 'ry', 150, 20], |
| [0.5, 'cr', 'r', 150, 20], |
| [0.5, 'cx', 'cx', 150, 20], |
| [0.5, 'cy', 'cy', 150, 20], |
| ]; |
| function setupTest() |
| { |
| for (var i = 0; i < expectedValues.length; i++) |
| document.getElementById(expectedValues[i][1]).classList.add("final"); |
| } |
| |
| runTransitionTest(expectedValues, setupTest); |
| </script> |
| </head> |
| <body> |
| <svg> |
| <rect x="100" y="100" width="100" height="100" class="init x" id="x"/> |
| <rect x="100" y="100" width="100" height="100" class="init y" id="y"/> |
| <svg id="sx" class="init x" x="100"/> |
| <svg id="sy" class="init y" y="100"/> |
| <mask id="mx" class="init x" x="100"/> |
| <mask id="my" class="init y" y="100"/> |
| <image id="ix" class="init x" x="100" y="100" width="100" height="100"/> |
| <image id="iy" class="init y" x="100" y="100" width="100" height="100"/> |
| <foreignObject id="fx" class="init x" x="100" y="100" width="100" height="100"/> |
| <foreignObject id="fy" class="init y" x="100" y="100" width="100" height="100"/> |
| <rect x="100" y="100" width="100" height="100" rx="100" ry="100" class="init rx" id="rx"/> |
| <rect x="100" y="100" width="100" height="100" rx="100" ry="100" class="init ry" id="ry"/> |
| <ellipse class="init rx" rx="100" ry="100" id="erx"/> |
| <ellipse class="init ry" rx="100" ry="100" id="ery"/> |
| <circle class="init r" cx="100" cy="100" r="100" id="cr"/> |
| <circle class="init cx" cx="100" cy="100" r="100" id="cx"/> |
| <circle class="init cy" cx="100" cy="100" r="100" id="cy"/> |
| </svg> |
| |
| <div id="result"> |
| </div> |
| </body> |
| </html> |
