LayoutTests/fast/lists/w3-css3-list-styles-symbolic.html

   1 <html>
   2 <head>
   3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4     <style>
   5         .test ol { padding-left: 300px; }
   6
   7         /*
   8         The following styles are ordered as they appear in section 4.5. of the
   9         Draft 7 November 2002 draft of the CSS3 Lists module <http://www.w3.org/TR/css3-lists/#symbolic>.
  10         */
  11
  12         ol.asterisks { list-style-type: asterisks; }
  13
  14         ol.footnotes { list-style-type: footnotes; }
  15     </style>
  16     <script src="resources/dump-list.js"></script>
  17     <script>
  18         function runTest()
  19         {
  20             if (!window.layoutTestController)
  21                 return;
  22
  23             layoutTestController.dumpAsText();
  24             filterListsWithReplacement(document.querySelectorAll(".test ol"), testListItemMarkerEqualsListItemText);
  25             document.body.removeChild(document.getElementById("description")); // Remove description when running in DRT.
  26         }
  27         window.onload = runTest;
  28     </script>
  29 </head>
  30 <body>
  31     <h1>CSS3 Symbolic list-style-type</h1>
  32     <p id="description">This tests that all of the symbolic CSS3 list-style-types are supported as per <a href="http://www.w3.org/TR/css3-lists/#symbolic">section 4.5 of the spec. CSS3 Lists module</a> (Draft 7 November 2002). This test PASSED if the list item matches its bullet for every list item (below). For example, for the asterisks symbolic system the second &lt;li&gt; (which corresponds to 2 in the standard ordering of the positive integers) should be rendered as: &#x002A;&#x002A; &#x002A;&#x002A;</p>
  33     <div class="test">
  34         <h2>asterisks</h2>
  35         <ol class="asterisks">
  36             <li>&#x002A;</li>
  37             <li>&#x002A;&#x002A;</li>
  38             <li>&#x002A;&#x002A;&#x002A;</li>
  39             <li>&#x002A;&#x002A;&#x002A;&#x002A;</li>
  40             <li>&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;</li>
  41             <li>&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;</li>
  42             <li>&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;</li>
  43             <li>&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;</li>
  44             <li>&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;</li>
  45             <li>&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;&#x002A;</li>
  46         </ol>
  47         <ol class="asterisks" start="0">
  48             <li>0</li>
  49         </ol>
  50         <ol class="asterisks" start="-2">
  51             <li>-2</li>
  52             <li>-1</li>
  53         </ol>
  54     </div>
  55
  56     <div class="test">
  57         <h2>footnotes</h2>
  58         <ol class="footnotes">
  59             <li>&#x002A;</li>
  60             <li>&#x2051;</li>
  61             <li>&#x2020;</li>
  62             <li>&#x2021;</li>
  63             <li>&#x002A;&#x002A;</li>
  64             <li>&#x2051;&#x2051;</li>
  65             <li>&#x2020;&#x2020;</li>
  66             <li>&#x2021;&#x2021;</li>
  67             <li>&#x002A;&#x002A;&#x002A;</li>
  68             <li>&#x2051;&#x2051;&#x2051;</li>
  69             <li>&#x2020;&#x2020;&#x2020;</li>
  70             <li>&#x2021;&#x2021;&#x2021;</li>
  71             <li>&#x002A;&#x002A;&#x002A;&#x002A;</li>
  72             <li>&#x2051;&#x2051;&#x2051;&#x2051;</li>
  73         </ol>
  74         <ol class="footnotes" start="0">
  75             <li>0</li>
  76         </ol>
  77         <ol class="footnotes" start="-2">
  78             <li>-2</li>
  79             <li>-1</li>
  80         </ol>
  81     </div>
  82 </body>
  83 </html>