cascade-important.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="screen">
    #test {
      width: 100px;
      height: 100px;
      background-color: green !important;
      animation: test 10s;
    }
    @keyframes test {
        from { background-color: red; }
        to { background-color: red; }
    }
  </style>
  <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [0, "test", "background-color", "rgb(0, 128, 0)", 0],
      [5, "test", "background-color", "rgb(0, 128, 0)", 0],
      [10, "test", "background-color", "rgb(0, 128, 0)", 0],
    ];
    runAnimationTest(expectedValues);
  </script>
</head>
<body>
<p>Tests that !important properties apply over animations.</p>
<div id="test"></div>
<div id="result">
</div>
</body>
</html>

chromium/third_party/blink/web_tests/animations/cascade-important.html