at-rule-013.html (2414B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <!-- 3 from the CSS 2.1 test suite, 4 http://test.csswg.org/suites/css2.1/20110111/html4/at-rule-013.htm 5 6 See ../css3-namespace/LICENSE . 7 --> 8 <html> 9 <head> 10 <title>CSS Test: Ignoring at-rules inside @media blocks</title> 11 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 12 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors"> 13 <link rel="help" href="http://www.w3.org/TR/CSS21/media.html#at-media-rule"> 14 <meta name="flags" content="invalid"> 15 <meta name="assert" content="At-rules inside @media blocks are ignored up to up to the end of the block that contains the invalid at-keyword, or up to and including the next semicolon (;) or up to and including the next block ({...}), whichever comes first."> 16 <style type="text/css"> 17 p { 18 color: red; 19 background: red; 20 } 21 @media all { 22 #semicolon { background: transparent; } 23 @foo ] & | # $ % test-token \ 24 [; # { background: red; } ] 25 (; #semicolon { background: red; } } } } ) 26 '; #semicolon { background: red; } } } }', 27 "; #semicolon { background: red; }' } } }" 28 ; 29 #semicolon { color: green; } 30 } 31 @media all { 32 #block { background: transparent; } 33 @foo ] & | # $ % test-token \ 34 [; #block { background: red; } ] 35 (; #block { background: red; } ) 36 '; #block { background: red; }', 37 "; #block { background: red; }'" 38 {; #block { background: red; } 39 #block { background: red; } } 40 #block { color: green; } 41 } 42 @media all { 43 #eob { background: transparent; } 44 @import "support/import-red.css" 45 } 46 #eob { 47 color: green; 48 } 49 @media all { 50 #eob-complex { background: transparent; } 51 @import "support/import-red.css" 52 [; #eob-complex { background: red; } ] 53 (; #eob-complex { background: red; } ) 54 '; #eob-complex { background: red; }', 55 "; #eob-complex { background: red; }'" 56 } 57 #eob-complex { 58 color: green; 59 } 60 </style> 61 </head> 62 <body> 63 <p id="semicolon">This sentence must be green.</p> 64 <p id="block">This sentence must be green.</p> 65 <p id="eob">This sentence must be green.</p> 66 <p id="eob-complex">This sentence must be green.</p> 67 </body> 68 </html>