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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on p's that use a 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 with content that use counters behaves as without regions.">
  11         <style>
  12         #container {
  13             counter-reset: para 0;
  14         }
  15         #container p {
  16             -webkit-flow-into: f1;
  17             counter-increment: para;
  18             margin: 1em 0;
  19         }
  20         #container p::before {
  21             content: "(" counter(para) ") ";
  22             background: darkblue;
  23             color: white;
  24         }
  25         #region {
  26             background-color: lightblue;
  27             border: 1px solid lightblue;
  28             -webkit-flow-from: f1;
  29         }
  30         </style>
  31     </head>
  32     <body>
  33         <!-- Numbered <p>-s using a single counter, displayed inline via ::before -->
  34         <p>Test passes if you see a light blue rectangle below, with five lines of text in it. Each line of text should be black and preceded by the line number between parantheses. The line numbers should be white on a dark blue background.</p>
  35         <div id="container">
  36             <p>This is numbered paragraph no. 1</p>
  37             <p>This is numbered paragraph no. 2</p>
  38             <p>This is numbered paragraph no. 3</p>
  39             <p>This is numbered paragraph no. 4</p>
  40             <p>This is numbered paragraph no. 5</p>
  41         </div>
  42         <div id="region"></div>
  43     </body>
  44 </html>