gecko/layout/reftests/bugs/228856-2.html

222 lines
7.0 KiB
HTML
Raw Normal View History

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- This file contains embedded NULs (U+0000). Take care when editing to
preserve them. There are no other control characters or characters
outside 7-bit ASCII.
This test involves constructs with undefined behavior in CSS 2.1.
However, unlike 228856-1, the author is confident that future
specification of the behavior of NULs (whether literal or written with
\-escapes) will not contradict the behavior expected by this test. -->
<title>Selectors and properties test case for bug 228856</title>
<style type="text/css">
p {margin-bottom:0; color:black; font-weight:bold; }
tr { vertical-align: top }
td { padding-right: 0.5em }
/* backstop */
div { color: green; font: 6pt monospace; }
/* These selectors should not match anything. */
#\0i1 { color: red }
#i\02 { color: red }
#i3\0 { color: red }
#i4 { color: red }
#i5 { color: red }
#i6 { color: red }
#i7 { color: red }
.\0c1 { color: red }
.c\02 { color: red }
.c3\0 { color: red }
.c4 { color: red }
.c5 { color: red }
.c6 { color: red }
.c7 { color: red }
#i8.\0 { color: red }
#i9. { color: red }
.c8#\0 { color: red }
.c9# { color: red }
/* These properties should not be treated as 'color: red'. */
#p1 { \000000color: red }
#p2 { \00000 color: red }
#p3 { c\000000olor: red }
#p4 { c\00000 olor: red }
#p5 { color\000000: red }
#p6 { color\00000 : red }
#p7 { color: \000000red }
#p8 { color: \00000 red }
#p9 { color: r\000000ed }
#pA { color: r\00000 ed }
#pB { color: red\000000 }
</style>
<!-- None of these rules should be effective on any medium. -->
<style> @\000000media all { .m1 { color: red; } } </style>
<style> @me\000000dia all { .m2 { color: red; } } </style>
<style> @media\000000 all { .m3 { color: red; } } </style>
<style> @media \000000all { .m4 { color: red; } } </style>
<style> @media al\000000l { .m5 { color: red; } } </style>
<style> @media all\000000 { .m6 { color: red; } } </style>
</head><body>
<p>red=FAIL green=PASS</p>
<table><tr>
<td>
<p>ID selectors</p>
<div id="&#0;i1">#\0id / #&amp;#0;id</div>
<div id="i&#0;1">#\0id / #i&amp;#0;d</div>
<div id="i1&#0;">#\0id / #id&amp;#0;</div>
<div id="i1">#\0id / #^@id</div>
<div id="i1">#\0id / #i^@d</div>
<div id="i1">#\0id / #id^@</div>
<div id="i1">#\0id / #id</div>
<div id="&#0;i2">#i\0d / #&amp;#0;id</div>
<div id="i&#0;2">#i\0d / #i&amp;#0;d</div>
<div id="i2&#0;">#i\0d / #id&amp;#0;</div>
<div id="i2">#i\0d / #^@id</div>
<div id="i2">#i\0d / #i^@d</div>
<div id="i2">#i\0d / #id^@</div>
<div id="i2">#i\0d / #id</div>
<div id="&#0;i3">#id\0 / #&amp;#0;id</div>
<div id="i&#0;3">#id\0 / #i&amp;#0;d</div>
<div id="i3&#0;">#id\0 / #id&amp;#0;</div>
<div id="i3">#id\0 / #^@id</div>
<div id="i3">#id\0 / #i^@d</div>
<div id="i3">#id\0 / #id^@</div>
<div id="i3">#id\0 / #id</div>
<div id="&#0;i4">#^@id / #&amp;#0;id</div>
<div id="i&#0;4">#^@id / #i&amp;#0;d</div>
<div id="i4&#0;">#^@id / #id&amp;#0;</div>
<div id="i4">#^@id / #^@id</div>
<div id="i4">#^@id / #i^@d</div>
<div id="i4">#^@id / #id^@</div>
<div id="i4">#^@id / #id</div>
<div id="&#0;i5">#i^@d / #&amp;#0;id</div>
<div id="i&#0;5">#i^@d / #i&amp;#0;d</div>
<div id="i5&#0;">#i^@d / #id&amp;#0;</div>
<div id="i5">#i^@d / #^@id</div>
<div id="i5">#i^@d / #i^@d</div>
<div id="i5">#i^@d / #id^@</div>
<div id="i5">#i^@d / #id</div>
<div id="&#0;i6">#id^@ / #&amp;#0;id</div>
<div id="i&#0;6">#id^@ / #i&amp;#0;d</div>
<div id="i6&#0;">#id^@ / #id&amp;#0;</div>
<div id="i6">#id^@ / #^@id</div>
<div id="i6">#id^@ / #i^@d</div>
<div id="i6">#id^@ / #id^@</div>
<div id="i6">#id^@ / #id</div>
<div id="&#0;i7">#id / #&amp;#0;id</div>
<div id="i&#0;7">#id / #i&amp;#0;d</div>
<div id="i7&#0;">#id / #id&amp;#0;</div>
<div id="i7">#id / #^@id</div>
<div id="i7">#id / #i^@d</div>
<div id="i7">#id / #id^@</div>
</td><td>
<p>Class selectors</p>
<div class="&#0;c1">.\0cl / .&amp;.0;cl</div>
<div class="c&#0;1">.\0cl / .c&amp;.0;l</div>
<div class="c1&#0;">.\0cl / .cl&amp;.0;</div>
<div class="c1">.\0cl / .^@cl</div>
<div class="c1">.\0cl / .c^@l</div>
<div class="c1">.\0cl / .cl^@</div>
<div class="c1">.\0cl / .cl</div>
<div class="&#0;c2">.c\0l / .&amp;.0;cl</div>
<div class="c&#0;2">.c\0l / .c&amp;.0;l</div>
<div class="c2&#0;">.c\0l / .cl&amp;.0;</div>
<div class="c2">.c\0l / .^@cl</div>
<div class="c2">.c\0l / .c^@l</div>
<div class="c2">.c\0l / .cl^@</div>
<div class="c2">.c\0l / .cl</div>
<div class="&#0;c3">.cl\0 / .&amp;.0;cl</div>
<div class="c&#0;3">.cl\0 / .c&amp;.0;l</div>
<div class="c3&#0;">.cl\0 / .cl&amp;.0;</div>
<div class="c3">.cl\0 / .^@cl</div>
<div class="c3">.cl\0 / .c^@l</div>
<div class="c3">.cl\0 / .cl^@</div>
<div class="c3">.cl\0 / .cl</div>
<div class="&#0;c4">.^@cl / .&amp;.0;cl</div>
<div class="c&#0;4">.^@cl / .c&amp;.0;l</div>
<div class="c4&#0;">.^@cl / .cl&amp;.0;</div>
<div class="c4">.^@cl / .^@cl</div>
<div class="c4">.^@cl / .c^@l</div>
<div class="c4">.^@cl / .cl^@</div>
<div class="c4">.^@cl / .cl</div>
<div class="&#0;c5">.c^@l / .&amp;.0;cl</div>
<div class="c&#0;5">.c^@l / .c&amp;.0;l</div>
<div class="c5&#0;">.c^@l / .cl&amp;.0;</div>
<div class="c5">.c^@l / .^@cl</div>
<div class="c5">.c^@l / .c^@l</div>
<div class="c5">.c^@l / .cl^@</div>
<div class="c5">.c^@l / .cl</div>
<div class="&#0;c6">.cl^@ / .&amp;.0;cl</div>
<div class="c&#0;6">.cl^@ / .c&amp;.0;l</div>
<div class="c6&#0;">.cl^@ / .cl&amp;.0;</div>
<div class="c6">.cl^@ / .^@cl</div>
<div class="c6">.cl^@ / .c^@l</div>
<div class="c6">.cl^@ / .cl^@</div>
<div class="c6">.cl^@ / .cl</div>
<div class="&#0;c7">.cl / .&amp;.0;cl</div>
<div class="c&#0;7">.cl / .c&amp;.0;l</div>
<div class="c7&#0;">.cl / .cl&amp;.0;</div>
<div class="c7">.cl / .^@cl</div>
<div class="c7">.cl / .c^@l</div>
<div class="c7">.cl / .cl^@</div>
</td><td>
<p>More selectors</p>
<div id="i8" class="&#0;">#id.\0 / #id.&amp;#0;</div>
<div id="i8" class="">#id.\0 / #id.^@</div>
<div id="i9" class="&#0;">#id.^@ / #id.&amp;#0;</div>
<div id="i9" class="">#id.^@ / #id.^@</div>
<div class="c8" id="&#0;">.cl#\0 / .cl#&amp;#0;</div>
<div class="c8" id="">.cl#\0 / .cl#^@</div>
<div class="c9" id="&#0;">.cl#^@ / .cl#&amp;#0;</div>
<div class="c9" id="">.cl#^@ / .cl#^@</div>
<p>Properties</p>
<div id="p1">\000000color: red</div>
<div id="p2">\00000 color: red</div>
<div id="p3">c\000000olor: red</div>
<div id="p4">c\00000 olor: red</div>
<div id="p5">color\000000: red</div>
<div id="p6">color\00000 : red</div>
<div id="p7">color: \000000red</div>
<div id="p8">color: \00000 red</div>
<div id="p9">color: r\000000ed</div>
<div id="pA">color: r\00000 ed</div>
<div id="pB">color: red\000000</div>
<p>@-rules</p>
<div class="m1">@\000000media all</div>
<div class="m2">@me\000000dia all</div>
<div class="m3">@media\000000 all</div>
<div class="m4">@media \000000all</div>
<div class="m5">@media al\000000l</div>
<div class="m6">@media all\000000</div>
</td>
</tr></table>
</body></html>