mirror of
https://github.com/servo/servo
synced 2026-04-28 10:27:40 +02:00
48 lines
1.7 KiB
HTML
48 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<title>CSS Test: flow-into with different flows on list items from the same list</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 flow-into property can be applied to individual list items. This test checks that list items from the same list extracted in different named flows preserve their numbering." name="assert">
|
|
<link href="reference/extract-list-items-014-ref.htm" rel="match">
|
|
<style>
|
|
.extract1 {
|
|
flow-into: f1;
|
|
color: #006400;
|
|
}
|
|
.extract2 {
|
|
flow-into: f2;
|
|
color: blue;
|
|
}
|
|
.region {
|
|
margin-left: 2em;
|
|
float: left;
|
|
width: 15em;
|
|
height: 10em;
|
|
}
|
|
#r1 {
|
|
flow-from: f1;
|
|
background-color: lightgreen;
|
|
}
|
|
#r2 {
|
|
flow-from: f2;
|
|
background-color: lightblue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Test passes if you see two rectangles, one green and one blue, as follows. Each rectangle should contain a numbered list; the numbers should be rendered outside the rectangle. The items in the first list should be numbered 1, 2 and 5 respectively, while the items in the second list should be numbered 3, 4 and 6 respectively.</p>
|
|
<ol>
|
|
<li class="extract1">List item 1</li>
|
|
<li class="extract1">List item 2</li>
|
|
<li class="extract2">List item 3</li>
|
|
<li class="extract2">List item 4</li>
|
|
<li class="extract1">List item 5</li>
|
|
<li class="extract2">List item 6</li>
|
|
</ol>
|
|
<div id="r1" class="region"></div>
|
|
<div id="r2" class="region"></div>
|
|
|
|
</body></html> |