third_party/WebKit/LayoutTests/css2.1/t1204-order-01-d.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
   2 <html>
   3  <head>
   4   <title>CSS 2.1 Test Suite: Order of counters in out-of-flow content</title>
   5   <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#counters">
   6   <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-content">
   7   <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#counter">
   8   <style type="text/css">
   9
  10   ul { display: block; margin: 0; padding: 0; counter-reset: c; }
  11   li { counter-increment: c; }
  12   li, div { display: block; margin: 0; padding: 0;
  13             width: 3em; border: thin solid; }
  14   li:before, div:before { content: counter(c); }
  15
  16   #four { border: none; }
  17   #four:before { content: none; }
  18
  19   #two { float: left; }
  20   #three { position: relative; }
  21   #four { position: relative; }
  22   #four div { position: absolute; left: 8em; }
  23   #six { position: absolute; top: 5em; left: 12em; }
  24   #eight { position: fixed; top: 8em; left: 4em; }
  25
  26   </style>
  27  </head>
  28  <body>
  29
  30  <p>You should see nine boxes below, each just containing a unique
  31  multiple of eleven, from 11 to 99, and nothing else.</p>
  32
  33  <ul>
  34    <li id="one">1</li>
  35    <li id="two">2</li>
  36    <li id="three">3</li>
  37    <li id="four"><div>4</div></li>
  38    <li id="five">5</li>
  39    <li id="six">6</li>
  40    <li id="seven">7</li>
  41    <li id="eight">8</li>
  42    <li id="nine">9</li>
  43  </ul>
  44
  45  </body>
  46 </html>