| <!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; |
| } |
| </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], |
| ]; |
| |
| function setupTest() |
| { |
| document.getElementById('x').setAttribute('class', 'init final'); |
| document.getElementById('y').setAttribute('class', 'init final'); |
| } |
| |
| runTransitionTest(expectedValues, setupTest); |
| </script> |
| </head> |
| <body> |
| <svg style="zoom: 2"> |
| <rect x="100" y="100" width="100" height="100" class="init" id="x"/> |
| <rect x="100" y="100" width="100" height="100" class="init" id="y"/> |
| </svg> |
| |
| <div id="result"> |
| </div> |
| |
| </body> |
| </html> |
