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-01-02 17:40:54 -05:00 committed by Simon Sapin
parent 417a932e30
commit 30fd28d107
36 changed files with 1734 additions and 495 deletions

View file

@ -172,6 +172,11 @@ fragment=top != ../html/acid2.html acid2_ref.html
== block_formatting_context_containing_floats_a.html block_formatting_context_containing_floats_ref.html
== clear_generated_content_table_a.html clear_generated_content_table_ref.html
== inline_block_border_a.html inline_block_border_ref.html
== counters_simple_a.html counters_simple_ref.html
== counters_nested_a.html counters_nested_ref.html
== quotes_simple_a.html quotes_simple_ref.html
== ol_simple_a.html ol_simple_ref.html
== ol_japanese_iroha_a.html ol_japanese_iroha_ref.html
== vertical_align_top_a.html vertical_align_top_ref.html
== vertical_align_bottom_a.html vertical_align_bottom_ref.html
== vertical_align_top_span_a.html vertical_align_top_span_ref.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,25 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that Japanese iroha ordering works in list items. -->
<style>
body {
font-family: "Hiragino Maru Gothic Pro", sans-serif;
}
ol {
list-style-position: inside;
list-style-type: hiragana-iroha;
}
</style>
</head>
<body>
<ol>
<li>Gryffindor</li>
<li>Hufflepuff</li>
<li>Ravenclaw</li>
<li>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", 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>