blob: 15d3b0e1caeec3ce08dd882527ed83eee64c7032 [file] [log] [blame]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.test ol { float: left; padding-right: 20px; }
.test h2 { clear: left; }
.negative-number { padding-left: 300px; }
.negative-number li:before { content: "\002D"; }
/*
The following styles are ordered as they appear in section 6.1. of the
3 February 2015 CR of the CSS3 Counter Styles Level 3 module <http://www.w3.org/TR/css-counter-styles-3/#simple-numeric>.
*/
ol.decimal { list-style-type: decimal; }
ol.decimal-leading-zero { list-style-type: decimal-leading-zero; }
ol.arabic-indic { list-style-type: arabic-indic; }
ol.bengali { list-style-type: bengali; }
ol.cambodian { list-style-type: cambodian; }
ol.khmer { list-style-type: khmer; }
ol.devanagari { list-style-type: devanagari; }
ol.gujarati { list-style-type: gujarati; }
ol.gurmukhi { list-style-type: gurmukhi; }
ol.kannada { list-style-type: kannada; }
ol.lao { list-style-type: lao; }
ol.malayalam { list-style-type: malayalam; }
ol.mongolian { list-style-type: mongolian; }
ol.myanmar { list-style-type: myanmar; }
ol.oriya { list-style-type: oriya; }
ol.persian { list-style-type: persian; }
ol.urdu { list-style-type: urdu; }
ol.telugu { list-style-type: telugu; }
ol.thai { list-style-type: thai; }
ol.tibetan { list-style-type: tibetan; }
</style>
<script src="resources/dump-list.js"></script>
<script>
function testListItemMarkerEqualsListItemText(listItemElement, depth)
{
var isNegativeNumber = listItemElement.parentNode.className && listItemElement.parentNode.className.split(" ").indexOf("negative-number") > -1;
var expectedMarkerText = (isNegativeNumber ? "-" : "") + listItemElement.innerText;
return testListItemMarkerEquals(internals.markerTextForListItem(listItemElement), expectedMarkerText);
}
function runTest()
{
if (!window.testRunner)
return;
testRunner.dumpAsText();
filterListsWithReplacement(document.querySelectorAll(".test ol"), testListItemMarkerEqualsListItemText);
document.body.removeChild(document.getElementById("description")); // Remove description when running in DRT.
}
window.onload = runTest;
</script>
</head>
<body>
<h1>CSS3 Numeric list-style-type</h1>
<p id="description">his tests that all of the alphabetic CSS3 list-style-types are supported as per <a href="http://www.w3.org/TR/css-counter-styles-3/#simple-alphabetic">section 6.1 of the spec. CSS3 Counter Styles Level 3 module</a> (CR 3 February 2015). This test PASSED if the list item matches its bullet for every list item (below). For example, for the decimal numeric system the second &lt;li&gt; (which corresponds to 2 in the standard ordering of the positive integers) should be rendered as: 2. 2</p>
<div class="test">
<h2>arabic-indic</h2>
<ol class="arabic-indic">
<li>&#x0661;</li>
<li>&#x0662;</li>
<li>&#x0663;</li>
<li>&#x0664;</li>
<li>&#x0665;</li>
<li>&#x0666;</li>
<li>&#x0667;</li>
<li>&#x0668;</li>
<li>&#x0669;</li>
<li>&#x0661;&#x0660;</li>
</ol>
<ol class="arabic-indic" start="0">
<li>&#x0660;</li>
</ol>
<ol class="arabic-indic" start="-2147483649">
<li>&#x661;</li>
</ol>
<ol class="arabic-indic negative-number" start="-2147483648">
<li>&#x662;&#x661;&#x664;&#x667;&#x664;&#x668;&#x663;&#x666;&#x664;&#x668;</li>
<li>&#x662;&#x661;&#x664;&#x667;&#x664;&#x668;&#x663;&#x666;&#x664;&#x667;</li>
</ol>
</div>
<div class="test">
<h2>bengali</h2>
<ol class="bengali">
<li>&#x09E7;</li>
<li>&#x09E8;</li>
<li>&#x09E9;</li>
<li>&#x09EA;</li>
<li>&#x09EB;</li>
<li>&#x09EC;</li>
<li>&#x09ED;</li>
<li>&#x09EE;</li>
<li>&#x09EF;</li>
<li>&#x09E7;&#x09E6;</li>
</ol>
<ol class="bengali" start="0">
<li>&#x09E6;</li>
</ol>
<ol class="bengali" start="-2147483649">
<li>&#x9E7;</li>
</ol>
<ol class="bengali negative-number" start="-2147483648">
<li>&#x9E8;&#x9E7;&#x9EA;&#x9ED;&#x9EA;&#x9EE;&#x9E9;&#x9EC;&#x9EA;&#x9EE;</li>
<li>&#x9E8;&#x9E7;&#x9EA;&#x9ED;&#x9EA;&#x9EE;&#x9E9;&#x9EC;&#x9EA;&#x9ED;</li>
</ol>
</div>
<div class="test">
<h2>cambodian</h2>
<ol class="cambodian">
<li>&#x17E1;</li>
<li>&#x17E2;</li>
<li>&#x17E3;</li>
<li>&#x17E4;</li>
<li>&#x17E5;</li>
<li>&#x17E6;</li>
<li>&#x17E7;</li>
<li>&#x17E8;</li>
<li>&#x17E9;</li>
<li>&#x17E1;&#x17E0;</li>
</ol>
<ol class="cambodian" start="0">
<li>&#x17E0;</li>
</ol>
<ol class="cambodian" start="-2147483649">
<li>&#x17E1;</li>
</ol>
<ol class="cambodian negative-number" start="-2147483648">
<li>&#x17E2;&#x17E1;&#x17E4;&#x17E7;&#x17E4;&#x17E8;&#x17E3;&#x17E6;&#x17E4;&#x17E8;</li>
<li>&#x17E2;&#x17E1;&#x17E4;&#x17E7;&#x17E4;&#x17E8;&#x17E3;&#x17E6;&#x17E4;&#x17E7;</li>
</ol>
</div>
<div class="test">
<h2>khmer</h2>
<ol class="khmer">
<li>&#x17E1;</li>
<li>&#x17E2;</li>
<li>&#x17E3;</li>
<li>&#x17E4;</li>
<li>&#x17E5;</li>
<li>&#x17E6;</li>
<li>&#x17E7;</li>
<li>&#x17E8;</li>
<li>&#x17E9;</li>
<li>&#x17E1;&#x17E0;</li>
</ol>
<ol class="khmer" start="0">
<li>&#x17E0;</li>
</ol>
<ol class="khmer" start="-2147483649">
<li>&#x17E1;</li>
</ol>
<ol class="khmer negative-number" start="-2147483648">
<li>&#x17E2;&#x17E1;&#x17E4;&#x17E7;&#x17E4;&#x17E8;&#x17E3;&#x17E6;&#x17E4;&#x17E8;</li>
<li>&#x17E2;&#x17E1;&#x17E4;&#x17E7;&#x17E4;&#x17E8;&#x17E3;&#x17E6;&#x17E4;&#x17E7;</li>
</ol>
</div>
<div class="test">
<h2>decimal</h2>
<ol class="decimal">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ol>
<ol class="decimal" start="0">
<li>0</li>
</ol>
<ol class="decimal" start="-2147483649">
<li>1</li>
</ol>
<ol class="decimal negative-number" start="-2147483648">
<li>2147483648</li>
<li>2147483647</li>
</ol>
</div>
<div class="test">
<h2>decimal-leading-zero</h2>
<ol class="decimal-leading-zero">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
</ol>
<ol class="decimal-leading-zero" start="0">
<li>00</li>
</ol>
<ol class="decimal-leading-zero" start="-2147483649">
<li>01</li>
</ol>
<ol class="decimal-leading-zero negative-number" start="-2147483648">
<li>2147483648</li>
<li>2147483647</li>
</ol>
</div>
<div class="test">
<h2>devanagari</h2>
<ol class="devanagari">
<li>&#x0967;</li>
<li>&#x0968;</li>
<li>&#x0969;</li>
<li>&#x096A;</li>
<li>&#x096B;</li>
<li>&#x096C;</li>
<li>&#x096D;</li>
<li>&#x096E;</li>
<li>&#x096F;</li>
<li>&#x0967;&#x0966;</li>
</ol>
<ol class="devanagari" start="0">
<li>&#x0966;</li>
</ol>
<ol class="devanagari" start="-2147483649">
<li>&#x967;</li>
</ol>
<ol class="devanagari negative-number" start="-2147483648">
<li>&#x968;&#x967;&#x96A;&#x96D;&#x96A;&#x96E;&#x969;&#x96C;&#x96A;&#x96E;</li>
<li>&#x968;&#x967;&#x96A;&#x96D;&#x96A;&#x96E;&#x969;&#x96C;&#x96A;&#x96D;</li>
</ol>
</div>
<div class="test">
<h2>gujarati</h2>
<ol class="gujarati">
<li>&#x0AE7;</li>
<li>&#x0AE8;</li>
<li>&#x0AE9;</li>
<li>&#x0AEA;</li>
<li>&#x0AEB;</li>
<li>&#x0AEC;</li>
<li>&#x0AED;</li>
<li>&#x0AEE;</li>
<li>&#x0AEF;</li>
<li>&#x0AE7;&#x0AE6;</li>
</ol>
<ol class="gujarati" start="0">
<li>&#x0AE6;</li>
</ol>
<ol class="gujarati" start="-2147483649">
<li>&#xAE7;</li>
</ol>
<ol class="gujarati negative-number" start="-2147483648">
<li>&#xAE8;&#xAE7;&#xAEA;&#xAED;&#xAEA;&#xAEE;&#xAE9;&#xAEC;&#xAEA;&#xAEE;</li>
<li>&#xAE8;&#xAE7;&#xAEA;&#xAED;&#xAEA;&#xAEE;&#xAE9;&#xAEC;&#xAEA;&#xAED;</li>
</ol>
</div>
<div class="test">
<h2>gurmukhi</h2>
<ol class="gurmukhi">
<li>&#x0A67;</li>
<li>&#x0A68;</li>
<li>&#x0A69;</li>
<li>&#x0A6A;</li>
<li>&#x0A6B;</li>
<li>&#x0A6C;</li>
<li>&#x0A6D;</li>
<li>&#x0A6E;</li>
<li>&#x0A6F;</li>
<li>&#x0A67;&#x0A66;</li>
</ol>
<ol class="gurmukhi" start="0">
<li>&#x0A66;</li>
</ol>
<ol class="gurmukhi" start="-2147483649">
<li>&#xA67;</li>
</ol>
<ol class="gurmukhi negative-number" start="-2147483648">
<li>&#xA68;&#xA67;&#xA6A;&#xA6D;&#xA6A;&#xA6E;&#xA69;&#xA6C;&#xA6A;&#xA6E;</li>
<li>&#xA68;&#xA67;&#xA6A;&#xA6D;&#xA6A;&#xA6E;&#xA69;&#xA6C;&#xA6A;&#xA6D;</li>
</ol>
</div>
<div class="test">
<h2>kannada</h2>
<ol class="kannada">
<li>&#x0CE7;</li>
<li>&#x0CE8;</li>
<li>&#x0CE9;</li>
<li>&#x0CEA;</li>
<li>&#x0CEB;</li>
<li>&#x0CEC;</li>
<li>&#x0CED;</li>
<li>&#x0CEE;</li>
<li>&#x0CEF;</li>
<li>&#x0CE7;&#x0CE6;</li>
</ol>
<ol class="kannada" start="0">
<li>&#x0CE6;</li>
</ol>
<ol class="kannada" start="-2147483649">
<li>&#xCE7;</li>
</ol>
<ol class="kannada negative-number" start="-2147483648">
<li>&#xCE8;&#xCE7;&#xCEA;&#xCED;&#xCEA;&#xCEE;&#xCE9;&#xCEC;&#xCEA;&#xCEE;</li>
<li>&#xCE8;&#xCE7;&#xCEA;&#xCED;&#xCEA;&#xCEE;&#xCE9;&#xCEC;&#xCEA;&#xCED;</li>
</ol>
</div>
<div class="test">
<h2>lao</h2>
<ol class="lao">
<li>&#x0ED1;</li>
<li>&#x0ED2;</li>
<li>&#x0ED3;</li>
<li>&#x0ED4;</li>
<li>&#x0ED5;</li>
<li>&#x0ED6;</li>
<li>&#x0ED7;</li>
<li>&#x0ED8;</li>
<li>&#x0ED9;</li>
<li>&#x0ED1;&#x0ED0;</li>
</ol>
<ol class="lao" start="0">
<li>&#x0ED0;</li>
</ol>
<ol class="lao" start="-2147483649">
<li>&#xED1;</li>
</ol>
<ol class="lao negative-number" start="-2147483648">
<li>&#xED2;&#xED1;&#xED4;&#xED7;&#xED4;&#xED8;&#xED3;&#xED6;&#xED4;&#xED8;</li>
<li>&#xED2;&#xED1;&#xED4;&#xED7;&#xED4;&#xED8;&#xED3;&#xED6;&#xED4;&#xED7;</li>
</ol>
</div>
<div class="test">
<h2>malayalam</h2>
<ol class="malayalam">
<li>&#x0D67;</li>
<li>&#x0D68;</li>
<li>&#x0D69;</li>
<li>&#x0D6A;</li>
<li>&#x0D6B;</li>
<li>&#x0D6C;</li>
<li>&#x0D6D;</li>
<li>&#x0D6E;</li>
<li>&#x0D6F;</li>
<li>&#x0D67;&#x0D66;</li>
</ol>
<ol class="malayalam" start="0">
<li>&#x0D66;</li>
</ol>
<ol class="malayalam" start="-2147483649">
<li>&#xD67;</li>
</ol>
<ol class="malayalam negative-number" start="-2147483648">
<li>&#xD68;&#xD67;&#xD6A;&#xD6D;&#xD6A;&#xD6E;&#xD69;&#xD6C;&#xD6A;&#xD6E;</li>
<li>&#xD68;&#xD67;&#xD6A;&#xD6D;&#xD6A;&#xD6E;&#xD69;&#xD6C;&#xD6A;&#xD6D;</li>
</ol>
</div>
<div class="test">
<h2>mongolian</h2>
<ol class="mongolian">
<li>&#x1811;</li>
<li>&#x1812;</li>
<li>&#x1813;</li>
<li>&#x1814;</li>
<li>&#x1815;</li>
<li>&#x1816;</li>
<li>&#x1817;</li>
<li>&#x1818;</li>
<li>&#x1819;</li>
<li>&#x1811;&#x1810;</li>
</ol>
<ol class="mongolian" start="0">
<li>&#x1810;</li>
</ol>
<ol class="mongolian" start="-2147483649">
<li>&#x1811;</li>
</ol>
<ol class="mongolian negative-number" start="-2147483648">
<li>&#x1812;&#x1811;&#x1814;&#x1817;&#x1814;&#x1818;&#x1813;&#x1816;&#x1814;&#x1818;</li>
<li>&#x1812;&#x1811;&#x1814;&#x1817;&#x1814;&#x1818;&#x1813;&#x1816;&#x1814;&#x1817;</li>
</ol>
</div>
<div class="test">
<h2>myanmar</h2>
<ol class="myanmar">
<li>&#x1041;</li>
<li>&#x1042;</li>
<li>&#x1043;</li>
<li>&#x1044;</li>
<li>&#x1045;</li>
<li>&#x1046;</li>
<li>&#x1047;</li>
<li>&#x1048;</li>
<li>&#x1049;</li>
<li>&#x1041;&#x1040;</li>
</ol>
<ol class="myanmar" start="0">
<li>&#x1040;</li>
</ol>
<ol class="myanmar" start="-2147483649">
<li>&#x1041;</li>
</ol>
<ol class="myanmar negative-number" start="-2147483648">
<li>&#x1042;&#x1041;&#x1044;&#x1047;&#x1044;&#x1048;&#x1043;&#x1046;&#x1044;&#x1048;</li>
<li>&#x1042;&#x1041;&#x1044;&#x1047;&#x1044;&#x1048;&#x1043;&#x1046;&#x1044;&#x1047;</li>
</ol>
</div>
<div class="test">
<h2>oriya</h2>
<ol class="oriya">
<li>&#x0B67;</li>
<li>&#x0B68;</li>
<li>&#x0B69;</li>
<li>&#x0B6A;</li>
<li>&#x0B6B;</li>
<li>&#x0B6C;</li>
<li>&#x0B6D;</li>
<li>&#x0B6E;</li>
<li>&#x0B6F;</li>
<li>&#x0B67;&#x0B66;</li>
</ol>
<ol class="oriya" start="0">
<li>&#x0B66;</li>
</ol>
<ol class="oriya" start="-2147483649">
<li>&#xB67;</li>
</ol>
<ol class="oriya negative-number" start="-2147483648">
<li>&#xB68;&#xB67;&#xB6A;&#xB6D;&#xB6A;&#xB6E;&#xB69;&#xB6C;&#xB6A;&#xB6E;</li>
<li>&#xB68;&#xB67;&#xB6A;&#xB6D;&#xB6A;&#xB6E;&#xB69;&#xB6C;&#xB6A;&#xB6D;</li>
</ol>
</div>
<div class="test">
<h2>persian</h2>
<ol class="persian">
<li>&#x06F1;</li>
<li>&#x06F2;</li>
<li>&#x06F3;</li>
<li>&#x06F4;</li>
<li>&#x06F5;</li>
<li>&#x06F6;</li>
<li>&#x06F7;</li>
<li>&#x06F8;</li>
<li>&#x06F9;</li>
<li>&#x06F1;&#x06F0;</li>
</ol>
<ol class="persian" start="0">
<li>&#x06F0;</li>
</ol>
<ol class="persian" start="-2147483649">
<li>&#x6F1;</li>
</ol>
<ol class="persian negative-number" start="-2147483648">
<li>&#x6F2;&#x6F1;&#x6F4;&#x6F7;&#x6F4;&#x6F8;&#x6F3;&#x6F6;&#x6F4;&#x6F8;</li>
<li>&#x6F2;&#x6F1;&#x6F4;&#x6F7;&#x6F4;&#x6F8;&#x6F3;&#x6F6;&#x6F4;&#x6F7;</li>
</ol>
</div>
<div class="test">
<h2>urdu</h2>
<ol class="urdu">
<li>&#x06F1;</li>
<li>&#x06F2;</li>
<li>&#x06F3;</li>
<li>&#x06F4;</li>
<li>&#x06F5;</li>
<li>&#x06F6;</li>
<li>&#x06F7;</li>
<li>&#x06F8;</li>
<li>&#x06F9;</li>
<li>&#x06F1;&#x06F0;</li>
</ol>
<ol class="urdu" start="0">
<li>&#x06F0;</li>
</ol>
<ol class="urdu" start="-2147483649">
<li>&#x6F1;</li>
</ol>
<ol class="urdu negative-number" start="-2147483648">
<li>&#x6F2;&#x6F1;&#x6F4;&#x6F7;&#x6F4;&#x6F8;&#x6F3;&#x6F6;&#x6F4;&#x6F8;</li>
<li>&#x6F2;&#x6F1;&#x6F4;&#x6F7;&#x6F4;&#x6F8;&#x6F3;&#x6F6;&#x6F4;&#x6F7;</li>
</ol>
</div>
<div class="test">
<h2>telugu</h2>
<ol class="telugu">
<li>&#x0C67;</li>
<li>&#x0C68;</li>
<li>&#x0C69;</li>
<li>&#x0C6A;</li>
<li>&#x0C6B;</li>
<li>&#x0C6C;</li>
<li>&#x0C6D;</li>
<li>&#x0C6E;</li>
<li>&#x0C6F;</li>
<li>&#x0C67;&#x0C66;</li>
</ol>
<ol class="telugu" start="0">
<li>&#x0C66;</li>
</ol>
<ol class="telugu" start="-2147483649">
<li>&#xC67;</li>
</ol>
<ol class="telugu negative-number" start="-2147483648">
<li>&#xC68;&#xC67;&#xC6A;&#xC6D;&#xC6A;&#xC6E;&#xC69;&#xC6C;&#xC6A;&#xC6E;</li>
<li>&#xC68;&#xC67;&#xC6A;&#xC6D;&#xC6A;&#xC6E;&#xC69;&#xC6C;&#xC6A;&#xC6D;</li>
</ol>
</div>
<div class="test">
<h2>tibetan</h2>
<ol class="tibetan">
<li>&#x0F21;</li>
<li>&#x0F22;</li>
<li>&#x0F23;</li>
<li>&#x0F24;</li>
<li>&#x0F25;</li>
<li>&#x0F26;</li>
<li>&#x0F27;</li>
<li>&#x0F28;</li>
<li>&#x0F29;</li>
<li>&#x0F21;&#x0F20;</li>
</ol>
<ol class="tibetan" start="0">
<li>&#x0F20;</li>
</ol>
<ol class="tibetan" start="-2147483649">
<li>&#xF21;</li>
</ol>
<ol class="tibetan negative-number" start="-2147483648">
<li>&#xF22;&#xF21;&#xF24;&#xF27;&#xF24;&#xF28;&#xF23;&#xF26;&#xF24;&#xF28;</li>
<li>&#xF22;&#xF21;&#xF24;&#xF27;&#xF24;&#xF28;&#xF23;&#xF26;&#xF24;&#xF27;</li>
</ol>
</div>
<div class="test">
<h2>thai</h2>
<ol class="thai">
<li>&#x0E51;</li>
<li>&#x0E52;</li>
<li>&#x0E53;</li>
<li>&#x0E54;</li>
<li>&#x0E55;</li>
<li>&#x0E56;</li>
<li>&#x0E57;</li>
<li>&#x0E58;</li>
<li>&#x0E59;</li>
<li>&#x0E51;&#x0E50;</li>
</ol>
<ol class="thai" start="0">
<li>&#x0E50;</li>
</ol>
<ol class="thai" start="-2147483649">
<li>&#xE51;</li>
</ol>
<ol class="thai negative-number" start="-2147483648">
<li>&#xE52;&#xE51;&#xE54;&#xE57;&#xE54;&#xE58;&#xE53;&#xE56;&#xE54;&#xE58;</li>
<li>&#xE52;&#xE51;&#xE54;&#xE57;&#xE54;&#xE58;&#xE53;&#xE56;&#xE54;&#xE57;</li>
</ol>
</div>
</body>
</html>