| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 a { | 3 a { |
| 4 text-decoration: none; | 4 text-decoration: none; |
| 5 } | 5 } |
| 6 | 6 |
| 7 .target { | 7 .target { |
| 8 fill: lime; | 8 fill: lime; |
| 9 stroke: lime; | 9 stroke: lime; |
| 10 transition-property: fill, stroke; | 10 transition-property: fill, stroke; |
| (...skipping 26 matching lines...) Expand all Loading... |
| 37 </svg> | 37 </svg> |
| 38 </a> | 38 </a> |
| 39 <!-- Visited link paint style transition. --> | 39 <!-- Visited link paint style transition. --> |
| 40 <a href=""> | 40 <a href=""> |
| 41 <svg width="100" height="100"> | 41 <svg width="100" height="100"> |
| 42 <rect class="target" id="rectB" x="2" y="2" stroke-width="2" width="96" heig
ht="96"/> | 42 <rect class="target" id="rectB" x="2" y="2" stroke-width="2" width="96" heig
ht="96"/> |
| 43 </svg> | 43 </svg> |
| 44 </a> | 44 </a> |
| 45 | 45 |
| 46 <script> | 46 <script> |
| 47 document.getElementsByTagName("a")[1].offsetTop; // Force application of initial
style. |
| 47 requestAnimationFrame(function() { | 48 requestAnimationFrame(function() { |
| 48 rectA.classList.add('active'); | 49 rectA.classList.add('active'); |
| 49 rectB.classList.add('active'); | 50 rectB.classList.add('active'); |
| 50 }); | 51 }); |
| 51 </script> | 52 </script> |
| OLD | NEW |