at-supports-namespace-001.html (1714B)
1 <!doctype html> 2 <head> 3 <title>CSS Test (Conditional Rules): Validity of namespaces in @supports</title> 4 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 5 <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of"> 6 <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#use"> 7 <link rel="help" href="https://www.w3.org/TR/css-namespaces/"> 8 <link rel="help" href="https://www.w3.org/TR/CSS2/generate.html#content"> 9 <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-supports"> 10 <link rel="match" href="at-supports-001-ref.html"> 11 <meta name="assert" 12 content="Test passes if namespaces used within @supports are valid only if declared in a valid @namespace rule."> 13 <style> 14 @namespace x "http://www.w3.org/1999/xlink"; 15 @supports (background: green) {} 16 @namespace y "http://www.w3.org/1999/xlink"; 17 18 div { 19 height: 20px; 20 width: 100px; 21 } 22 23 .test1 { background: red; } 24 @supports (content: attr(x|href)) { 25 .test1 { background: green; } 26 } 27 28 .test2 { background: green; } 29 @supports (content: attr(y|href)) { 30 .test2 { background: red; } 31 } 32 33 .test3 { background: red; } 34 @supports not (content: attr(y|href)) { 35 .test3 { background: green; } 36 } 37 38 .test4 { background: red; } 39 .test5 { background: green; } 40 @supports (background: red) { 41 x|y, .test4 { background: green; } 42 y|x, .test5 { background: red; } 43 } 44 </style> 45 </head> 46 <body> 47 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> 48 <div class="test1"></div> 49 <div class="test2"></div> 50 <div class="test3"></div> 51 <div class="test4"></div> 52 <div class="test5"></div> 53 </body> 54 </html>