1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <link rel="reference" href="uri-013-ref.xht">
5 <title>CSS Test: handling of invalid url() functions</title>
6 <link rel="author" title="L. David Baron" href="http://dbaron.org/">
7 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
8 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">
10 <meta name="flags" content="invalid">
11 <style type="text/css">
12 div { background-color: red }
13 </style>
14 <style type="text/css">
15 /* not a URI token, but handled according to rules for parsing errors */
16 #one { background: url(foo"bar") }
17 #one { background-color: green; }
18 </style>
19 <style type="text/css">
20 /* not a URI token, but handled according to rules for parsing errors */
21 #foo { background: url(foo"bar
22 ) }
23 #two { background-color: green; }
24 </style>
25 <style type="text/css">
26 /* not a URI token; the unterminated string ends at end of line, so
27 the brace never matches */
28 #three { background-color: green; }
29 #foo { background: url(foo"bar) }
30 #three { background-color: red; }
31 </style>
32 <style type="text/css">
33 /* not a URI token; the unterminated string ends at end of line */
34 #foo { background: url(foo"bar) }
35 ) }
36 #four { background-color: green; }
37 </style>
38 <style type="text/css">
39 /* not a URI token; the unterminated string ends at end of line, so
40 the brace never matches */
41 #five { background-color: green; }
42 #foo { background: url("bar) }
43 #five { background-color: red; }
44 </style>
45 <style type="text/css">
46 /* not a URI token; the unterminated string ends at end of line */
47 #foo { background: url("bar) }
48 ) }
49 #six { background-color: green; }
50 </style>
51 <style type="text/css">
52 /* not a URI token, but brace matching should work */
53 #seven { background: url(()); background-color: green; }
54 </style>
55 <style type="text/css">
56 /* not a URI token, but brace matching should work */
57 #eight { background: url([{}]); background-color: green; }
58 </style>
59 <style type="text/css">
60 /* not a URI token, but brace matching should work */
61 #nine { background: url([)]); background-color: green; }
62 </style>
63 <style type="text/css">
64 /* perfectly good URI token (image is a 404, though) */
65 #ten { background: url({) green; }
66 </style>
67 <style type="text/css">
68 /* perfectly good URI token (image is a 404, though) */
69 #eleven { background: url([) green; }
70 </style>
71 <style type="text/css">
72 /* not a URI token; brace matching should work only after invalid URI token */
73 #twelve { background: url(}{""{)}); background-color: green; }
74 </style>
75 <style type="text/css">
76 /* invalid URI token absorbs the [ */
77 #thirteen { background: url([""); background-color: green; }
78 </style>
79 <style type="text/css">
80 /* not a URI token; the opening ( is never matched */
81 #fourteen { background-color: green; }
82 #foo { background: url(() }
83 #fourteen { background-color: red; }
84 </style>
85 <!-- The next three tests test that invalid URI tokens absorb [ and { -->
86 <style type="text/css">
87 #foo { background: url(a()); }
88 #fifteen { background-color: green }
89 </style>
90 <style type="text/css">
91 #foo { background: url([()); }
92 #sixteen { background-color: green }
93 </style>
94 <style type="text/css">
95 #foo { background: url({()); }
96 #seventeen { background-color: green }
97 </style>
98 </head>
99 <body>
100 <div id="one">This should have a green background</div>
101 <div id="two">This should have a green background</div>
102 <div id="three">This should have a green background</div>
103 <div id="four">This should have a green background</div>
104 <div id="five">This should have a green background</div>
105 <div id="six">This should have a green background</div>
106 <div id="seven">This should have a green background</div>
107 <div id="eight">This should have a green background</div>
108 <div id="nine">This should have a green background</div>
109 <div id="ten">This should have a green background</div>
110 <div id="eleven">This should have a green background</div>
111 <div id="twelve">This should have a green background</div>
112 <div id="thirteen">This should have a green background</div>
113 <div id="fourteen">This should have a green background</div>
114 <div id="fifteen">This should have a green background</div>
115 <div id="sixteen">This should have a green background</div>
116 <div id="seventeen">This should have a green background</div>
117 </body>
118 </html>