important-prop.html (1143B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Cascade: Important vs. Animations</title> 6 <link rel="author" title="David Burns" href="http://www.theautomatedtester.co.uk"> 7 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 8 <link rel="help" href="https://drafts.csswg.org/css-cascade/#importance"> 9 <link rel="match" href="important-prop-ref.html"> 10 <meta name="assert" content="Test passes if normal rules are overridden by animations, important rules override animations, and !important declarations are ignored in animations."> 11 <style> 12 @keyframes override { 13 from, to { 14 background: #f00; color: green; 15 border-color: green; border-color: red !important; 16 } 17 } 18 19 .square { 20 color:#00f; 21 animation: override 1s infinite; 22 width: 80px; 23 height: 80px; 24 border: 10px solid red; 25 text-align: center; 26 } 27 div { 28 background-color:green !important; 29 color: red; 30 } 31 </style> 32 </head> 33 <body> 34 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 35 36 <div class="square green">FAIL</div> 37 38 </body> 39 </html>