mirror of
https://github.com/servo/servo
synced 2026-04-28 10:27:40 +02:00
68 lines
2.6 KiB
HTML
68 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html><head>
|
||
<title>CSS Test: flow-into on all list items from a nested 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="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers or numbering (type, value), even when extracting items from multiple and nested lists into the same named flow." name="assert">
|
||
<link href="reference/extract-list-items-006-ref.htm" rel="match">
|
||
<style>
|
||
.outer-mixed-2 ul,
|
||
.outer-mixed-2 ol {
|
||
color: blue;
|
||
}
|
||
.outer-mixed-2 ol ul {
|
||
color: green;
|
||
}
|
||
.outer-mixed-2 ol ul ol {
|
||
color: red;
|
||
}
|
||
|
||
.outer-mixed-2 li{
|
||
flow-into: f2;
|
||
}
|
||
#r2 {
|
||
flow-from: f2;
|
||
}
|
||
|
||
.region {
|
||
margin: 2em;
|
||
background-color: lightgray;
|
||
width: 20em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<p>This test passes if there is a gray rectangle with a list in it, as described below. The list markers and numbers for the lists should be rendered outside of the gray rectangle.</p>
|
||
<p>The rectangle should contain a black, bulleted list. This list should contain a blue numbered list after the second item. The numbering on the blue list should start at 1. The blue list should contain a green, bulleted list after its second item. The green bulleted list should contain a red, numbered list after its second item. The numbering on the red list should start at 1, too.<br>
|
||
The green list should use different bullets than the black list.<br>
|
||
None of the list items should be indented – as such, they should render as a plain list, with varying types of bullets and numberings. The sequence of the colors should be, from top to bottom: black, blue, green, red, blue, black.</p>
|
||
|
||
<ul class="outer-mixed-2">
|
||
<li>Outer unordered list, item 1</li>
|
||
<li>Outer unordered list, item 2
|
||
<ol>
|
||
<li>Inner ordered list, item 1</li>
|
||
<li>Inner ordered list, item 2
|
||
<ul>
|
||
<li>Inner unordered list, item 1</li>
|
||
<li>Inner unordered list, item 2
|
||
<ol>
|
||
<li>Innermost ordered list, item 1</li>
|
||
<li>Innermost ordered list, item 2</li>
|
||
<li>Innermost ordered list, item 3</li>
|
||
</ol>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>Inner ordered list, item 3</li>
|
||
<li>Inner ordered list, item 4</li>
|
||
</ol>
|
||
</li>
|
||
<li>Outer unordered list, item 3</li>
|
||
</ul>
|
||
<div id="r2" class="region"></div>
|
||
|
||
|
||
</body></html> |