mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
layout: Implement caption-side
per CSS 2.1 § 17.4.1.
`caption-side` is used by 4% of pages by number of loads.
This commit is contained in:
parent
636641f905
commit
a3f6f4e75b
7 changed files with 144 additions and 15 deletions
|
@ -216,3 +216,5 @@ fragment=top != ../html/acid2.html acid2_ref.html
|
|||
== inset.html inset_ref.html
|
||||
== outset.html outset_ref.html
|
||||
== empty_cells_a.html empty_cells_ref.html
|
||||
== table_caption_top_a.html table_caption_top_ref.html
|
||||
== table_caption_bottom_a.html table_caption_bottom_ref.html
|
||||
|
|
28
tests/ref/table_caption_bottom_a.html
Normal file
28
tests/ref/table_caption_bottom_a.html
Normal file
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Tests that `caption-side` places the caption on the right side. -->
|
||||
<style>
|
||||
caption {
|
||||
background-color: blue;
|
||||
color: white;
|
||||
caption-side: bottom;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
width: 500px;
|
||||
}
|
||||
table {
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table border=0 cellspacing=0 cellpadding=0>
|
||||
<tr><td>Kitten</td><td>Kätzchen</td><td>Chaton</td><td>Koneko</td></tr>
|
||||
<tr><td>Cat</td><td>Katze</td><td>Chat</td><td>Neko</td></tr>
|
||||
<caption>Vocabulary</caption>
|
||||
<tr><td>Dog</td><td>Hund</td><td>Chien</td><td>Inu</td></tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
27
tests/ref/table_caption_bottom_ref.html
Normal file
27
tests/ref/table_caption_bottom_ref.html
Normal file
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Tests that `caption-side` places the caption on the right side. -->
|
||||
<style>
|
||||
section {
|
||||
background-color: blue;
|
||||
color: white;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
width: 500px;
|
||||
}
|
||||
table {
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table border=0 cellspacing=0 cellpadding=0>
|
||||
<tr><td>Kitten</td><td>Kätzchen</td><td>Chaton</td><td>Koneko</td></tr>
|
||||
<tr><td>Cat</td><td>Katze</td><td>Chat</td><td>Neko</td></tr>
|
||||
<tr><td>Dog</td><td>Hund</td><td>Chien</td><td>Inu</td></tr>
|
||||
</table>
|
||||
<section>Vocabulary</section>
|
||||
</body>
|
||||
</html>
|
||||
|
28
tests/ref/table_caption_top_a.html
Normal file
28
tests/ref/table_caption_top_a.html
Normal file
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Tests that `caption-side` places the caption on the right side. -->
|
||||
<style>
|
||||
caption {
|
||||
background-color: blue;
|
||||
color: white;
|
||||
caption-side: top;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
width: 500px;
|
||||
}
|
||||
table {
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table border=0 cellspacing=0 cellpadding=0>
|
||||
<tr><td>Kitten</td><td>Kätzchen</td><td>Chaton</td><td>Koneko</td></tr>
|
||||
<caption>Vocabulary</caption>
|
||||
<tr><td>Cat</td><td>Katze</td><td>Chat</td><td>Neko</td></tr>
|
||||
<tr><td>Dog</td><td>Hund</td><td>Chien</td><td>Inu</td></tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
27
tests/ref/table_caption_top_ref.html
Normal file
27
tests/ref/table_caption_top_ref.html
Normal file
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Tests that `caption-side` places the caption on the right side. -->
|
||||
<style>
|
||||
section {
|
||||
background-color: blue;
|
||||
color: white;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
width: 500px;
|
||||
}
|
||||
table {
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section>Vocabulary</section>
|
||||
<table border=0 cellspacing=0 cellpadding=0>
|
||||
<tr><td>Kitten</td><td>Kätzchen</td><td>Chaton</td><td>Koneko</td></tr>
|
||||
<tr><td>Cat</td><td>Katze</td><td>Chat</td><td>Neko</td></tr>
|
||||
<tr><td>Dog</td><td>Hund</td><td>Chien</td><td>Inu</td></tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue