third_party/WebKit/LayoutTests/transitions/svg-visited-link-transitions.html

   1 <!DOCTYPE html>
   2 <style>
   3 a {
   4   text-decoration: none;
   5 }
   6
   7 .target {
   8   fill: lime;
   9   stroke: lime;
  10   transition-property: fill, stroke;
  11   transition-duration: 1000s;
  12   transition-timing-function: steps(2, start);
  13 }
  14
  15 .target.active {
  16   fill: red;
  17   stroke: red;
  18 }
  19
  20 .expected {
  21   fill: rgb(128, 128, 0);
  22   stroke: rgb(128, 128, 0);
  23 }
  24 </style>
  25
  26 Expected:<br>
  27 <svg width="204" height="100">
  28   <rect class="expected" x="2" y="2" stroke-width="2" width="96" height="96"/>
  29   <rect class="expected" x="106" y="2" stroke-width="2" width="96" height="96"/>
  30 </svg>
  31 <br>
  32 Actual:<br>
  33 <!-- Normal paint style transition. -->
  34 <a href="//unvisited.website">
  35   <svg width="100" height="100">
  36     <rect class="target" id="rectA" x="2" y="2" stroke-width="2" width="96" height="96"/>
  37   </svg>
  38 </a>
  39 <!-- Visited link paint style transition. -->
  40 <a href="">
  41   <svg width="100" height="100">
  42     <rect class="target" id="rectB" x="2" y="2" stroke-width="2" width="96" height="96"/>
  43   </svg>
  44 </a>
  45
  46 <script>
  47 document.getElementsByTagName("a")[1].offsetTop; // Force application of initial style.
  48 requestAnimationFrame(function() {
  49   rectA.classList.add('active');
  50   rectB.classList.add('active');
  51 });
  52 </script>