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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on p's and div's that use a single CSS counter as content in ::before</title>
   5         <link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
   6         <link rel="help" href="http://www.w3.org/TR/css3-regions/#properties-and-rules" />
   7         <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" />
   8         <link rel="stylesheet" type="text/css" href="../resources/font-smoothing-disabler.css">
   9         <meta name="flags" content="">
  10         <meta name="assert" content="Test checks that extracting paragraphs and divs with content that use counters behaves as without regions.">
  11         <style>
  12         #container {
  13             counter-reset: c 0;
  14         }
  15         #container p,
  16         #container div {
  17             -webkit-flow-into: f1;
  18             counter-increment: c;
  19             margin: 1em 0;
  20         }
  21         #container p::before,
  22         #container div::before {
  23             content: "(" counter(c) ") ";
  24             background: darkblue;
  25             color: white;
  26         }
  27         #region {
  28             background-color: lightblue;
  29             border: 1px solid lightblue;
  30             -webkit-flow-from: f1;
  31         }
  32         </style>
  33     </head>
  34     <body>
  35         <!-- Numbered <p>-s and <div>-s using the same counter, displayed inline via ::before -->
  36         <p>Test passes if you see a light blue rectangle below, with eight lines of text in it. The text on each line should be black and preceded by the line number between parantheses. The line numbers should be white on a dark blue background.</p>
  37         <div id="container">
  38             <p>This is numbered line of text no. 1</p>
  39             <p>This is numbered line of text no. 2</p>
  40             <div>This is numbered line of text no. 3</div>
  41             <p>This is numbered line of text no. 4</p>
  42             <div>This is numbered line of text no. 5</div>
  43             <p>This is numbered line of text no. 6</p>
  44             <div>This is numbered line of text no. 7</div>
  45             <div>This is numbered line of text no. 8</div>
  46         </div>
  47         <div id="region"></div>
  48     </body>
  49 </html>