| <!DOCTYPE html> |
| <svg> |
| <marker id="a" markerWidth="2" markerHeight="2" refX="1" refY="1"> |
| <rect width="2" height="2" fill="red"/> |
| </marker> |
| <marker id="b" markerWidth="2" markerHeight="2" refX="1" refY="1"> |
| <rect width="2" height="2" fill="green"/> |
| </marker> |
| <line stroke-width="50" stroke="red" y1="50" x2="50" y2="50"> |
| <animate attributeName="marker-end" fill="freeze" dur="10s" values="url(#a);url(#b)"/> |
| </line> |
| </svg> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| // Advance the timeline to just before the value transition, then wait |
| // for two frames (first red, second green.) |
| // NOTE: Because of "legacy" in the animation engine, we first wait for 25ms, |
| // since no updates will be performed prior to that. Without this the two rAF |
| // calls ought to be enough. |
| document.querySelector('svg').setCurrentTime(5 - 0.001); |
| onload = function() { |
| setTimeout(function() { |
| setTimeout(function() { |
| requestAnimationFrame(function() { |
| requestAnimationFrame(function() { |
| testRunner.notifyDone(); |
| }); |
| }); |
| }, 25); |
| }); |
| }; |
| </script> |
