layout: Implement ordered lists, CSS counters, and quotes per CSS 2.1

§ 12.3-12.5.

Only simple alphabetic and numeric counter styles are supported. (This
is most of them though.)

Although this PR adds a sequential pass to layout, I verified that on
pages that contain a reasonable number of ordered lists (Reddit
`/r/rust`), the time spent in generated content resolution is dwarfed by
the time spent in the parallelizable parts of layout. So I don't expect
this to negatively affect our parallelism expect perhaps in pathological
cases.
This commit is contained in:
Patrick Walton 2015-03-05 12:37:37 -08:00
parent 2df4dd9e09
commit f9cdd05d58
39 changed files with 1704 additions and 537 deletions

View file

@ -65,6 +65,8 @@ flaky_cpu == append_style_a.html append_style_b.html
== case-insensitive-font-family.html case-insensitive-font-family-ref.html
== clear_generated_content_table_a.html clear_generated_content_table_ref.html
== clip_a.html clip_ref.html
== counters_nested_a.html counters_nested_ref.html
== counters_simple_a.html counters_simple_ref.html
== data_img_a.html data_img_b.html
== empty_cells_a.html empty_cells_ref.html
== filter_opacity_a.html filter_opacity_ref.html
@ -177,6 +179,9 @@ flaky_cpu == linebreak_simple_a.html linebreak_simple_b.html
== nth_last_of_type_pseudo_a.html nth_last_of_type_pseudo_b.html
== nth_of_type_pseudo_a.html nth_of_type_pseudo_b.html
== object_element_a.html object_element_b.html
== ol_japanese_iroha_a.html ol_japanese_iroha_ref.html
!= ol_japanese_iroha_bullet_styles.html ol_japanese_iroha_ref.html
== ol_simple_a.html ol_simple_ref.html
== only_child_pseudo_a.html only_child_pseudo_b.html
== only_of_type_pseudo_a.html only_of_type_pseudo_b.html
== opacity_simple_a.html opacity_simple_ref.html
@ -220,6 +225,7 @@ experimental != overconstrained_block.html overconstrained_block_ref.html
== pre_ignorable_whitespace_a.html pre_ignorable_whitespace_ref.html
== pseudo_element_a.html pseudo_element_b.html
== pseudo_inherit.html pseudo_inherit_ref.html
== quotes_simple_a.html quotes_simple_ref.html
== root_height_a.html root_height_b.html
== root_margin_collapse_a.html root_margin_collapse_b.html
== root_pseudo_a.html root_pseudo_b.html

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `counters` works with nested counters. -->
<style>
section {
counter-reset: section 0;
}
h1, h2, h3 {
counter-increment: section 1;
font-size: 24px;
}
h1:before, h2:before, h3:before {
content: counters(section, ".") ". ";
}
</style>
</head>
<body>
<section>
<h1>Foo</h1>
<section>
<h2>Boo</h2>
<h2>Quux</h2>
<section>
<h3>Blah</h3>
</section>
</section>
<h1>Bar</h1>
<section></section>
<h2>Boo</h2>
<h2>Quux</h2>
<h1>Baz</h1>
</section>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `counters` works with nested counters. -->
<style>
h1, h2, h3 {
font-size: 24px;
}
</style>
</head>
<body>
<section>
<h1>1. Foo</h1>
<section>
<h2>1.1. Boo</h2>
<h2>1.2. Quux</h2>
<section>
<h3>1.2.1. Blah</h3>
</section>
</section>
<h1>1.3. Bar</h1>
<section></section>
<h2>1.1. Boo</h2>
<h2>1.2. Quux</h2>
<h1>1.3. Baz</h1>
</section>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `counter` works. -->
<style>
h1, h2, h3 {
font-size: 24px;
}
h1 {
counter-increment: section 1;
counter-reset: subsection 0;
}
h1:before {
content: counter(section) ". ";
}
h2 {
counter-increment: subsection 1;
counter-reset: subsubsection 0;
}
h2:before {
content: counter(section) "." counter(subsection) ". ";
}
h3 {
counter-increment: subsubsection;
}
h3:before {
content: counter(section) "." counter(subsection) "." counter(subsubsection) ". ";
}
</style>
</head>
<body>
<h1>Foo</h1>
<h2>Boo</h2>
<h2>Quux</h2>
<h3>Blah</h3>
<h1>Bar</h1>
<h2>Boo</h2>
<h2>Quux</h2>
<h1>Baz</h1>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `counter` works. -->
<style>
h1, h2, h3 {
font-size: 24px;
}
</style>
</head>
<body>
<h1>1. Foo</h1>
<h2>1.1. Boo</h2>
<h2>1.2. Quux</h2>
<h3>1.2.1. Blah</h3>
<h1>2. Bar</h1>
<h2>2.1. Boo</h2>
<h2>2.2. Quux</h2>
<h1>3. Baz</h1>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that Japanese iroha ordering works in list items. -->
<style>
body {
font-family: "Hiragino Maru Gothic Pro", TakaoPGothic, sans-serif;
}
ol {
list-style-position: inside;
list-style-type: hiragana-iroha;
}
li {
}
</style>
</head>
<body>
<ol>
<li>Gryffindor</li>
<li>Hufflepuff</li>
<li>Ravenclaw</li>
<li>Slytherin</li>
</ol>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<!-- Ensures that U+3044, U+308D, U+306F, and U+306B are all supported in the current font. -->
<style>
body {
font-family: "Hiragino Maru Gothic Pro", TakaoPGothic, sans-serif;
}
ol {
list-style-position: inside;
list-style-type: none;
}
</style>
</head>
<body>
<ol>
<li>&#x3044;. Gryffindor</li>
<li>&#x3044;. Hufflepuff</li>
<li>&#x3044;. Ravenclaw</li>
<li>&#x3044;. Slytherin</li>
</ol>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that Japanese iroha ordering works in list items.
FIXME(pcwalton): This shouldn't have a "." after the kana. -->
<style>
body {
font-family: "Hiragino Maru Gothic Pro", TakaoPGothic, sans-serif;
}
ol {
list-style-position: inside;
list-style-type: none;
}
</style>
</head>
<body>
<ol>
<li>&#x3044;. Gryffindor</li>
<li>&#x308d;. Hufflepuff</li>
<li>&#x306f;. Ravenclaw</li>
<li>&#x306b;. Slytherin</li>
</ol>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style-type: decimal;
list-style-position: inside;
}
</style>
</head>
<body>
<ol>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ol>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style-type: none;
list-style-position: inside;
}
</style>
</head>
<body>
<ol>
<li>1. Foo</li>
<li>2. Bar</li>
<li>3. Baz</li>
</ol>
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that the initial value of `quotes` works. -->
</head>
<body>
I remember when I first read <q>Hagrid said, <q>You're a wizard, Harry!</q></q>
</body>
</html>

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that the initial value of `quotes` works. -->
</head>
<body>
I remember when I first read &#x201c;Hagrid said, &#x2018;You're a wizard, Harry!&#x2019;&#x201d;
</body>
</html>