| <!DOCTYPE html> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <style> |
| #track { |
| d: path('M20,100 H180'); |
| stroke: blue; |
| } |
| </style> |
| <svg id="svgRoot" width="200" height="200"> |
| |
| <path id="track" d="M20,20 H180"/> |
| |
| <circle r="10" cx="0" cy="0" fill="green"> |
| <animateMotion dur="5s" fill="freeze"> |
| <mpath xlink:href="#track"/> |
| </animateMotion> |
| </circle> |
| </svg> |
| <script> |
| 'use strict'; |
| runAfterLayoutAndPaint(function() { |
| document.getElementById('track').setAttribute('d', 'M100,20 V180'); |
| document.getElementById('svgRoot').setCurrentTime(5); |
| }, true); |
| </script> |
