| <!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="[email protected]" /> |
| <link rel="help" href="https://drafts.csswg.org/css-tables-3/" /> |
| <link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" /> |
| <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> |
| document.fonts.ready.then(() => checkLayout(".container")); |
| </script> |
