at-rule-013

Ignoring at-rules inside @media blocks

WeasyPrint

This browser

Flags
invalid
Assertion
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.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <title>CSS Test: Ignoring at-rules inside @media blocks</title>
 5   <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
 6   <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">
 7   <link rel="help" href="http://www.w3.org/TR/CSS21/media.html#at-media-rule">
 8   <meta name="flags" content="invalid">
 9   <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.">
10   <style type="text/css">
11     p {
12       color: red;
13       background: red;
14     }
15     @media all {
16       #semicolon { background: transparent; }
17       @foo ] & | # $ % test-token \
18        [; # { background: red; } ]
19        (; #semicolon { background: red; } } } } )
20        '; #semicolon { background: red; } } } }',
21        "; #semicolon { background: red; }' } } }"
22       ;
23       #semicolon { color: green; }
24     }
25     @media all {
26       #block { background: transparent; }
27       @foo ] & | # $ % test-token \
28        [; #block { background: red; } ]
29        (; #block { background: red; } )
30        '; #block { background: red; }',
31        "; #block { background: red; }'"
32        {; #block { background: red; }
33           #block { background: red; } }
34       #block { color: green; }
35     }
36     @media all {
37       #eob { background: transparent; }
38       @import "support/import-red.css"
39     }
40     #eob {
41       color: green;
42     }
43     @media all {
44       #eob-complex { background: transparent; }
45       @import "support/import-red.css"
46        [; #eob-complex { background: red; } ]
47        (; #eob-complex { background: red; } )
48        '; #eob-complex { background: red; }',
49        "; #eob-complex { background: red; }'"
50     }
51     #eob-complex {
52       color: green;
53     }
54   </style>
55  </head>
56  <body>
57   <p id="semicolon">This sentence must be green.</p>
58   <p id="block">This sentence must be green.</p>
59   <p id="eob">This sentence must be green.</p>
60   <p id="eob-complex">This sentence must be green.</p>
61  </body>
62 </html>