LayoutTests/transitions/visited-link-color.html

   1 <html>
   2 <head>
   3 <style>
   4 a {
   5     font-size: 300%;
   6     -webkit-transition: all 1s linear;
   7     background-color: #00F;
   8     border: 8px solid #F00;
   9     color: #0F0;
  10     outline: 8px solid #0F0;
  11     -webkit-column-rule-color: #0F0;
  12     -webkit-text-stroke-color: #0F0;
  13     -webkit-text-fill-color: #0F0;
  14 }
  15 .changed {
  16     background-color: #0F0;
  17     border: 8px solid #00F;
  18     color: #F00;
  19     outline: 8px solid #F00;
  20     -webkit-column-rule-color: #F00;
  21     -webkit-text-stroke-color: #F00;
  22     -webkit-text-fill-color: #00F;
  23 }
  24 </style>
  25 <script src="resources/transition-test-helpers.js"></script>
  26 <script>
  27     const expectedValues = [
  28     // [time, element-id, property, expected-value, tolerance, post-completion callback, should-be-transitioning]
  29     [0.5, 'link', 'color', [127, 127, 0], 10, null, shouldBeTransitioning],
  30     [0.5, 'link', 'background-color', [0, 127, 127], 10, null, shouldBeTransitioning],
  31     [0.5, 'link', 'border-left-color', [127, 0, 127], 10, null, shouldBeTransitioning],
  32     [0.5, 'link', 'border-right-color', [127, 0, 127], 10, null, shouldBeTransitioning],
  33     [0.5, 'link', 'border-top-color', [127, 0, 127], 10, null, shouldBeTransitioning],
  34     [0.5, 'link', 'border-bottom-color', [127, 0, 127], 10, null, shouldBeTransitioning],
  35     [0.5, 'link', 'outline-color', [127, 127, 0], 10, null, shouldBeTransitioning],
  36     [0.5, 'link', '-webkit-column-rule-color', [127, 127, 0], 10, null, shouldBeTransitioning],
  37     [0.5, 'link', '-webkit-text-stroke-color', [127, 127, 0], 10, null, shouldBeTransitioning],
  38     [0.5, 'link', '-webkit-text-fill-color', [0, 127, 127], 10, null, shouldBeTransitioning],
  39     ];
  40     function setupTest()
  41     {
  42         document.getElementById('link').className = 'changed';
  43     }
  44     runTransitionTest(expectedValues, setupTest, usePauseAPI);
  45 </script>
  46 </head>
  47 <body>
  48 All the colors of the link below should be animating:
  49 <div>
  50 <br>
  51 <a id="link" href="">
  52    link
  53 </a>
  54 <br>
  55 <br>
  56 </div>
  57 <div id="result">
  58 </div>
  59 </body>
  60 </html>