servo/tests/wpt/css-tests/css-regions-1_dev/xhtml1/extract-numbered-paragraphs.xht
Ms2ger 296fa2512b Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
2017-02-06 22:38:29 +01:00

44 lines
No EOL
1.7 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: flow-into on p's that use a CSS counter as content in ::before</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<link href="http://www.w3.org/TR/css3-regions/#properties" rel="help" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" />
<meta content="" name="flags" />
<meta content="Test checks that extracting paragraphs with content that use counters behaves as without regions." name="assert" />
<link href="reference/extract-numbered-paragraphs-ref.xht" rel="match" />
<style>
#container {
counter-reset: para 0;
}
#container p {
flow-into: f1;
counter-increment: para;
margin: 1em 0;
}
#container p::before {
content: "(" counter(para) ") ";
background: darkblue;
color: white;
}
#region {
background-color: lightblue;
border: 1px solid lightblue;
flow-from: f1;
}
</style>
</head>
<body>
<!-- Numbered <p>-s using a single counter, displayed inline via ::before -->
<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>
<div id="container">
<p>This is numbered paragraph no. 1</p>
<p>This is numbered paragraph no. 2</p>
<p>This is numbered paragraph no. 3</p>
<p>This is numbered paragraph no. 4</p>
<p>This is numbered paragraph no. 5</p>
</div>
<div id="region"></div>
</body></html>