<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 <li> (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>١</li>
<li>٢</li>
<li>٣</li>
<li>٤</li>
<li>٥</li>
<li>٦</li>
<li>٧</li>
<li>٨</li>
<li>٩</li>
<li>١٠</li>
</ol>
<ol class="arabic-indic" start="0">
<li>٠</li>
</ol>
<ol class="arabic-indic" start="-2147483649">
<li>١</li>
</ol>
<ol class="arabic-indic negative-number" start="-2147483648">
<li>٢١٤٧٤٨٣٦٤٨</li>
<li>٢١٤٧٤٨٣٦٤٧</li>
</ol>
</div>
<div class="test">
<h2>bengali</h2>
<ol class="bengali">
<li>১</li>
<li>২</li>
<li>৩</li>
<li>৪</li>
<li>৫</li>
<li>৬</li>
<li>৭</li>
<li>৮</li>
<li>৯</li>
<li>১০</li>
</ol>
<ol class="bengali" start="0">
<li>০</li>
</ol>
<ol class="bengali" start="-2147483649">
<li>১</li>
</ol>
<ol class="bengali negative-number" start="-2147483648">
<li>২১৪৭৪৮৩৬৪৮</li>
<li>২১৪৭৪৮৩৬৪৭</li>
</ol>
</div>
<div class="test">
<h2>cambodian</h2>
<ol class="cambodian">
<li>១</li>
<li>២</li>
<li>៣</li>
<li>៤</li>
<li>៥</li>
<li>៦</li>
<li>៧</li>
<li>៨</li>
<li>៩</li>
<li>១០</li>
</ol>
<ol class="cambodian" start="0">
<li>០</li>
</ol>
<ol class="cambodian" start="-2147483649">
<li>១</li>
</ol>
<ol class="cambodian negative-number" start="-2147483648">
<li>២១៤៧៤៨៣៦៤៨</li>
<li>២១៤៧៤៨៣៦៤៧</li>
</ol>
</div>
<div class="test">
<h2>khmer</h2>
<ol class="khmer">
<li>១</li>
<li>២</li>
<li>៣</li>
<li>៤</li>
<li>៥</li>
<li>៦</li>
<li>៧</li>
<li>៨</li>
<li>៩</li>
<li>១០</li>
</ol>
<ol class="khmer" start="0">
<li>០</li>
</ol>
<ol class="khmer" start="-2147483649">
<li>១</li>
</ol>
<ol class="khmer negative-number" start="-2147483648">
<li>២១៤៧៤៨៣៦៤៨</li>
<li>២១៤៧៤៨៣៦៤៧</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>१</li>
<li>२</li>
<li>३</li>
<li>४</li>
<li>५</li>
<li>६</li>
<li>७</li>
<li>८</li>
<li>९</li>
<li>१०</li>
</ol>
<ol class="devanagari" start="0">
<li>०</li>
</ol>
<ol class="devanagari" start="-2147483649">
<li>१</li>
</ol>
<ol class="devanagari negative-number" start="-2147483648">
<li>२१४७४८३६४८</li>
<li>२१४७४८३६४७</li>
</ol>
</div>
<div class="test">
<h2>gujarati</h2>
<ol class="gujarati">
<li>૧</li>
<li>૨</li>
<li>૩</li>
<li>૪</li>
<li>૫</li>
<li>૬</li>
<li>૭</li>
<li>૮</li>
<li>૯</li>
<li>૧૦</li>
</ol>
<ol class="gujarati" start="0">
<li>૦</li>
</ol>
<ol class="gujarati" start="-2147483649">
<li>૧</li>
</ol>
<ol class="gujarati negative-number" start="-2147483648">
<li>૨૧૪૭૪૮૩૬૪૮</li>
<li>૨૧૪૭૪૮૩૬૪૭</li>
</ol>
</div>
<div class="test">
<h2>gurmukhi</h2>
<ol class="gurmukhi">
<li>੧</li>
<li>੨</li>
<li>੩</li>
<li>੪</li>
<li>੫</li>
<li>੬</li>
<li>੭</li>
<li>੮</li>
<li>੯</li>
<li>੧੦</li>
</ol>
<ol class="gurmukhi" start="0">
<li>੦</li>
</ol>
<ol class="gurmukhi" start="-2147483649">
<li>੧</li>
</ol>
<ol class="gurmukhi negative-number" start="-2147483648">
<li>੨੧੪੭੪੮੩੬੪੮</li>
<li>੨੧੪੭੪੮੩੬੪੭</li>
</ol>
</div>
<div class="test">
<h2>kannada</h2>
<ol class="kannada">
<li>೧</li>
<li>೨</li>
<li>೩</li>
<li>೪</li>
<li>೫</li>
<li>೬</li>
<li>೭</li>
<li>೮</li>
<li>೯</li>
<li>೧೦</li>
</ol>
<ol class="kannada" start="0">
<li>೦</li>
</ol>
<ol class="kannada" start="-2147483649">
<li>೧</li>
</ol>
<ol class="kannada negative-number" start="-2147483648">
<li>೨೧೪೭೪೮೩೬೪೮</li>
<li>೨೧೪೭೪೮೩೬೪೭</li>
</ol>
</div>
<div class="test">
<h2>lao</h2>
<ol class="lao">
<li>໑</li>
<li>໒</li>
<li>໓</li>
<li>໔</li>
<li>໕</li>
<li>໖</li>
<li>໗</li>
<li>໘</li>
<li>໙</li>
<li>໑໐</li>
</ol>
<ol class="lao" start="0">
<li>໐</li>
</ol>
<ol class="lao" start="-2147483649">
<li>໑</li>
</ol>
<ol class="lao negative-number" start="-2147483648">
<li>໒໑໔໗໔໘໓໖໔໘</li>
<li>໒໑໔໗໔໘໓໖໔໗</li>
</ol>
</div>
<div class="test">
<h2>malayalam</h2>
<ol class="malayalam">
<li>൧</li>
<li>൨</li>
<li>൩</li>
<li>൪</li>
<li>൫</li>
<li>൬</li>
<li>൭</li>
<li>൮</li>
<li>൯</li>
<li>൧൦</li>
</ol>
<ol class="malayalam" start="0">
<li>൦</li>
</ol>
<ol class="malayalam" start="-2147483649">
<li>൧</li>
</ol>
<ol class="malayalam negative-number" start="-2147483648">
<li>൨൧൪൭൪൮൩൬൪൮</li>
<li>൨൧൪൭൪൮൩൬൪൭</li>
</ol>
</div>
<div class="test">
<h2>mongolian</h2>
<ol class="mongolian">
<li>᠑</li>
<li>᠒</li>
<li>᠓</li>
<li>᠔</li>
<li>᠕</li>
<li>᠖</li>
<li>᠗</li>
<li>᠘</li>
<li>᠙</li>
<li>᠑᠐</li>
</ol>
<ol class="mongolian" start="0">
<li>᠐</li>
</ol>
<ol class="mongolian" start="-2147483649">
<li>᠑</li>
</ol>
<ol class="mongolian negative-number" start="-2147483648">
<li>᠒᠑᠔᠗᠔᠘᠓᠖᠔᠘</li>
<li>᠒᠑᠔᠗᠔᠘᠓᠖᠔᠗</li>
</ol>
</div>
<div class="test">
<h2>myanmar</h2>
<ol class="myanmar">
<li>၁</li>
<li>၂</li>
<li>၃</li>
<li>၄</li>
<li>၅</li>
<li>၆</li>
<li>၇</li>
<li>၈</li>
<li>၉</li>
<li>၁၀</li>
</ol>
<ol class="myanmar" start="0">
<li>၀</li>
</ol>
<ol class="myanmar" start="-2147483649">
<li>၁</li>
</ol>
<ol class="myanmar negative-number" start="-2147483648">
<li>၂၁၄၇၄၈၃၆၄၈</li>
<li>၂၁၄၇၄၈၃၆၄၇</li>
</ol>
</div>
<div class="test">
<h2>oriya</h2>
<ol class="oriya">
<li>୧</li>
<li>୨</li>
<li>୩</li>
<li>୪</li>
<li>୫</li>
<li>୬</li>
<li>୭</li>
<li>୮</li>
<li>୯</li>
<li>୧୦</li>
</ol>
<ol class="oriya" start="0">
<li>୦</li>
</ol>
<ol class="oriya" start="-2147483649">
<li>୧</li>
</ol>
<ol class="oriya negative-number" start="-2147483648">
<li>୨୧୪୭୪୮୩୬୪୮</li>
<li>୨୧୪୭୪୮୩୬୪୭</li>
</ol>
</div>
<div class="test">
<h2>persian</h2>
<ol class="persian">
<li>۱</li>
<li>۲</li>
<li>۳</li>
<li>۴</li>
<li>۵</li>
<li>۶</li>
<li>۷</li>
<li>۸</li>
<li>۹</li>
<li>۱۰</li>
</ol>
<ol class="persian" start="0">
<li>۰</li>
</ol>
<ol class="persian" start="-2147483649">
<li>۱</li>
</ol>
<ol class="persian negative-number" start="-2147483648">
<li>۲۱۴۷۴۸۳۶۴۸</li>
<li>۲۱۴۷۴۸۳۶۴۷</li>
</ol>
</div>
<div class="test">
<h2>urdu</h2>
<ol class="urdu">
<li>۱</li>
<li>۲</li>
<li>۳</li>
<li>۴</li>
<li>۵</li>
<li>۶</li>
<li>۷</li>
<li>۸</li>
<li>۹</li>
<li>۱۰</li>
</ol>
<ol class="urdu" start="0">
<li>۰</li>
</ol>
<ol class="urdu" start="-2147483649">
<li>۱</li>
</ol>
<ol class="urdu negative-number" start="-2147483648">
<li>۲۱۴۷۴۸۳۶۴۸</li>
<li>۲۱۴۷۴۸۳۶۴۷</li>
</ol>
</div>
<div class="test">
<h2>telugu</h2>
<ol class="telugu">
<li>౧</li>
<li>౨</li>
<li>౩</li>
<li>౪</li>
<li>౫</li>
<li>౬</li>
<li>౭</li>
<li>౮</li>
<li>౯</li>
<li>౧౦</li>
</ol>
<ol class="telugu" start="0">
<li>౦</li>
</ol>
<ol class="telugu" start="-2147483649">
<li>౧</li>
</ol>
<ol class="telugu negative-number" start="-2147483648">
<li>౨౧౪౭౪౮౩౬౪౮</li>
<li>౨౧౪౭౪౮౩౬౪౭</li>
</ol>
</div>
<div class="test">
<h2>tibetan</h2>
<ol class="tibetan">
<li>༡</li>
<li>༢</li>
<li>༣</li>
<li>༤</li>
<li>༥</li>
<li>༦</li>
<li>༧</li>
<li>༨</li>
<li>༩</li>
<li>༡༠</li>
</ol>
<ol class="tibetan" start="0">
<li>༠</li>
</ol>
<ol class="tibetan" start="-2147483649">
<li>༡</li>
</ol>
<ol class="tibetan negative-number" start="-2147483648">
<li>༢༡༤༧༤༨༣༦༤༨</li>
<li>༢༡༤༧༤༨༣༦༤༧</li>
</ol>
</div>
<div class="test">
<h2>thai</h2>
<ol class="thai">
<li>๑</li>
<li>๒</li>
<li>๓</li>
<li>๔</li>
<li>๕</li>
<li>๖</li>
<li>๗</li>
<li>๘</li>
<li>๙</li>
<li>๑๐</li>
</ol>
<ol class="thai" start="0">
<li>๐</li>
</ol>
<ol class="thai" start="-2147483649">
<li>๑</li>
</ol>
<ol class="thai negative-number" start="-2147483648">
<li>๒๑๔๗๔๘๓๖๔๘</li>
<li>๒๑๔๗๔๘๓๖๔๗</li>
</ol>
</div>
</body>
</html>
Codebase Browser
chromium