mirror of
https://github.com/servo/servo
synced 2026-04-28 10:27:40 +02:00
53 lines
2.2 KiB
HTML
53 lines
2.2 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 list items that have the "value" HTML attribute set</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" />
|
|
<!-- See also http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#attr-li-value -->
|
|
<meta content="" name="flags" />
|
|
<meta content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their correct numbering when some of the items have the value attribute set but others don't." name="assert" />
|
|
<link href="reference/extract-list-items-015-ref.xht" rel="match" />
|
|
<style>
|
|
ol, li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.extract {
|
|
flow-into: f;
|
|
}
|
|
.box {
|
|
float: left;
|
|
width: 20em;
|
|
height: 10em;
|
|
margin: 0 2em;
|
|
}
|
|
#container {
|
|
background-color: lightgray;
|
|
}
|
|
#region {
|
|
flow-from: f;
|
|
background-color: lightgreen;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>This test passes if you see two rectangles, each with a numbered list inside, as described below. The numbers for both of the lists should be rendered outside (to the left) of the respective rectangles.</p>
|
|
<p>The first rectangle should be lightgray and contain a numbered list with 5 items. The items should be numbered with 2, 3, 8, 10 and 11 respectively.</p>
|
|
<p>The second rectangle should be lightgreen and contain a numbered list with 4 items. The items should be numbered with 1, 6, 7 and 9 respectively.</p>
|
|
<div id="container" class="box">
|
|
<ol>
|
|
<li class="extract">List item 1</li>
|
|
<li>List item 2</li>
|
|
<li value="3">List item 3</li>
|
|
<li class="extract" value="6">List item 6</li>
|
|
<li class="extract">List item 7</li>
|
|
<li>List item 8</li>
|
|
<li class="extract">List item 9</li>
|
|
<li value="10">List item 10</li>
|
|
<li>List item 11</li>
|
|
</ol>
|
|
</div>
|
|
<div id="region" class="box"></div>
|
|
|
|
</body></html> |