src/third_party/WebKit/LayoutTests/fast/regions/counters/extract-numbered-paragraphs-divs-002-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Reftest Reference</title>
   5         <link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
   6         <link rel="stylesheet" type="text/css" href="../resources/font-smoothing-disabler.css">
   7         <style>
   8         #region {
   9             counter-reset: p 0 d 0;
  10         }
  11         #region p,
  12         #region div {
  13             margin: 0;
  14         }
  15         #region p,
  16         #region div {
  17             counter-increment: p d;
  18         }
  19
  20         #region p::after,
  21         #region div::after {
  22             display: block;
  23             text-align: right;
  24             border-top: medium solid black;
  25             font-size: 200%;
  26         }
  27
  28         #region p::after {
  29             color: red;
  30             content: counter(p);
  31         }
  32         #region div::after {
  33             color: green;
  34             content: counter(d);
  35         }
  36
  37         #region {
  38             width: 20em;
  39             background-color: lightblue;
  40             border: 1px solid lightblue;
  41         }
  42         </style>
  43     </head>
  44     <body>
  45         <!-- Numbered <p>-s and <div>-s using different counters, displayed as blocks via ::after -->
  46         <p>Test passes if you see a light blue rectangle below, with eight lines of text in it. Each line of text should be black and with a thick underline. Below and to the right of each line of text you should see the number of that line, colored alternatingly red and green.</p>
  47         <div id="region">
  48             <p>This is numbered line of text no. 1</p>
  49             <div>This is numbered line of text no. 2</div>
  50             <p>This is numbered line of text no. 3</p>
  51             <div>This is numbered line of text no. 4</div>
  52             <p>This is numbered line of text no. 5</p>
  53             <div>This is numbered line of text no. 6</div>
  54             <p>This is numbered line of text no. 7</p>
  55             <div>This is numbered line of text no. 8</div>
  56         </div>
  57     </body>
  58 </html>