third_party/WebKit/LayoutTests/animations/cascade-important-keyframe-properties.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     #test {
   6       width: 100px;
   7       height: 100px;
   8       -webkit-animation: test 0.5s forwards;
   9     }
  10     @-webkit-keyframes test {
  11         0% { background-color: green; }
  12         50% { background-color: red !important; }
  13         100% { background-color: green; }
  14     }
  15   </style>
  16   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  17   <script type="text/javascript" charset="utf-8">
  18     const expectedValues = [
  19       // [time, element-id, property, expected-value, tolerance]
  20       [0, "test", "background-color", "rgb(0, 128, 0)", 0],
  21       [0.25, "test", "background-color", "rgb(0, 128, 0)", 0],
  22       [0.5, "test", "background-color", "rgb(0, 128, 0)", 0],
  23     ];
  24     runAnimationTest(expectedValues);
  25   </script>
  26 </head>
  27 <body>
  28 <p>Tests that !important properties are ignored in keyframes.</p>
  29 <div id="test"></div>
  30 <div id="result">
  31 </div>
  32 </body>
  33 </html>