| 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 |