at-supports-content-003.html (1213B)
1 <!doctype html> 2 <head> 3 <title>CSS Test (Conditional Rules): @keyframes rules inside @supports</title> 4 <!-- This test is paired with at-media-content-003.html ; please keep them in sync --> 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 6 <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of"> 7 <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-supports"> 8 <link rel="help" href="https://www.w3.org/TR/css-animations-1/"> 9 <link rel="match" href="at-supports-001-ref.html"> 10 <meta name="assert" 11 content="Test passes if @keyframes rules within @supports are supported."> 12 <style> 13 div { 14 background: red; 15 width: 100px; 16 height: 100px; 17 animation: green 4s both; 18 } 19 20 @supports (color: blue) { 21 @keyframes green { 22 from { 23 background: green; 24 } 25 to { 26 background: green; 27 } 28 } 29 } 30 @supports not (color: blue) { 31 @keyframes green { 32 from { 33 background: red; 34 } 35 to { 36 background: red; 37 } 38 } 39 } 40 </style> 41 </head> 42 <body> 43 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> 44 <div class="test1"></div> 45 </body> 46 </html>