<!
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" />
<link rel=
"match" href=
"uri-013-ref.xht"/>
<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; the unterminated string ends at end of line, so
the brace never matches */
#three { background-color: green; }
#foo { background:
url(foo
"bar) }
#three { background-color: red; }
</style>
<style
type=
"text/css">
/* not a
URI token; the unterminated string ends at end of line */
#foo { background:
url(foo
"bar) }
) }
#four { background-color: green; }
</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; brace matching should work only after invalid
URI token */
#twelve { background:
url(}{
""{)}); background-color: green; }
</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; the opening ( is never matched */
#fourteen { background-color: green; }
#foo { background:
url(() }
#fourteen { background-color: red; }
</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>
</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>
</body>
</
html>
