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:
Patrick Walton 2014-12-16 22:29:10 -08:00
parent 636641f905
commit a3f6f4e75b
7 changed files with 144 additions and 15 deletions

View file

@ -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

View 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>

View 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>

View 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>

View 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>