| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test: flow-into on inline elements (span's) that use a CSS counter as content for ::before</title> |
| <link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com"> |
| <link rel="help" href="http://www.w3.org/TR/css3-regions/#properties" /> |
| <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 multiple elements into named flows but flowing only some of them into regions still preserves proper numbering via counters."> |
| <link rel="match" href="reference/extract-numbered-spans-display-only-some-ref.html"> |
| <style> |
| span:nth-of-type(odd) { |
| flow-into: odd; |
| } |
| span:nth-of-type(even) { |
| flow-into: even; |
| } |
| #container { |
| counter-reset: spans 0; |
| } |
| span { |
| counter-increment: spans; |
| } |
| span::before { |
| display: inline-block; |
| content: counter(spans) "."; |
| width: 2em; |
| margin: 0 .5em; |
| background: green; |
| color: white; |
| text-align: center; |
| } |
| |
| #region { |
| background-color: lightblue; |
| flow-from: even; |
| } |
| </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 three blocks of black text on a single line. Each block of text should be numbered from 1 to 3 and contain the text “Visible text <em>n</em>” with <em>n</em> ranging from 1 to 3. The numbering should be white on a green background.</p> |
| <div id="container"> |
| <span>Hidden bit of text 1</span> |
| <span>Visible text 1</span> |
| <span>Hidden bit of text 2</span> |
| <span>Visible text 2</span> |
| <span>Hidden bit of text 3</span> |
| <span>Visible text 3</span> |
| </div> |
| <div id="region"></div> |
| </body> |
| </html> |
