at-supports-namespace-002.html (1639B)
1 <!doctype html> 2 <head> 3 <title>CSS Test (Conditional Rules): Validity of namespaces in selector() 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-4/#typedef-supports-selector-fn"> 6 <link rel="help" href="https://www.w3.org/TR/css-namespaces/"> 7 <link rel="help" href="https://www.w3.org/TR/css-conditional/#contents-of"> 8 <link rel="help" href="https://www.w3.org/TR/css-conditional/#use"> 9 <link rel="help" href="https://www.w3.org/TR/css-conditional/#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 selector() 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: 25px; 20 width: 100px; 21 } 22 23 .test1 { background: red; } 24 @supports selector(x|y) { 25 .test1 { background: green; } 26 } 27 28 .test2 { background: green; } 29 @supports selector(y|x) { 30 .test2 { background: red; } 31 } 32 33 .test3 { background: red; } 34 @supports not selector(y|x) { 35 .test3 { background: green; } 36 } 37 38 /* technically redundant with test 001, but need to add to 100px anyway */ 39 .test4, x|y { background: green; } 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 <div class="test2"></div> 46 <div class="test3"></div> 47 <div class="test4"></div> 48 </body> 49 </html>