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

177 lines
5.9 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 tests behavior specified in CSS Syntax Level 3,
as of the Editor's Draft 19 June 2013:
http://dev.w3.org/csswg/css-syntax/ -->
<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 }
div { color: #aaa; font: 6pt monospace; }
div.match { color: green }
</style>
</head><body>
<table><tr>
<td>
<p>ID selectors</p>
<div id="&#0;i1" class="match">#\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" class="match">#\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" class="match">#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" class="match">#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;" class="match">#id\0 / #id&amp;#0;</div>
<div id="i3">#id\0 / #^@id</div>
<div id="i3">#id\0 / #i^@d</div>
<div id="i3" class="match">#id\0 / #id^@</div>
<div id="i3">#id\0 / #id</div>
<div id="&#0;i4" class="match">#^@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" class="match">#^@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" class="match">#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" class="match">#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;" class="match">#id^@ / #id&amp;#0;</div>
<div id="i6">#id^@ / #^@id</div>
<div id="i6">#id^@ / #i^@d</div>
<div id="i6" class="match">#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>
<div id="i7" class="match">#id / #id</div>
</td><td>
<p>Class selectors</p>
<div class="match">.\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="match">.\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="match">.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="match">.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="match">.cl\0 / .cl&amp;.0;</div>
<div class="c3">.cl\0 / .^@cl</div>
<div class="c3">.cl\0 / .c^@l</div>
<div class="match">.cl\0 / .cl^@</div>
<div class="c3">.cl\0 / .cl</div>
<div class="match">.^@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="match">.^@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="match">.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="match">.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="match">.cl^@ / .cl&amp;.0;</div>
<div class="c6">.cl^@ / .^@cl</div>
<div class="c6">.cl^@ / .c^@l</div>
<div class="match">.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>
<div class="match">.cl / .cl</div>
</td><td>
<p>More selectors</p>
<div id="i7" class="match">#id.\0 / #id.&amp;#0;</div>
<div id="i7" class="match">#id.\0 / #id.^@</div>
<div id="i8" class="match">#id.^@ / #id.&amp;#0;</div>
<div id="i8" class="match">#id.^@ / #id.^@</div>
<div class="match" id="&#0;">.cl#\0 / .cl#&amp;#0;</div>
<div class="match" id="">.cl#\0 / .cl#^@</div>
<div class="match" id="&#0;">.cl#^@ / .cl#&amp;#0;</div>
<div class="match" 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>