layout: Implement basic lists and the CSS1 list properties.

The exact rendering is ill-spec'd. Some things are ugly (especially the
width and height of list style images) but they are infrequently used
and I believe this implementation matches the spec. Numeric lists are
not supported yet, since they will require a separate layout pass.

The implementation is a subclass of `BlockFlow`, on advice from Robert
O'Callahan.
This commit is contained in:
Patrick Walton 2014-12-09 12:12:50 -08:00
parent 7805fe19ed
commit 3029fbab92
14 changed files with 540 additions and 53 deletions

View file

@ -207,3 +207,5 @@ fragment=top != ../html/acid2.html acid2_ref.html
== box_shadow_spread_a.html box_shadow_spread_ref.html
== box_shadow_inset_a.html box_shadow_inset_ref.html
== box_shadow_inset_parsing_a.html box_shadow_inset_parsing_ref.html
!= list_style_type_a.html list_style_type_ref.html
== list_style_position_a.html list_style_position_ref.html

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<!--
Tests that `list-style-position: inside` and `list-style-image` work. This is deliberately
conservative because the exact placement of the marker is unspecified.
-->
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
}
li {
list-style-image: url(smiling.png);
list-style-position: inside;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<!--
Tests that `list-style-position: inside` and `list-style-image` work. This is deliberately
conservative because the exact placement of the marker is unspecified.
-->
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
}
li {
display: block;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li><img src=smiling.png></li>
<li><img src=smiling.png></li>
<li><img src=smiling.png></li>
</ul>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<!--
Tests that `list-style-type` does something. This is deliberately conservative because the
exact placement of the marker is unspecified.
-->
<html>
<head>
<style>
li {
list-style: square;
}
</style>
<body>
<ul>
<li>Cheetahmen</li>
</ul>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<!--
Tests that `list-style-type` does something. This is deliberately conservative because the
exact placement of the marker is unspecified.
-->
<html>
<head>
<body>
<ul>
<li>Cheetahmen</li>
</ul>
</body>
</html>

BIN
tests/ref/smiling.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB