baseline-td.html (5491B)
1 <!doctype html> 2 <script src='/resources/testharness.js'></script> 3 <script src='/resources/testharnessreport.js'></script> 4 <script src="/resources/check-layout-th.js"></script> 5 <meta name="flags" content="ahem"> 6 <title>TD baseline</title> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> 9 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 10 <link rel="help" href="https://drafts.csswg.org/css-tables-3/" /> 11 <link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" /> 12 <style> 13 table { 14 background: #AAA; 15 border-spacing: 8px 0px; 16 } 17 td { 18 padding: 0; 19 background: #BFB; 20 } 21 .ahem { 22 font: 25px/2 Ahem; 23 } 24 .ahem td, .ahem .display-cell { 25 font: 25px/2 Ahem; 26 color: rgba(0,120,0, 0.5); 27 } 28 .vgrad { 29 background: linear-gradient(180deg, #DDD 0%, #DDD 60%, #999 60%, #999 100%) !important; 30 } 31 .m { 32 display:inline-block; 33 } 34 .display-table { 35 display:table; 36 background: #AAA; 37 border-spacing: 8px 0px; 38 } 39 .display-cell { 40 display:table-cell; 41 padding: 0; 42 } 43 </style> 44 <main> 45 <h2><TD> baseline tests</h2> 46 47 <p class="testdesc">All the baseline values. 48 Many text values map to plain baseline. </p> 49 <table style="height:100px" class="ahem vgrad"> 50 <td style="font: 75px/1 Ahem;vertical-align:baseline;"><div class="m" data-offset-y=0>Xp</div></td> 51 <td style="" title="default"><div class="m" data-offset-y=25>Xp</div></td> 52 <td style="vertical-align: top"><div class="m" data-offset-y=0>Xp</div></td> 53 <td style="vertical-align: middle"><div class="m" data-offset-y=25>Xp</div></td> 54 <td style="vertical-align: bottom"><div class="m" data-offset-y=50>Xp</div></td> 55 <td style="vertical-align: baseline"><div class="m" data-offset-y=28>Xp</div></td> 56 <td style="vertical-align: sub"><div class="m" data-offset-y=28>Xp</div></td> 57 <td style="vertical-align: super"><div class="m" data-offset-y=28>Xp</div></td> 58 <td style="vertical-align: text-top"><div class="m" data-offset-y=28>Xp</div></td> 59 <td style="vertical-align: text-bottom"><div class="m" data-offset-y=28>Xp</div></td> 60 <td style="vertical-align: 100px"><div class="m" data-offset-y=28>Xp</div></td> 61 <td style="vertical-align: 100%"><div class="m" data-offset-y=28>Xp</div></td> 62 </table> 63 64 <p class="testdesc">All the baseline values. 65 Same as test before, but use display:table/table-cell. Default td alignment is baseline, not middle.</p> 66 <div style="height:100px;position:relative" class="ahem vgrad display-table"> 67 <div class="display-cell" style="font: 75px/1 Ahem;vertical-align:baseline;"><div class="m" data-offset-y=0>Xp</div></div> 68 <div class="display-cell" style="" title="default"><div class="m" data-offset-y=28>Xp</div></div> 69 <div class="display-cell" style="vertical-align: top"><div class="m" data-offset-y=0>Xp</div></div> 70 <div class="display-cell" style="vertical-align: middle"><div class="m" data-offset-y=25>Xp</div></div> 71 <div class="display-cell" style="vertical-align: bottom"><div class="m" data-offset-y=50>Xp</div></div> 72 <div class="display-cell" style="vertical-align: baseline"><div class="m" data-offset-y=28>Xp</div></div> 73 <div class="display-cell" style="vertical-align: sub"><div class="m" data-offset-y=28>Xp</div></div> 74 <div class="display-cell" style="vertical-align: super"><div class="m" data-offset-y=28>Xp</div></div> 75 <div class="display-cell" style="vertical-align: text-top"><div class="m" data-offset-y=28>Xp</div></div> 76 <div class="display-cell" style="vertical-align: text-bottom"><div class="m" data-offset-y=28>Xp</div></div> 77 <div class="display-cell" style="vertical-align: 100px"><div class="m" data-offset-y=28>Xp</div></div> 78 <div class="display-cell" style="vertical-align: 100%"><div class="m" data-offset-y=28>Xp</div></div> 79 </div> 80 81 82 <p class="testdesc">Baselines with %ge children</p> 83 <p class="error">FF/Edge fails here</p> 84 <div> 85 inline table 86 <table style="height:100px;position:relative;display:inline-table"> 87 <td style="vertical-align:baseline"> 88 <div style="width:100px;height:50%;background:rgba(0,120,0, 0.5)" data-offset-y=30></div> 89 </td> 90 <td style="vertical-align:baseline"> 91 <div style="width:100px;height:80%;background:rgba(0,120,0, 0.5)" data-offset-y=0></div> 92 </td> 93 </table> 94 </div> 95 <p class="testdesc">Baseline and td height 96 If td is baseline aligned, and has a height, how tall should the td be? 97 </p> 98 <p class="error">Legacy/FF apply height to below baseline?. With baseline alignment, this makes the cell taller.</p> 99 <table style="border: 1px solid black" data-expected-height=202> 100 <tr> 101 <td style="vertical-align:baseline;height:200px">base</td> 102 <td style="vertical-align:baseline"> 103 <div style="background:yellow;width:50px;height:100px"></div> 104 </td> 105 </tr> 106 </table> 107 108 <p class="testdesc">Baseline of rowspanned cell 109 rowspanned td's should contribute to baseline, but not to the row height.</p> 110 <table class="ahem"> 111 <tr data-expected-height=100> 112 <td style="vertical-align:baseline;height:100px;background-color:#DFD;">Xp</td> 113 <td style="vertical-align:baseline;font-size:40px;line-height:1.5" rowspan=2><div class="m">Xp</div><br>Xp<br>Xp</td> 114 </tr> 115 <tr data-expected-height=100> 116 <td style="vertical-align:baseline;height:100px">Xp</td> 117 </tr> 118 </table> 119 120 </main> 121 <script> 122 document.fonts.ready.then(() => checkLayout("table, .display-table")); 123 </script>