| <!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> |
| </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> |
