Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<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:
<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="�i1" class="match">#\0id / #&#0;id</div>
<div id="i�1">#\0id / #i&#0;d</div>
<div id="i1�">#\0id / #id&#0;</div>
<div id=" i1" class="match">#\0id / #^@id</div>
<div id="i 1">#\0id / #i^@d</div>
<div id="i1 ">#\0id / #id^@</div>
<div id="i1">#\0id / #id</div>
<div id="�i2">#i\0d / #&#0;id</div>
<div id="i�2" class="match">#i\0d / #i&#0;d</div>
<div id="i2�">#i\0d / #id&#0;</div>
<div id=" i2">#i\0d / #^@id</div>
<div id="i 2" class="match">#i\0d / #i^@d</div>
<div id="i2 ">#i\0d / #id^@</div>
<div id="i2">#i\0d / #id</div>
<div id="�i3">#id\0 / #&#0;id</div>
<div id="i�3">#id\0 / #i&#0;d</div>
<div id="i3�" class="match">#id\0 / #id&#0;</div>
<div id=" i3">#id\0 / #^@id</div>
<div id="i 3">#id\0 / #i^@d</div>
<div id="i3 " class="match">#id\0 / #id^@</div>
<div id="i3">#id\0 / #id</div>
<div id="�i4" class="match">#^@id / #&#0;id</div>
<div id="i�4">#^@id / #i&#0;d</div>
<div id="i4�">#^@id / #id&#0;</div>
<div id=" i4" class="match">#^@id / #^@id</div>
<div id="i 4">#^@id / #i^@d</div>
<div id="i4 ">#^@id / #id^@</div>
<div id="i4">#^@id / #id</div>
<div id="�i5">#i^@d / #&#0;id</div>
<div id="i�5" class="match">#i^@d / #i&#0;d</div>
<div id="i5�">#i^@d / #id&#0;</div>
<div id=" i5">#i^@d / #^@id</div>
<div id="i 5" class="match">#i^@d / #i^@d</div>
<div id="i5 ">#i^@d / #id^@</div>
<div id="i5">#i^@d / #id</div>
<div id="�i6">#id^@ / #&#0;id</div>
<div id="i�6">#id^@ / #i&#0;d</div>
<div id="i6�" class="match">#id^@ / #id&#0;</div>
<div id=" i6">#id^@ / #^@id</div>
<div id="i 6">#id^@ / #i^@d</div>
<div id="i6 " class="match">#id^@ / #id^@</div>
<div id="i6">#id^@ / #id</div>
<div id="�i7">#id / #&#0;id</div>
<div id="i�7">#id / #i&#0;d</div>
<div id="i7�">#id / #id&#0;</div>
<div id=" i7">#id / #^@id</div>
<div id="i 7">#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 / .&.0;cl</div>
<div class="c�1">.\0cl / .c&.0;l</div>
<div class="c1�">.\0cl / .cl&.0;</div>
<div class="match">.\0cl / .^@cl</div>
<div class="c 1">.\0cl / .c^@l</div>
<div class="c1 ">.\0cl / .cl^@</div>
<div class="c1">.\0cl / .cl</div>
<div class="�c2">.c\0l / .&.0;cl</div>
<div class="match">.c\0l / .c&.0;l</div>
<div class="c2�">.c\0l / .cl&.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="�c3">.cl\0 / .&.0;cl</div>
<div class="c�3">.cl\0 / .c&.0;l</div>
<div class="match">.cl\0 / .cl&.0;</div>
<div class=" c3">.cl\0 / .^@cl</div>
<div class="c 3">.cl\0 / .c^@l</div>
<div class="match">.cl\0 / .cl^@</div>
<div class="c3">.cl\0 / .cl</div>
<div class="match">.^@cl / .&.0;cl</div>
<div class="c�4">.^@cl / .c&.0;l</div>
<div class="c4�">.^@cl / .cl&.0;</div>
<div class="match">.^@cl / .^@cl</div>
<div class="c 4">.^@cl / .c^@l</div>
<div class="c4 ">.^@cl / .cl^@</div>
<div class="c4">.^@cl / .cl</div>
<div class="�c5">.c^@l / .&.0;cl</div>
<div class="match">.c^@l / .c&.0;l</div>
<div class="c5�">.c^@l / .cl&.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="�c6">.cl^@ / .&.0;cl</div>
<div class="c�6">.cl^@ / .c&.0;l</div>
<div class="match">.cl^@ / .cl&.0;</div>
<div class=" c6">.cl^@ / .^@cl</div>
<div class="c 6">.cl^@ / .c^@l</div>
<div class="match">.cl^@ / .cl^@</div>
<div class="c6">.cl^@ / .cl</div>
<div class="�c7">.cl / .&.0;cl</div>
<div class="c�7">.cl / .c&.0;l</div>
<div class="c7�">.cl / .cl&.0;</div>
<div class=" c7">.cl / .^@cl</div>
<div class="c 7">.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.&#0;</div>
<div id="i7" class="match">#id.\0 / #id.^@</div>
<div id="i8" class="match">#id.^@ / #id.&#0;</div>
<div id="i8" class="match">#id.^@ / #id.^@</div>
<div class="match" id="�">.cl#\0 / .cl#&#0;</div>
<div class="match" id=" ">.cl#\0 / .cl#^@</div>
<div class="match" id="�">.cl#^@ / .cl#&#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>