399 lines
17 KiB
HTML
399 lines
17 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<title>I18N Tests: list-style-type</title>
|
||
<style type="text/css">
|
||
ol.lower-latin { list-style-type: lower-latin; }
|
||
ol.upper-latin { list-style-type: upper-latin; }
|
||
ol.lower-alpha { list-style-type: lower-alpha; }
|
||
ol.upper-alpha { list-style-type: upper-alpha; }
|
||
ol.cjk { list-style-type: cjk-ideographic; }
|
||
ol.hiragana { list-style-type: hiragana; }
|
||
ol.hiragana-iroha { list-style-type: hiragana-iroha; }
|
||
ol.katakana { list-style-type: katakana; }
|
||
ol.katakana-iroha { list-style-type: katakana-iroha; }
|
||
ol.hebrew { list-style-type: hebrew; }
|
||
ol.georgian { list-style-type: georgian; }
|
||
ol.armenian { list-style-type: armenian; }
|
||
ol.lower-greek { list-style-type: lower-greek; }
|
||
ol { margin-bottom: 2em; }
|
||
ol ol { margin-bottom: 0em; margin-top: 0.5em; }
|
||
</style>
|
||
<script src="resources/dump-list.js"></script>
|
||
<script>
|
||
window.onload = function()
|
||
{
|
||
if (window.testRunner) {
|
||
testRunner.dumpAsText();
|
||
filterListsWithReplacement(document.querySelectorAll(".test ol"));
|
||
}
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="navigation">
|
||
<h1>I18N Tests: list-style-type</h1>
|
||
<p>This page tests support for the CSS list-style-type property, as defined in CSS2.0.</p>
|
||
<div class="note">
|
||
<p><strong>Note:</strong> The CSS2.0 specification does not specify in any detail the mechanism for implementing the numbering schemes
|
||
defined. Expectations for behaviour are based on the version of the CSS3 Lists module current at the time this test was last updated. In most cases,
|
||
however, these tests simply allow you to see whether and how a particular user agent implements these features, rather than testing against the
|
||
requirements of the specification.</p></div> </div>
|
||
<p class="instructions">Check whether the numbering of the lists is what you would expect.</p>
|
||
<p class="notes">The <code>start</code> attribute is used on <code>ol</code> to skip to higher numbers.</p>
|
||
<h2>lower-latin</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: lower-latin;</code> .</p>
|
||
<p class="notes">The CSS2.0 specification specifies the set of characters as "a, b, c, ... z". It doesn't specify what happens after z.</p>
|
||
<div class="test">
|
||
<ol class="lower-latin">
|
||
<li>one, should show a</li>
|
||
<li>two, should show b
|
||
<ol class="lower-latin">
|
||
<li>one, expect to see a</li>
|
||
<li>two, expect to see b</li>
|
||
<li>three, expect to see c</li>
|
||
</ol></li>
|
||
<li>three, should show c</li>
|
||
<li>four, should show d</li>
|
||
<li>five, should show e</li>
|
||
</ol>
|
||
<ol class="lower-latin" start="26">
|
||
<li>twenty six, should show z</li>
|
||
<li>twenty seven, undefined</li>
|
||
<li>twenty eight, undefined</li>
|
||
</ol>
|
||
<ol class="lower-latin" start="52">
|
||
<li>fifty-two, undefined</li>
|
||
<li>fifty-three, undefined</li>
|
||
<li>fifty-four, undefined</li>
|
||
</ol></div>
|
||
<h2>upper-latin</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: upper-latin; </code></p>
|
||
<p class="notes">The CSS2.0 specification specifies the set of characters as "A, B, C, ... Z". It doesn't specify what happens after Z.</p>
|
||
<div class="test">
|
||
<ol class="upper-latin">
|
||
<li>one, should show A</li>
|
||
<li>two, should show B
|
||
<ol class="upper-latin">
|
||
<li>one, expect to see A</li>
|
||
<li>two, expect to see B</li>
|
||
<li>three, expect to see C</li>
|
||
</ol></li>
|
||
<li>three, should show C</li>
|
||
<li>four, should show D</li>
|
||
<li>five, should show E</li>
|
||
</ol>
|
||
<ol class="upper-latin" start="26">
|
||
<li>twenty six, should show Z</li>
|
||
<li>twenty seven, undefined</li>
|
||
<li>twenty eight, undefined</li>
|
||
</ol>
|
||
<ol class="upper-latin" start="52">
|
||
<li>fifty-two, undefined</li>
|
||
<li>fifty-three, undefined</li>
|
||
<li>fifty-four, undefined</li>
|
||
</ol> </div>
|
||
<h2>lower-alpha</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: lower-alpha;</code> </p>
|
||
<p class="notes">The CSS2.0 specification specifies the set of characters as "a, b, c, ... z". It doesn't specify what happens after z.</p>
|
||
<div class="test">
|
||
<ol class="lower-alpha">
|
||
<li>one, should show a</li>
|
||
<li>two, should show b
|
||
<ol class="lower-latin">
|
||
<li>one, expect to see a</li>
|
||
<li>two, expect to see b</li>
|
||
<li>three, expect to see c</li>
|
||
</ol></li>
|
||
<li>three, should show c</li>
|
||
<li>four, should show d</li>
|
||
<li>five, should show e</li>
|
||
</ol>
|
||
<ol class="lower-alpha" start="26">
|
||
<li>twenty six, should show z</li>
|
||
<li>twenty seven, undefined</li>
|
||
<li>twenty eight, undefined</li>
|
||
</ol>
|
||
<ol class="lower-alpha" start="52">
|
||
<li>fifty-two, undefined</li>
|
||
<li>fifty-three, undefined</li>
|
||
<li>fifty-four, undefined</li>
|
||
</ol></div>
|
||
<h2>upper-alpha</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: upper-alpha;</code> </p>
|
||
<p class="notes">The CSS2.0 specification specifies the set of characters as "A, B, C, ... Z". It doesn't specify what happens after Z.</p>
|
||
<div class="test">
|
||
<ol class="upper-alpha">
|
||
<li>one, should show A</li>
|
||
<li>two, should show B
|
||
<ol class="upper-latin">
|
||
<li>one, expect to see A</li>
|
||
<li>two, expect to see B</li>
|
||
<li>three, expect to see C</li>
|
||
</ol></li>
|
||
<li>three, should show C</li>
|
||
<li>four, should show D</li>
|
||
<li>five, should show E</li>
|
||
</ol>
|
||
<ol class="upper-alpha" start="26">
|
||
<li>twenty six, should show Z</li>
|
||
<li>twenty seven, undefined</li>
|
||
<li>twenty eight, undefined</li>
|
||
</ol>
|
||
<ol class="upper-alpha" start="52">
|
||
<li>fifty-two, undefined</li>
|
||
<li>fifty-three, undefined</li>
|
||
<li>fifty-four, undefined</li>
|
||
</ol></div>
|
||
<h2>lower-greek</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: lower-greek;</code> </p>
|
||
<p class="notes">The CSS2.0 specification doesn't explicitly define the set of characters in the list, nor what happens after the list is
|
||
exhausted, but does say "Lowercase classical Greek alpha, beta, gamma, ... (έ, ή, ί, ...)".</p>
|
||
<div class="test">
|
||
<ol class="lower-greek">
|
||
<li>one, may show α</li>
|
||
<li>two, may show β
|
||
<ol class="lower-greek">
|
||
<li>one, may show α</li>
|
||
<li>two, may show β</li>
|
||
<li>three, may show γ</li>
|
||
</ol></li>
|
||
<li>three, may show γ</li>
|
||
<li>four, may show δ</li>
|
||
<li>five, may show ε</li>
|
||
</ol>
|
||
<ol class="lower-greek" start="24">
|
||
<li>twenty four, may show ω</li>
|
||
<li>twenty seven, undefined</li>
|
||
<li>twenty eight, undefined</li>
|
||
</ol>
|
||
<ol class="lower-greek" start="48">
|
||
<li>forty-eight, undefined</li>
|
||
<li>forty-nine, undefined</li>
|
||
<li>fifty, undefined</li>
|
||
</ol></div>
|
||
<h2>hiragana</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: hiragana;</code> </p>
|
||
<p class="notes">The CSS 2.0 specification doesn't explicitly define the set of characters in the list, nor what happens after the list is
|
||
exhausted.</p>
|
||
<div class="test">
|
||
<ol class="hiragana">
|
||
<li>one, may show あ</li>
|
||
<li>two, may show い
|
||
<ol class="hiragana">
|
||
<li>one, may show あ</li>
|
||
<li>two, may show い</li>
|
||
<li>three, may show う</li>
|
||
</ol></li>
|
||
<li>three, may show う</li>
|
||
<li>four, may show え</li>
|
||
<li>five, may show お</li>
|
||
</ol>
|
||
<ol class="hiragana" start="48">
|
||
<li>forty-eight, may show ん</li>
|
||
<li>forty-nine, undefined</li>
|
||
<li>fifty, undefined</li>
|
||
</ol>
|
||
<ol class="hiragana" start="96">
|
||
<li>ninety-six, undefined</li>
|
||
<li>ninety-seven, undefined</li>
|
||
<li>ninety-eight, undefined</li>
|
||
</ol></div>
|
||
<h2>hiragana-iroha</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: hiragana-iroha; </code></p>
|
||
<p class="notes">The CSS 2.0 specification doesn't explicitly define the set of characters in the list, nor what happens after the list is
|
||
exhausted.</p>
|
||
<div class="test">
|
||
<ol class="hiragana-iroha">
|
||
<li>one, may show い</li>
|
||
<li>two, may show ろ
|
||
<ol class="hiragana">
|
||
<li>one, may show い</li>
|
||
<li>two, may show ろ</li>
|
||
<li>three, may show は</li>
|
||
</ol></li>
|
||
<li>three, may show は</li>
|
||
<li>four, may show に</li>
|
||
<li>five, may show ほ</li>
|
||
</ol>
|
||
<ol class="hiragana-iroha" start="47">
|
||
<li>forty-seven, may show す</li>
|
||
<li>forty-eight, undefined</li>
|
||
<li>forty-nine, undefined</li>
|
||
</ol>
|
||
<ol class="hiragana-iroha" start="94">
|
||
<li>ninety-four, undefined</li>
|
||
<li>ninety-five, undefined</li>
|
||
<li>ninety-six, undefined</li>
|
||
</ol></div>
|
||
<h2>katakana</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: katakana;</code> </p>
|
||
<p class="notes">The CSS 2.0 specification doesn't explicitly define the set of characters in the list, nor what happens after the list is
|
||
exhausted.</p>
|
||
<div class="test">
|
||
<ol class="katakana">
|
||
<li>one, may show ア</li>
|
||
<li>two, may show イ
|
||
<ol class="katakana">
|
||
<li>one, may show ア</li>
|
||
<li>two, may show イ</li>
|
||
<li>three, may show ウ</li>
|
||
</ol></li>
|
||
<li>three, may show ウ</li>
|
||
<li>four, may show エ</li>
|
||
<li>five, may show オ</li>
|
||
</ol>
|
||
<ol class="katakana" start="48">
|
||
<li>forty-eight, undefined</li>
|
||
<li>forty-nine, undefined</li>
|
||
<li>fifty, undefined</li>
|
||
</ol>
|
||
<ol class="katakana" start="96">
|
||
<li>ninety-six, undefined</li>
|
||
<li>ninety-seven, undefined</li>
|
||
<li>ninety-eight, undefined</li>
|
||
</ol></div>
|
||
<h2>katakana-iroha</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: katakana-iroha;</code> </p>
|
||
<p class="notes">The CSS 2.0 specification doesn't explicitly define the set of characters in the list, nor what happens after the list is
|
||
exhausted.</p>
|
||
<div class="test">
|
||
<ol class="katakana-iroha">
|
||
<li>one, may show イ</li>
|
||
<li>two, may show ロ
|
||
<ol class="hiragana">
|
||
<li>one, may show イ</li>
|
||
<li>two, may show ロ</li>
|
||
<li>three, may show ハ</li>
|
||
</ol></li>
|
||
<li>three, may show ハ</li>
|
||
<li>four, may show ニ</li>
|
||
<li>five, may show ホ</li>
|
||
</ol>
|
||
<ol class="katakana-iroha" start="47">
|
||
<li>forty-seven, may show ス</li>
|
||
<li>forty-eight, undefined</li>
|
||
<li>forty-nine, undefined</li>
|
||
</ol>
|
||
<ol class="katakana-iroha" start="94">
|
||
<li>ninety-four, undefined</li>
|
||
<li>ninety-five, undefined</li>
|
||
<li>ninety-six, undefined</li>
|
||
</ol></div>
|
||
<h2>cjk-ideographic</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: cjk-ideographic;</code></p>
|
||
<p class="notes">The CSS2.0 specification doesn't define what characters should be used to create each number - there are multiple alternatives.
|
||
Note that the characters specified in the CSS3 Lists module as of the date of publication of this page are not those expected below.</p>
|
||
<div class="test">
|
||
<ol class="cjk">
|
||
<li>one</li>
|
||
<li>two
|
||
<ol class="cjk">
|
||
<li>one</li>
|
||
<li>two</li>
|
||
<li>three</li>
|
||
</ol></li>
|
||
<li>three</li>
|
||
<li>four</li>
|
||
<li>five</li>
|
||
</ol>
|
||
<ol class="cjk" start="20">
|
||
<li>twenty, undefined</li>
|
||
<li>twenty one, undefined</li>
|
||
<li>twenty two, undefined</li>
|
||
</ol>
|
||
<ol class="cjk" start="100">
|
||
<li>a hundred, undefined</li>
|
||
<li>a hundred and one, undefined</li>
|
||
<li>a hundred and two, undefined</li>
|
||
</ol>
|
||
<ol class="cjk" start="0">
|
||
<li>zero, undefined</li>
|
||
<li>one</li>
|
||
</ol></div>
|
||
<h2>hebrew</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: hebrew;</code></p>
|
||
<p class="notes">The CSS2.0 specification doesn't define the algorithm for the Hebrew numbering.</p>
|
||
<div class="test">
|
||
<ol class="hebrew">
|
||
<li>one, should show א</li>
|
||
<li>two, should show ב
|
||
<ol class="hebrew">
|
||
<li>one, should show א</li>
|
||
<li>two, should show ב</li>
|
||
<li>three, should show ג</li>
|
||
</ol></li>
|
||
<li>three, should show ג</li>
|
||
<li>four, should show ד</li>
|
||
<li>five, should show ה</li>
|
||
</ol>
|
||
<ol class="hebrew" start="97">
|
||
<li>ninety-seven, undefined, may show צז</li>
|
||
<li>ninety-eight, undefined, may show צח</li>
|
||
<li>ninety-nine, undefined, may show צט</li>
|
||
<li>hundred, undefined, may show ק</li>
|
||
<li>a hundred and one, undefined, may show קא</li>
|
||
</ol>
|
||
<ol class="hebrew" start="0">
|
||
<li>zero, undefined, may show אפס</li>
|
||
<li>one, should show א</li>
|
||
</ol></div>
|
||
<h2>georgian</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: georgian;</code></p>
|
||
<p class="notes">The CSS2.0 specification doesn't define the algorithm for Georgian numbering in detail.</p>
|
||
<div class="test">
|
||
<ol class="georgian">
|
||
<li>one, may show ა</li>
|
||
<li>two, may show ბ
|
||
<ol class="georgian">
|
||
<li>one, may show ა</li>
|
||
<li>two, may show ბ</li>
|
||
<li>three, may show გ</li>
|
||
</ol></li>
|
||
<li>three, may show გ</li>
|
||
<li>four, may show დ</li>
|
||
<li>five, may show ე</li>
|
||
<li>six, may show ვ</li>
|
||
<li>seven, may show ზ</li>
|
||
<li>eight, may show ჱ</li>
|
||
<li>nine, may show თ</li>
|
||
<li>ten, may show ი</li>
|
||
<li>eleven, may show ია</li>
|
||
<li>twelve, may show იბ</li>
|
||
</ol>
|
||
<ol class="georgian" start="99">
|
||
<li>ninety-nine, undefined, may show ჟთ</li>
|
||
<li>hundred, undefined, may show რ</li>
|
||
<li>a hundred and one, undefined, may show რა</li>
|
||
</ol> </div>
|
||
<h2>armenian</h2>
|
||
<p class="notes">CSS says: <code>list-style-type: armenian;</code></p>
|
||
<p class="notes">The CSS2.0 specification doesn't define the algorithm for Armenian numbering in detail.</p>
|
||
<div class="test" style="display: none"> <!-- disable for now since things dump differently depending on installed fonts -->
|
||
<ol class="armenian">
|
||
<li>one, may show ա</li>
|
||
<li>two, may show բ
|
||
<ol class="armenian">
|
||
<li>one, may show ա</li>
|
||
<li>two, may show բ</li>
|
||
<li>three, may show գ</li>
|
||
</ol></li>
|
||
<li>three, may show գ</li>
|
||
<li>four, may show դ</li>
|
||
<li>five, may show ե</li>
|
||
<li>six, may show զ</li>
|
||
<li>seven, may show է</li>
|
||
<li>eight, may show ը</li>
|
||
<li>nine, may show թ</li>
|
||
<li>ten, may show ժ</li>
|
||
<li>eleven, may show ժա</li>
|
||
<li>twelve, may show ժբ</li>
|
||
</ol>
|
||
<ol class="armenian" start="99">
|
||
<li>ninety-nine, undefined, may show ղթ</li>
|
||
<li>hundred, undefined, may show ճ</li>
|
||
<li>a hundred and one, undefined, may show ճա</li>
|
||
</ol> </div>
|
||
</body>
|
||
</html>
|