at-supports-048.html (994B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>CSS Test (Conditional Rules): Mixing @supports and CSS nesting</title> 5 <link rel="author" title="Matthieu Dubet" href="m_dubet@apple.com"> 6 <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> 7 <link rel="match" href="at-supports-048-ref.html"> 8 <style> 9 div { 10 background:red; 11 height:100px; 12 width:100px; 13 margin: 10px; 14 border: solid 1px black; 15 } 16 .test-1 { 17 background-color: red; 18 @supports (background-color: red) { 19 background-color: green; 20 } 21 } 22 .test-2 { 23 background-color: green; 24 @supports (invalid-declaration: foobar) { 25 background-color: red; 26 } 27 } 28 .test-3 { 29 background-color: green; 30 @supports (color: red) { 31 color: red; 32 } 33 } 34 </style> 35 </head> 36 37 <p>Test passes if there are only green rectangles. 38 <div class="test-1"></div> 39 <div class="test-2"></div> 40 <div class="test-3"></div> 41 </html>