color-transition-rounding.html | Explore in Territory

<!DOCTYPE>

<html>
<head>
  <style>
    #test {
      color: #00F;
      transition: color 10s linear;
    }
    
    #test.changed {
      color: #F00;
    }
  </style>
  <script src="../animations/resources/animation-test-helpers.js"></script>
  <script type="text/javascript">
    const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [4.998, 'test', 'color', [127, 0, 128], 0],
      [5.000, 'test', 'color', [128, 0, 128], 0],
      [5.002, 'test', 'color', [128, 0, 127], 0],
    ];

    function setupTest()
    {
      document.getElementById('test').className = 'changed';
    }

    runTransitionTest(expectedValues, setupTest);
  </script>
</head>
<body>

  <div id="test">
    This test will probably fail when run manually; it requires the pause API for accurate results.
  </div>
  
  <div id="result"></div>
</body>
</html>

chromium/third_party/blink/web_tests/transitions/color-transition-rounding.html