mirror of
https://github.com/servo/servo.git
synced 2025-08-09 07:25:35 +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
2df4dd9e09
commit
f9cdd05d58
39 changed files with 1704 additions and 537 deletions
|
@ -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
|
||||
|
|
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>
|
||||
|
27
tests/ref/ol_japanese_iroha_a.html
Normal file
27
tests/ref/ol_japanese_iroha_a.html
Normal 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>
|
||||
|
||||
|
25
tests/ref/ol_japanese_iroha_bullet_styles.html
Normal file
25
tests/ref/ol_japanese_iroha_bullet_styles.html
Normal 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>い. 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", TakaoPGothic, 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