mirror of
https://github.com/servo/servo.git
synced 2025-07-10 00:43:39 +01:00
48 lines
No EOL
1.9 KiB
HTML
48 lines
No EOL
1.9 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 and div's that use a single CSS counter as content in ::before</title>
|
|
<link href="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 and divs with content that use counters behaves as without regions." name="assert" />
|
|
<link href="reference/extract-numbered-paragraphs-divs-001-ref.xht" rel="match" />
|
|
<style>
|
|
#container {
|
|
counter-reset: c 0;
|
|
}
|
|
#container p,
|
|
#container div {
|
|
flow-into: f1;
|
|
counter-increment: c;
|
|
margin: 1em 0;
|
|
}
|
|
#container p::before,
|
|
#container div::before {
|
|
content: "(" counter(c) ") ";
|
|
background: darkblue;
|
|
color: white;
|
|
}
|
|
#region {
|
|
background-color: lightblue;
|
|
border: 1px solid lightblue;
|
|
flow-from: f1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Numbered <p>-s and <div>-s using the same counter, displayed inline via ::before -->
|
|
<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>
|
|
<div id="container">
|
|
<p>This is numbered line of text no. 1</p>
|
|
<p>This is numbered line of text no. 2</p>
|
|
<div>This is numbered line of text no. 3</div>
|
|
<p>This is numbered line of text no. 4</p>
|
|
<div>This is numbered line of text no. 5</div>
|
|
<p>This is numbered line of text no. 6</p>
|
|
<div>This is numbered line of text no. 7</div>
|
|
<div>This is numbered line of text no. 8</div>
|
|
</div>
|
|
<div id="region"></div>
|
|
|
|
</body></html> |