mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
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:
parent
417a932e30
commit
30fd28d107
36 changed files with 1734 additions and 495 deletions
|
@ -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
|
||||
|
|
36
tests/ref/counters_nested_a.html
Normal file
36
tests/ref/counters_nested_a.html
Normal 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>
|
||||
|
29
tests/ref/counters_nested_ref.html
Normal file
29
tests/ref/counters_nested_ref.html
Normal 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>
|
||||
|
42
tests/ref/counters_simple_a.html
Normal file
42
tests/ref/counters_simple_a.html
Normal 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>
|
||||
|
22
tests/ref/counters_simple_ref.html
Normal file
22
tests/ref/counters_simple_ref.html
Normal 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>
|
||||
|
25
tests/ref/ol_japanese_iroha_a.html
Normal file
25
tests/ref/ol_japanese_iroha_a.html
Normal 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>
|
||||
|
||||
|
27
tests/ref/ol_japanese_iroha_ref.html
Normal file
27
tests/ref/ol_japanese_iroha_ref.html
Normal 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>い. Gryffindor</li>
|
||||
<li>ろ. Hufflepuff</li>
|
||||
<li>は. Ravenclaw</li>
|
||||
<li>に. Slytherin</li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
19
tests/ref/ol_simple_a.html
Normal file
19
tests/ref/ol_simple_a.html
Normal 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>
|
||||
|
19
tests/ref/ol_simple_ref.html
Normal file
19
tests/ref/ol_simple_ref.html
Normal 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>
|
||||
|
10
tests/ref/quotes_simple_a.html
Normal file
10
tests/ref/quotes_simple_a.html
Normal 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>
|
||||
|
11
tests/ref/quotes_simple_ref.html
Normal file
11
tests/ref/quotes_simple_ref.html
Normal 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 “Hagrid said, ‘You're a wizard, Harry!’”
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue