animation-none-keyword.html | Explore in Territory

<!doctype html>
<html lang="en">
<head>
  <title>Testing animation on a none keyword</title>
  <style>
    #test {
      max-width: none;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-name: none-test;
    }

    @keyframes none-test {
      25% { max-width: 10px; }
      75% { max-width: 10px; }
    }
  </style>
  <script src="resources/animation-test-helpers.js"></script>
  <script>
    const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [0, "test", "max-width", "none", 0],
      [0.25, "test", "max-width", 10, 0],
      [1, "test", "max-width", 10, 0],
      [1.75, "test", "max-width", "none", 0],
      [2, "test", "max-width", "none", 0],
    ];

    runAnimationTest(expectedValues);
  </script>
</head>
<body>
<div id="test">Animating max-width from/to none.</div>
</div>
</body>
</html>

chromium/third_party/blink/web_tests/animations/animation-none-keyword.html