| <!DOCTYPE html> |
| <style> |
| a { |
| text-decoration: none; |
| } |
| |
| .target { |
| fill: lime; |
| stroke: lime; |
| transition-property: fill, stroke; |
| transition-duration: 1000s; |
| transition-timing-function: steps(2, start); |
| } |
| |
| .target.active { |
| fill: red; |
| stroke: red; |
| } |
| |
| .expected { |
| fill: rgb(128, 128, 0); |
| stroke: rgb(128, 128, 0); |
| } |
| </style> |
| |
| Expected:<br> |
| <svg width="204" height="100"> |
| <rect class="expected" x="2" y="2" stroke-width="2" width="96" height="96"/> |
| <rect class="expected" x="106" y="2" stroke-width="2" width="96" height="96"/> |
| </svg> |
| <br> |
| Actual:<br> |
| <!-- Normal paint style transition. --> |
| <a href="//unvisited.website"> |
| <svg width="100" height="100"> |
| <rect class="target" id="rectA" x="2" y="2" stroke-width="2" width="96" height="96"/> |
| </svg> |
| </a> |
| <!-- Visited link paint style transition. --> |
| <a href=""> |
| <svg width="100" height="100"> |
| <rect class="target" id="rectB" x="2" y="2" stroke-width="2" width="96" height="96"/> |
| </svg> |
| </a> |
| |
| <script> |
| document.getElementsByTagName("a")[1].offsetTop; // Force application of initial style. |
| requestAnimationFrame(function() { |
| rectA.classList.add('active'); |
| rectB.classList.add('active'); |
| }); |
| </script> |
