| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test: flow-into on p's and div's that use different CSS counters as content in ::after</title> |
| <link rel="author" title="Mihai Balan" href="mibalan@adobe.com"> |
| <link rel="help" href="http://www.w3.org/TR/css3-regions/#properties-and-rules" /> |
| <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" /> |
| <meta name="flags" content=""> |
| <meta name="assert" content="Test checks that extracting paragraphs and divs with content that use counters behaves as without regions."> |
| <style> |
| #container { |
| counter-reset: p 0 d 0; |
| } |
| #container p, |
| #container div { |
| -webkit-flow-into: f1; |
| margin: 0; |
| } |
| #container p, |
| #container div { |
| counter-increment: p d; |
| } |
| |
| #container p::after, |
| #container div::after { |
| display: block; |
| text-align: right; |
| border-top: medium solid black; |
| font-size: 200%; |
| } |
| |
| #container p::after { |
| color: red; |
| content: counter(p); |
| } |
| #container div::after { |
| color: green; |
| content: counter(d); |
| } |
| |
| #region { |
| width: 20em; |
| background-color: lightblue; |
| border: 1px solid lightblue; |
| -webkit-flow-from: f1; |
| } |
| </style> |
| </head> |
| <body> |
| <!-- Numbered <p>-s and <div>-s using different counters, displayed as blocks via ::after --> |
| <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> |
| <div id="container"> |
| <p>This is numbered line of text no. 1</p> |
| <div>This is numbered line of text no. 2</div> |
| <p>This is numbered line of text no. 3</p> |
| <div>This is numbered line of text no. 4</div> |
| <p>This is numbered line of text no. 5</p> |
| <div>This is numbered line of text no. 6</div> |
| <p>This is numbered line of text no. 7</p> |
| <div>This is numbered line of text no. 8</div> |
| </div> |
| <div id="region"></div> |
| </body> |
| </html> |
