Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-tables/tentative/baseline-table.html - WPT Dashboard Interop Dashboard
<!doctype html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src="/resources/check-layout-th.js"></script>
<meta name="flags" content="ahem">
<title>TABLE baseline</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
<style>
main table {
display: inline-table;
border: 15px solid green;
background: gray;
width: 0px;
height: 0px;
vertical-align:baseline;
border-spacing: 0;
}
main td {
background: #BFB;
padding: 4px;
}
main td > div {
display: inline-block;
background: rgba(56,162,56,0.3);
}
.container {
position: relative;
outline: black dotted 1px;
height: 100px;
width: 400px;
font: 50px/1 Ahem; /* baseline is 40px */
}
</style>
<main>
<h2><TABLE> baseline tests</h2>
<p>Empty table's baseline is bottom of table's border box.</p>
<div class="container">
Xp<table data-offset-y="10">
</table>
</div>
<p>Empty body's baseline is bottom of table's border box.</p>
<div class="container">
Xp<table data-offset-y="10">
<tbody>
</tbody>
</table>
</div>
<p>Empty row's baseline is center of the row.</p>
<div class="container">
Xp<table data-offset-y="25">
<tbody>
<tr></tr>
</tbody>
</table>
</div>
<p>First row defines baseline even if empty.</p>
<div class="container">
Xp<table style="font: 12px fixed" data-offset-y="25">
<tbody>
<tr></tr>
<tr><td>1,0</td></tr>
</tbody>
</table>
</div>
<p>Cell's baseline defined row's baseline only if cell is vertical-align:baseline.</p>
<div class="container">
Xp<table style="font-size: 24px" data-offset-y="2">
<tbody>
<tr><td style="vertical-align:baseline">Xp</td></tr>
</tbody>
</table></div>
</div>
<div class="container">
Xp<table style="font-size:24px" data-offset-y="0">
<tbody>
<tr><td style="vertical-align:middle">Xp</td></tr>
</tbody>
</table>
</div>
<p>Table's vertical-align: top.</p>
<div class="container">
Xp<table style="vertical-align:top" data-offset-y="0"></table>
</div>
<p>Table's vertical-align: middle. </p>
<div class="container">
Xp<table style="vertical-align:middle" data-offset-y="5"></table>
</div>
<p>Table's vertical-align: bottom. </p>
<div class="container">
Xp<table style="vertical-align:bottom" data-offset-y="20"></table>
</div>
<p>Table's top/middle/bottom combined. </p>
<div class="container">
Xp<table style="vertical-align:top" data-offset-y="0"></table>
<table style="vertical-align:middle" data-offset-y="5"></table>
<table style="vertical-align:bottom" data-offset-y="20"></table>
</div>
<p>Two rows empty, 1st row has css height.</p>
<div class="container">
Xp<table data-offset-y=25 data-expected-height=50>
<tr style="height:20px"></tr>
<tr></tr>
</table>
</div>
<p>First row empty with css height, 2 row has content, </p>
<div class="container">
Xp<table data-offset-y=25 data-expected-height=68>
<tr style="height:20px"></tr>
<tr><td style="font-size:10px">X</td></tr>
</table>
</div>
<p>Empty rowspanned cells should not set baseline. This test might not be per-spec, distribution of empty cells over empty rows differs between browsers.</p>
<div class="container">
Xp<table>
<tr>
<td rowspan=2 style="height:80px"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table><div style="display:inline-block" data-offset-y=15>pX</div>
</div>
<p>Block level table inside inline block does not produce a baseline.</p>
<div class="container" style="font: 10px/1 Ahem;width:500px">
Xp<br>Xp<table
title="inline table produces a baseline"
data-offset-y=33><td style="vertical-align:baseline">Xp</td></table>
<div style="display:inline-block;height:50px;background:yellow;width:50px;"
title="empty inline block baseline is bottom of the block"
data-offset-y=10
></div>
<div style="display:inline-block;height:50px;background:yellow;width:50px;"
title="inline block's content defines its baseline"
data-offset-y=52
>X</div>
<div style="display:inline-block;height:50px;background:yellow"
title="table inside inline block does not produce a baseline"
data-offset-y=10
><table style="display:table"><td style="vertical-align:baseline">X</td></table></div>
<div style="display:inline-block;height:50px;background:yellow"
title="but inline table inside inline block does produce a baseline"
data-offset-y=33
><table style="display:inline-table"><td style="vertical-align:baseline">X</td></table></div>
</div>
<!-- anonymous-table-no-baseline-align replica -->
<p>Anonymous tables should not generate baselines</p>
<div class="container">Xp
<div style="height:60px;width:100px;display:inline-block;background:green"
data-offset-y=0>
<div style="display:table-cell;vertical-align:middle;color:yellow"> </div>
</div>
<div style="height:60px;width:100px;display:inline-block;background:green"
data-offset-y=0>
<div style="display:table-cell;vertical-align:middle;color:yellow">> <br> <br></div>
</div>
</div>
</main>
<script>
checkLayout(".container");
</script>