mirror of
https://github.com/servo/servo
synced 2026-04-28 10:27:40 +02:00
66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<title>CSS Test: flow-into on individual list items preserves other list styling properties (list-style-*) even when CSS styling contradicts default CSS styling for those HTML elements</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 list styling properties are honored even for list items extracted in named flows when the CSS-specified list type is in opposition with the list type from the markup (ol/ul)." name="assert">
|
|
<link href="reference/extract-list-items-009-ref.htm" rel="match">
|
|
<style>
|
|
ul, ol {
|
|
margin: 0;
|
|
}
|
|
.ordered {
|
|
list-style-type: lower-latin;
|
|
}
|
|
.unordered {
|
|
list-style-type: circle;
|
|
}
|
|
.extract {
|
|
color: blue;
|
|
flow-into: f1;
|
|
}
|
|
.container {
|
|
color: #006400;
|
|
background-color: lightgreen;
|
|
margin: 2em;
|
|
float: left;
|
|
width: 15em;
|
|
}
|
|
.region {
|
|
margin: 2em;
|
|
background-color: lightblue;
|
|
float: left;
|
|
width: 15em;
|
|
}
|
|
#r1 {
|
|
flow-from: f1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Test passes if you see two rectangles, one green and one blue, as described below.</p>
|
|
<p>The green rectangle should contain a list with items numbered/marked as such: the <strong>first two items</strong> should be numbered with small latin letters, starting with d. The <strong>next three items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>inside</em> the green rectangle.</p>
|
|
<p>The blue rectangle should contain a list with items numbered/marked as such: the <strong>first three items</strong> should be numbered with small latin letters, starting with a. The <strong>next two items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>outside</em> the blue rectangle.</p>
|
|
|
|
<div class="container">
|
|
<ul class="ordered">
|
|
<li class="extract">Ordered list, item a</li>
|
|
<li class="extract">Ordered list, item b</li>
|
|
<li class="extract">Ordered list, item c</li>
|
|
<li>Ordered list, item d</li>
|
|
<li>Ordered list, item e</li>
|
|
</ul>
|
|
<ol class="unordered">
|
|
<li>Unordered list, item 1</li>
|
|
<li>Unordered list, item 2</li>
|
|
<li>Unordered list, item 3</li>
|
|
<li class="extract">Unordered list, item 4</li>
|
|
<li class="extract">Unordered list, item 5</li>
|
|
</ol>
|
|
</div>
|
|
<div id="r1" class="region"></div>
|
|
|
|
|
|
</body></html> |