| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style type="text/css" media="screen"> | 4 <style type="text/css" media="screen"> |
| 5 #test { | 5 #test { |
| 6 width: 100px; | 6 width: 100px; |
| 7 height: 100px; | 7 height: 100px; |
| 8 background-color: green !important; | 8 -webkit-animation: test 0.5s forwards; |
| 9 -webkit-animation: test 0.5s; | |
| 10 } | 9 } |
| 11 @-webkit-keyframes test { | 10 @-webkit-keyframes test { |
| 12 from { background-color: red; } | 11 0% { background-color: green; } |
| 13 to { background-color: red; } | 12 50% { background-color: red !important; } |
| 13 100% { background-color: green; } |
| 14 } | 14 } |
| 15 </style> | 15 </style> |
| 16 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> | 16 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> |
| 17 <script type="text/javascript" charset="utf-8"> | 17 <script type="text/javascript" charset="utf-8"> |
| 18 const expectedValues = [ | 18 const expectedValues = [ |
| 19 // [time, element-id, property, expected-value, tolerance] | 19 // [time, element-id, property, expected-value, tolerance] |
| 20 [0, "test", "background-color", "rgb(0, 128, 0)", 0], | 20 [0, "test", "background-color", "rgb(0, 128, 0)", 0], |
| 21 [0.25, "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], | 22 [0.5, "test", "background-color", "rgb(0, 128, 0)", 0], |
| 23 ]; | 23 ]; |
| 24 runAnimationTest(expectedValues); | 24 runAnimationTest(expectedValues); |
| 25 </script> | 25 </script> |
| 26 </head> | 26 </head> |
| 27 <body> | 27 <body> |
| 28 <p>Tests that !important properties apply over animations.</p> | 28 <p>Tests that !important properties are ignored in keyframes.</p> |
| 29 <div id="test"></div> | 29 <div id="test"></div> |
| 30 <div id="result"> | 30 <div id="result"> |
| 31 </div> | 31 </div> |
| 32 </body> | 32 </body> |
| 33 </html> | 33 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1151893003:
Properties labelled !important must be ignored in keyframes (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master