LayoutTests/fast/lists/w3-css3-list-styles-fallback-style.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5     <link rel="stylesheet" href="resources/w3-css3-list-styles-alphabetic.css" type="text/css" charset="utf-8" />
   6     <style>
   7         .test ol { float: left; padding-right: 20px; }
   8         .test h2 { clear: left; }
   9         hr { clear: left;}
  10         hr + h2 { color: blue; }
  11
  12         /*
  13         The following styles are ordered as they appear in section 4.2. of the
  14         Draft 7 November 2002 draft of the CSS3 Lists module <http://www.w3.org/TR/css3-lists/#algorithmic>.
  15         */
  16
  17         ol.armenian { list-style-type: armenian; }
  18
  19         ol.cjk-ideographic { list-style-type: cjk-ideographic; }
  20
  21         ol.ethiopic-numeric { list-style-type: ethiopic-numeric; }
  22
  23         ol.georgian { list-style-type: georgian; }
  24
  25         ol.hebrew { list-style-type: hebrew; }
  26
  27         ol.japanese-formal { list-style-type: japanese-formal; }
  28
  29         ol.japanese-informal { list-style-type: japanese-informal; }
  30
  31         ol.lower-armenian { list-style-type: lower-armenian; }
  32
  33         ol.lower-roman { list-style-type: lower-roman; }
  34
  35         ol.simp-chinese-formal { list-style-type: simp-chinese-formal; }
  36
  37         ol.simp-chinese-informal { list-style-type: simp-chinese-informal; }
  38
  39         ol.syriac { list-style-type: syriac; }
  40
  41         ol.tamil { list-style-type: tamil; }
  42
  43         ol.trad-chinese-formal { list-style-type: trad-chinese-formal; }
  44
  45         ol.trad-chinese-informal { list-style-type: trad-chinese-informal; }
  46
  47         ol.upper-armenian { list-style-type: upper-armenian; }
  48
  49         ol.upper-roman { list-style-type: upper-roman; }
  50     </style>
  51     <script src="resources/dump-list.js"></script>
  52     <script>
  53         function runTest()
  54         {
  55             if (!window.layoutTestController)
  56                 return;
  57
  58             layoutTestController.dumpAsText();
  59             filterListsWithReplacement(document.querySelectorAll(".test ol"), testListItemMarkerEqualsListItemText);
  60             document.body.removeChild(document.getElementById("description")); // Remove description when running in DRT.
  61         }
  62         window.onload = runTest;
  63     </script>
  64 </head>
  65 <body>
  66     <h1>CSS3 Fallback to Decimal List Style</h1>
  67     <div id="description">
  68         <p>This tests that we fallback to the decimal list style type when the ordinal is outside the representable range for the list style type as per the <a href="http://www.w3.org/TR/css3-lists/">CSS3 Lists module</a> (Draft 7 November 2002). This test PASSED if the list item matches its marker for every list item (below).</p>
  69         <p>Note, as of 12/04/2010, ethiopic-numeric; japanese-formal; japanese-informal; simp-chinese-formal; simp-chinese-informal; syriac; tamil; trad-chinese-formal; and trad-chinese-informal are unsupported and hence have expected failure results.</p>
  70     </div>
  71     <hr/>
  72     <h2>Algorithmic</h2>
  73     <div class="test">
  74         <h2>armenian</h2>
  75         <ol class="armenian" start="-1">
  76             <li>-1</li>
  77             <li>0</li>
  78             <li>&#x531;</li>
  79         </ol>
  80         <ol class="armenian" start="99999999">
  81             <li>&#x554;&#x302;&#x54B;&#x302;&#x542;&#x302;&#x539;&#x302;&#x554;&#x54B;&#x542;&#x539;</li>
  82             <li>100000000</li>
  83         </ol>
  84     </div>
  85
  86     <div class="test">
  87         <h2>cjk-ideographic</h2>
  88         <ol class="cjk-ideographic" start="-1">
  89             <li>-1</li>
  90             <li>&#x96F6;</li>
  91             <li>&#x4E00;</li>
  92         </ol>
  93     </div>
  94
  95     <div class="test">
  96         <!-- FIXME: We don't currently support this list-style-type. These are expected failure results. -->
  97         <h2>ethiopic-numeric</h2>
  98         <ol class="ethiopic-numeric" start="-1">
  99             <li>-1</li>
 100             <li>0</li>
 101             <li>1</li>
 102         </ol>
 103     </div>
 104
 105     <div class="test">
 106         <h2>georgian</h2>
 107         <ol class="georgian" start="-1">
 108             <li>-1</li>
 109             <li>0</li>
 110             <li>&#x10D0;</li>
 111         </ol>
 112         <ol class="georgian" start="19999">
 113             <li>&#x10F5;&#x10F0;&#x10E8;&#x10DF;&#x10D7;</li>
 114             <li>20000</li>
 115             <li>20001</li>
 116         </ol>
 117     </div>
 118     <div class="test">
 119         <h2>hebrew</h2>
 120         <ol class="hebrew" start="-1">
 121             <li>-1</li>
 122             <li>&#x5D0;&#x5E4;&#x5E1;</li>
 123             <li>&#x5D0;</li>
 124         </ol>
 125         <ol class="hebrew" start="999999">
 126             <li>&#x5EA;&#x5EA;&#x5E7;&#x5E6;&#x5D8;&#x27;&#x5EA;&#x5EA;&#x5E7;&#x5E6;&#x5D8;</li>
 127             <li>1000000</li>
 128             <li>1000001</li>
 129         </ol>
 130     </div>
 131     <div class="test">
 132         <!-- FIXME: We don't currently support this list-style-type. These are expected failure results. -->
 133         <h2>japanese-formal</h2>
 134         <ol class="japanese-formal" start="-1">
 135             <li>-1</li>
 136             <li>0</li>
 137             <li>1</li>
 138         </ol>
 139     </div>
 140     <div class="test">
 141         <!-- FIXME: We don't currently support this list-style-type. These are expected failure results. -->
 142         <h2>japanese-informal</h2>
 143         <ol class="japanese-informal" start="-1">
 144             <li>-1</li>
 145             <li>0</li>
 146             <li>1</li>
 147         </ol>
 148     </div>
 149     <div class="test">
 150         <h2>lower-armenian</h2>
 151         <ol class="lower-armenian" start="-1">
 152             <li>-1</li>
 153             <li>0</li>
 154             <li>&#x0561;</li>
 155         </ol>
 156     </div>
 157     <div class="test">
 158         <h2>lower-roman</h2>
 159         <ol class="lower-roman" start="-1">
 160             <li>-1</li>
 161             <li>0</li>
 162             <li>i</li>
 163         </ol>
 164     </div>
 165     <div class="test">
 166         <!-- FIXME: We don't currently support this list-style-type. These are expected failure results. -->
 167         <h2>simp-chinese-formal</h2>
 168         <ol class="simp-chinese-formal" start="-1">
 169             <li>-1</li>
 170             <li>0</li>
 171             <li>1</li>
 172         </ol>
 173     </div>
 174     <div class="test">
 175         <!-- FIXME: We don't currently support this list-style-type. These are expected failure results. -->
 176         <h2>simp-chinese-informal</h2>
 177         <ol class="simp-chinese-informal" start="-1">
 178             <li>-1</li>
 179             <li>0</li>
 180             <li>1</li>
 181         </ol>
 182     </div>
 183     <div class="test">
 184         <!-- FIXME: We don't currently support this list-style-type. These are expected failure results. -->
 185         <h2>syriac</h2>
 186         <ol class="syriac" start="-1">
 187             <li>-1</li>
 188             <li>0</li>
 189             <li>1</li>
 190         </ol>
 191     </div>
 192     <div class="test">
 193         <!-- FIXME: We don't currently support this list-style-type. These are expected failure results. -->
 194         <h2>tamil</h2>
 195         <ol class="tamil" start="-1">
 196             <li>-1</li>
 197             <li>0</li>
 198             <li>1</li>
 199         </ol>
 200     </div>
 201     <div class="test">
 202         <!-- FIXME: We don't currently support this list-style-type. These are expected failure results. -->
 203         <h2>trad-chinese-formal</h2>
 204         <ol class="trad-chinese-formal" start="-1">
 205             <li>-1</li>
 206             <li>0</li>
 207             <li>1</li>
 208         </ol>
 209     </div>
 210     <div class="test">
 211         <!-- FIXME: We don't currently support this list-style-type. These are expected failure results. -->
 212         <h2>trad-chinese-informal</h2>
 213         <ol class="trad-chinese-informal" start="-1">
 214             <li>-1</li>
 215             <li>0</li>
 216             <li>1</li>
 217         </ol>
 218     </div>
 219     <div class="test">
 220         <h2>upper-armenian</h2>
 221         <ol class="upper-armenian" start="-1">
 222             <li>-1</li>
 223             <li>0</li>
 224             <li>&#x0531;</li>
 225         </ol>
 226     </div>
 227     <div class="test">
 228         <h2>upper-roman</h2>
 229         <ol class="upper-roman" start="-1">
 230             <li>-1</li>
 231             <li>0</li>
 232             <li>I</li>
 233         </ol>
 234     </div>
 235     <hr/>
 236     <h2>Alphabetic</h2>
 237     <div class="test">
 238         <h2>afar</h2>
 239         <ol class="afar" start="-1">
 240             <li>-1</li>
 241             <li>0</li>
 242             <li>&#x1200;</li>
 243         </ol>
 244     </div>
 245     <div class="test">
 246         <h2>ethiopic-halehame-aa-et</h2>
 247         <ol class="ethiopic-halehame-aa-et" start="-1">
 248             <li>-1</li>
 249             <li>0</li>
 250             <li>&#x1200;</li>
 251         </ol>
 252     </div>
 253     <div class="test">
 254         <h2>ethiopic-halehame-aa-er</h2>
 255         <ol class="ethiopic-halehame-aa-er" start="-1">
 256             <li>-1</li>
 257             <li>0</li>
 258             <li>&#x1200;</li>
 259         </ol>
 260     </div>
 261
 262     <div class="test">
 263         <h2>amharic</h2>
 264         <ol class="amharic" start="-1">
 265             <li>-1</li>
 266             <li>0</li>
 267             <li>&#x1200;</li>
 268         </ol>
 269     </div>
 270     <div class="test">
 271         <h2>ethiopic-halehame-am-et</h2>
 272         <ol class="ethiopic-halehame-am-et" start="-1">
 273             <li>-1</li>
 274             <li>0</li>
 275             <li>&#x1200;</li>
 276         </ol>
 277     </div>
 278     <div class="test">
 279         <h2>amharic-abegede</h2>
 280         <ol class="amharic-abegede" start="-1">
 281             <li>-1</li>
 282             <li>0</li>
 283             <li>&#x12A0;</li>
 284         </ol>
 285     </div>
 286     <div class="test">
 287         <h2>ethiopic-abegede-am-et</h2>
 288         <ol class="ethiopic-abegede-am-et" start="-1">
 289             <li>-1</li>
 290             <li>0</li>
 291             <li>&#x12A0;</li>
 292         </ol>
 293     </div>
 294
 295     <div class="test">
 296         <h2>cjk-earthly-branch</h2>
 297         <ol class="cjk-earthly-branch" start="-1">
 298             <li>-1</li>
 299             <li>0</li>
 300             <li>&#x5B50;</li>
 301         </ol>
 302     </div>
 303
 304     <div class="test">
 305         <h2>cjk-heavenly-stem</h2>
 306         <ol class="cjk-heavenly-stem" start="-1">
 307             <li>-1</li>
 308             <li>0</li>
 309             <li>&#x7532;</li>
 310         </ol>
 311     </div>
 312
 313     <div class="test">
 314         <h2>ethiopic</h2>
 315         <ol class="ethiopic" start="-1">
 316             <li>-1</li>
 317             <li>0</li>
 318             <li>&#x1200;</li>
 319         </ol>
 320     </div>
 321     <div class="test">
 322         <h2>ethiopic-halehame-gez</h2>
 323         <ol class="ethiopic-halehame-gez" start="-1">
 324             <li>-1</li>
 325             <li>0</li>
 326             <li>&#x1200;</li>
 327         </ol>
 328     </div>
 329
 330     <div class="test">
 331         <h2>ethiopic-abegede</h2>
 332         <ol class="ethiopic-abegede" start="-1">
 333             <li>-1</li>
 334             <li>0</li>
 335             <li>&#x12A0;</li>
 336         </ol>
 337     </div>
 338     <div class="test">
 339         <h2>ethiopic-abegede-gez</h2>
 340         <ol class="ethiopic-abegede-gez" start="-1">
 341             <li>-1</li>
 342             <li>0</li>
 343             <li>&#x12A0;</li>
 344         </ol>
 345     </div>
 346
 347     <div class="test">
 348         <h2>hangul-consonant</h2>
 349         <ol class="hangul-consonant" start="-1">
 350             <li>-1</li>
 351             <li>0</li>
 352             <li>&#x3131;</li>
 353         </ol>
 354     </div>
 355
 356     <div class="test">
 357         <h2>hangul</h2>
 358         <ol class="hangul" start="-1">
 359             <li>-1</li>
 360             <li>0</li>
 361             <li>&#xAC00;</li>
 362         </ol>
 363     </div>
 364
 365     <div class="test">
 366         <h2>hiragana-iroha</h2>
 367         <ol class="hiragana-iroha" start="-1">
 368             <li>-1</li>
 369             <li>0</li>
 370             <li>&#x3044;</li>
 371         </ol>
 372     </div>
 373
 374     <div class="test">
 375         <h2>hiragana</h2>
 376         <ol class="hiragana" start="-1">
 377             <li>-1</li>
 378             <li>0</li>
 379             <li>&#x3042;</li>
 380         </ol>
 381     </div>
 382
 383     <div class="test">
 384         <h2>katakana-iroha</h2>
 385         <ol class="katakana-iroha" start="-1">
 386             <li>-1</li>
 387             <li>0</li>
 388             <li>&#x30A4;</li>
 389         </ol>
 390     </div>
 391
 392     <div class="test">
 393         <h2>katakana</h2>
 394         <ol class="katakana" start="-1">
 395             <li>-1</li>
 396             <li>0</li>
 397             <li>&#x30A2;</li>
 398         </ol>
 399     </div>
 400
 401     <div class="test">
 402         <h2>lower-alpha</h2>
 403         <ol class="lower-alpha" start="-1">
 404             <li>-1</li>
 405             <li>0</li>
 406             <li>&#x0061;</li>
 407         </ol>
 408     </div>
 409     <div class="test">
 410         <h2>lower-latin</h2>
 411         <ol class="lower-latin" start="-1">
 412             <li>-1</li>
 413             <li>0</li>
 414             <li>&#x0061;</li>
 415         </ol>
 416     </div>
 417
 418     <div class="test">
 419         <h2>lower-greek</h2>
 420         <ol class="lower-greek" start="-1">
 421             <li>-1</li>
 422             <li>0</li>
 423             <li>&#x03B1;</li>
 424         </ol>
 425     </div>
 426
 427     <div class="test">
 428         <h2>lower-norwegian</h2>
 429         <ol class="lower-norwegian" start="-1">
 430             <li>-1</li>
 431             <li>0</li>
 432             <li>&#x0061;</li>
 433         </ol>
 434     </div>
 435
 436     <div class="test">
 437         <h2>oromo</h2>
 438         <ol class="oromo" start="-1">
 439             <li>-1</li>
 440             <li>0</li>
 441             <li>&#x1200;</li>
 442         </ol>
 443     </div>
 444     <div class="test">
 445         <h2>ethiopic-halehame-om-et</h2>
 446         <ol class="ethiopic-halehame-om-et" start="-1">
 447             <li>-1</li>
 448             <li>0</li>
 449             <li>&#x1200;</li>
 450         </ol>
 451     </div>
 452
 453     <div class="test">
 454         <h2>sidama</h2>
 455         <ol class="sidama" start="-1">
 456             <li>-1</li>
 457             <li>0</li>
 458             <li>&#x1200;</li>
 459         </ol>
 460     </div>
 461     <div class="test">
 462         <h2>ethiopic-halehame-sid-et</h2>
 463         <ol class="ethiopic-halehame-sid-et" start="-1">
 464             <li>-1</li>
 465             <li>0</li>
 466             <li>&#x1200;</li>
 467         </ol>
 468     </div>
 469
 470     <div class="test">
 471         <h2>somali</h2>
 472         <ol class="somali" start="-1">
 473             <li>-1</li>
 474             <li>0</li>
 475             <li>&#x1200;</li>
 476         </ol>
 477     </div>
 478     <div class="test">
 479         <h2>ethiopic-halehame-so-et</h2>
 480         <ol class="ethiopic-halehame-so-et" start="-1">
 481             <li>-1</li>
 482             <li>0</li>
 483             <li>&#x1200;</li>
 484         </ol>
 485     </div>
 486
 487     <div class="test">
 488         <h2>tigre</h2>
 489         <ol class="tigre" start="-1">
 490             <li>-1</li>
 491             <li>0</li>
 492             <li>&#x1200;</li>
 493         </ol>
 494     </div>
 495     <div class="test">
 496         <h2>ethiopic-halehame-tig</h2>
 497         <ol class="ethiopic-halehame-tig" start="-1">
 498             <li>-1</li>
 499             <li>0</li>
 500             <li>&#x1200;</li>
 501         </ol>
 502     </div>
 503
 504     <div class="test">
 505         <h2>tigrinya-er</h2>
 506         <ol class="tigrinya-er" start="-1">
 507             <li>-1</li>
 508             <li>0</li>
 509             <li>&#x1200;</li>
 510         </ol>
 511     </div>
 512     <div class="test">
 513         <h2>ethiopic-halehame-ti-er</h2>
 514         <ol class="ethiopic-halehame-ti-er" start="-1">
 515             <li>-1</li>
 516             <li>0</li>
 517             <li>&#x1200;</li>
 518         </ol>
 519     </div>
 520
 521     <div class="test">
 522         <h2>tigrinya-er-abegede</h2>
 523         <ol class="tigrinya-er-abegede" start="-1">
 524             <li>-1</li>
 525             <li>0</li>
 526             <li>&#x12A0;</li>
 527         </ol>
 528     </div>
 529     <div class="test">
 530         <h2>ethiopic-abegede-ti-er</h2>
 531         <ol class="ethiopic-abegede-ti-er" start="-1">
 532             <li>-1</li>
 533             <li>0</li>
 534             <li>&#x12A0;</li>
 535         </ol>
 536     </div>
 537
 538     <div class="test">
 539         <h2>tigrinya-et</h2>
 540         <ol class="tigrinya-et" start="-1">
 541             <li>-1</li>
 542             <li>0</li>
 543             <li>&#x1200;</li>
 544         </ol>
 545     </div>
 546     <div class="test">
 547         <h2>ethiopic-halehame-ti-et</h2>
 548         <ol class="ethiopic-halehame-ti-et" start="-1">
 549             <li>-1</li>
 550             <li>0</li>
 551             <li>&#x1200;</li>
 552         </ol>
 553     </div>
 554
 555     <div class="test">
 556         <h2>tigrinya-et-abegede</h2>
 557         <ol class="tigrinya-et-abegede" start="-1">
 558             <li>-1</li>
 559             <li>0</li>
 560             <li>&#x12A0;</li>
 561         </ol>
 562     </div>
 563     <div class="test">
 564         <h2>ethiopic-abegede-ti-et</h2>
 565         <ol class="ethiopic-abegede-ti-et" start="-1">
 566             <li>-1</li>
 567             <li>0</li>
 568             <li>&#x12A0;</li>
 569         </ol>
 570     </div>
 571
 572     <div class="test">
 573         <h2>upper-alpha</h2>
 574         <ol class="upper-alpha" start="-1">
 575             <li>-1</li>
 576             <li>0</li>
 577             <li>&#x0041;</li>
 578         </ol>
 579     </div>
 580     <div class="test">
 581         <h2>upper-latin</h2>
 582         <ol class="upper-latin" start="-1">
 583             <li>-1</li>
 584             <li>0</li>
 585             <li>&#x0041;</li>
 586         </ol>
 587     </div>
 588
 589     <div class="test">
 590         <h2>upper-greek</h2>
 591         <ol class="upper-greek" start="-1">
 592             <li>-1</li>
 593             <li>0</li>
 594             <li>&#x0391;</li>
 595         </ol>
 596     </div>
 597
 598     <div class="test">
 599         <h2>upper-norwegian</h2>
 600         <ol class="upper-norwegian" start="-1">
 601             <li>-1</li>
 602             <li>0</li>
 603             <li>&#x0041;</li>
 604         </ol>
 605     </div>
 606 </body>
 607 </html>