| <svg xmlns="http://www.w3.org/2000/svg"> |
| <ellipse id="ellipse-1" cx="40" cy="60" rx="20" ry="0" fill="green"/> |
| <ellipse id="ellipse-2" cx="90" cy="60" ry="30" rx="0" fill="green"/> |
| |
| <ellipse id="ellipse-3" cx="160" cy="60" rx="20" ry="0" fill="green"> |
| <animate attributeType="XML" attributeName="rx" from="20" to="40" dur="1s" fill="freeze"/> |
| </ellipse> |
| |
| <ellipse id="ellipse-4" cx="250" cy="60" ry="20" rx="0" fill="green"> |
| <animate attributeType="XML" attributeName="ry" from="20" to="50" dur="1s" fill="freeze"/> |
| </ellipse> |
| |
| <use y="100" href="#ellipse-1"/> |
| <use y="100" href="#ellipse-2"/> |
| <use y="100" href="#ellipse-3"/> |
| <use y="100" href="#ellipse-4"/> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| window.addEventListener('load', (event) => { |
| let ellipse1 = document.getElementById('ellipse-1'); |
| let ellipse2 = document.getElementById('ellipse-2'); |
| let ellipse3 = document.getElementById('ellipse-3'); |
| let ellipse4 = document.getElementById('ellipse-4'); |
| |
| ellipse1.style['ry'] = 'auto'; |
| ellipse2.style['rx'] = 'auto'; |
| ellipse3.style['ry'] = 'auto'; |
| ellipse4.style['rx'] = 'auto'; |
| |
| document.documentElement.setCurrentTime(5); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| </script> |
| </svg> |
