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

222 lines
7.0 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>