123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>CSS Test: handling of invalid url() functions</title>
- <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#tokenization" />
- <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors" />
- <meta name="flags" content="invalid" />
- <style type="text/css">
- div { background-color: red }
- </style>
- <style type="text/css">
- /* not a URI token, but handled according to rules for parsing errors */
- #one { background: url(foo"bar") }
- #one { background-color: green; }
- </style>
- <style type="text/css">
- /* not a URI token, but handled according to rules for parsing errors */
- #foo { background: url(foo"bar
- ) }
- #two { background-color: green; }
- </style>
- <style type="text/css">
- /* not a URI token; bad-url token is consumed until the first closing ) */
- #foo { background: url(foo"bar) }
- #three { background-color: green; }
- </style>
- <style type="text/css">
- /* not a URI token; bad-url token is consumed until the first closing ) */
- #four { background-color: green; }
- #foo { background: url(foo"bar) }
- ) }
- #four { background-color: red; }
- </style>
- <style type="text/css">
- /* not a URI token; the unterminated string ends at end of line, so
- the brace never matches */
- #five { background-color: green; }
- #foo { background: url("bar) }
- #five { background-color: red; }
- </style>
- <style type="text/css">
- /* not a URI token; the unterminated string ends at end of line */
- #foo { background: url("bar) }
- ) }
- #six { background-color: green; }
- </style>
- <style type="text/css">
- /* not a URI token, but brace matching should work */
- #seven { background: url(()); background-color: green; }
- </style>
- <style type="text/css">
- /* not a URI token, but brace matching should work */
- #eight { background: url([{}]); background-color: green; }
- </style>
- <style type="text/css">
- /* not a URI token, but brace matching should work */
- #nine { background: url([)]); background-color: green; }
- </style>
- <style type="text/css">
- /* perfectly good URI token (image is a 404, though) */
- #ten { background: url({) green; }
- </style>
- <style type="text/css">
- /* perfectly good URI token (image is a 404, though) */
- #eleven { background: url([) green; }
- </style>
- <style type="text/css">
- /* not a URI token; bad-url token is consumed until the first closing )
- so the brace immediately after it closes the declaration block */
- #twelve { background-color: green; }
- #twelve { background: url(}{""{)}); background-color: red; }
- </style>
- <style type="text/css">
- /* invalid URI token absorbs the [ */
- #thirteen { background: url([""); background-color: green; }
- </style>
- <style type="text/css">
- /* not a URI token; bad-url token is consumed until the first closing ) */
- #foo { background: url(() }
- #fourteen { background-color: green; }
- </style>
- <!-- The next three tests test that invalid URI tokens absorb [ and { -->
- <style type="text/css">
- #foo { background: url(a()); }
- #fifteen { background-color: green }
- </style>
- <style type="text/css">
- #foo { background: url([()); }
- #sixteen { background-color: green }
- </style>
- <style type="text/css">
- #foo { background: url({()); }
- #seventeen { background-color: green }
- </style>
- <!-- Test that url() starting with a quote and without its closing ')' eaten
- by any of the tokens that come after the initial quote doesn't eat the rest of
- the stylesheet. In particular, this checks whether, once we reach the end of
- the string and discover garbage after it, we tokenize the garbage or just skip
- to the nearest ')'. -->
- <style type="text/css">
- #eighteen { background-color: red; }
- #foo { background: url('('')'); }
- #eighteen { background-color: green; }
- </style>
- <!-- And the same thing with double quotes -->
- <style type="text/css">
- #nineteen { background-color: red; }
- #foo { background: url("("')'); }
- #nineteen { background-color: green; }
- </style>
- </head>
- <body>
- <div id="one">This should have a green background</div>
- <div id="two">This should have a green background</div>
- <div id="three">This should have a green background</div>
- <div id="four">This should have a green background</div>
- <div id="five">This should have a green background</div>
- <div id="six">This should have a green background</div>
- <div id="seven">This should have a green background</div>
- <div id="eight">This should have a green background</div>
- <div id="nine">This should have a green background</div>
- <div id="ten">This should have a green background</div>
- <div id="eleven">This should have a green background</div>
- <div id="twelve">This should have a green background</div>
- <div id="thirteen">This should have a green background</div>
- <div id="fourteen">This should have a green background</div>
- <div id="fifteen">This should have a green background</div>
- <div id="sixteen">This should have a green background</div>
- <div id="seventeen">This should have a green background</div>
- <div id="eighteen">This should have a green background</div>
- <div id="nineteen">This should have a green background</div>
- </body>
- </html>
|