<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bug 34529 - [CSSOM] issues with cssText and selectorText</title>
<style type="text/css">
/* Control characters */
.\01_class {
    color:green;
}
.\1f_class {
    color:green;
}
.\30_class {
    color:green;
}
.\39_class {
    color:green;
}
/* Characters following '-' */
.-\30_class {
    color:green;
}
.-\39_class {
    color:green;
}
.-\2d_class {
    color:green;
}
/* non-ASCII characters */
.\81_class {
    color:green;
}
/* unicode characters */
.日本語_class {
    color:green;
}
/* unicode supplementary characters (surrogate pairs) */
.𐐀_class {
    color:green;
}
/* plain characters */
.azAZ09_-_class {
    color:green;
}
.\(\/\:\@\[\~_class {
    color:green;
}
/* ID */
#a\.external\:visited {
    color:green;
}
/* String */
li[myattr="my\"value\\"] {
    color:green;
}

li {
    color:red;
}
</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>

List items must be green. Otherwise some selectors are invalid.
<ul>
<li class="&#001;_class">class="&amp;#001;_class"</li>
<li class="&#031;_class">class="&amp;#031;_class"</li>
<li class="0_class">class="0_class"</li>
<li class="9_class">class="9_class"</li>
<li class="-0_class">class="-0_class"</li>
<li class="-9_class">class="-9_class"</li>
<li class="--_class">class="--_class"</li>
<li class="&#129;_class">class="&amp;#129;_class"</li>
<li class="日本語_class">class="日本語_class"</li>
<li class="&#66560;_class">class="&#66560;_class"</li>
<li class="azAZ09_-_class">class="azAZ09_-_class"</li>
<li class="(/:@[~_class">class="(/:@[~_class"</li>
<li id="a.external:visited">id="a.external:visited"</li>
<li myattr="my&#034;value&#092;">myattr="my&#034;value&#092;"</li>
</ul>

<div id="console"></div>
<script type="text/javascript">
description("Test for Bug 34529 - [CSSOM] issues with cssText and selectorText");

var expectedTexts = [
    ".\\1 _class",
    ".\\1f _class",
    ".\\30 _class",
    ".\\39 _class",
    ".-\\30 _class",
    ".-\\39 _class",
    ".-\\-_class",
    ".\x81_class",
    ".日本語_class",
    ".𐐀_class",
    ".azAZ09_-_class",
    ".\\(\\/\\:\\@\\[\\~_class",
    "#a\\.external\\:visited",
    'li[myattr="my\\"value\\\\"]'
];

var rules = document.styleSheets[0].cssRules;
for (var i = 0; i < expectedTexts.length; i++) {
    shouldBe("rules[" + i + "].selectorText", "expectedTexts[" + i + "]");
    shouldBe("rules[" + i + "].cssText", "expectedTexts[" + i + "] + ' { color: green; }'");
}
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>