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

178 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>
<link rel=stylesheet href="228856-2-style-1.css">
<!-- 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>
<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>
<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>
<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>