baseline-table.html (5447B)
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>TABLE baseline</title> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 9 <link rel="help" href="https://drafts.csswg.org/css-tables-3/" /> 10 <link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" /> 11 <style> 12 main table { 13 display: inline-table; 14 border: 15px solid green; 15 background: gray; 16 width: 0px; 17 height: 0px; 18 vertical-align:baseline; 19 border-spacing: 0; 20 } 21 main td { 22 background: #BFB; 23 padding: 4px; 24 } 25 main td > div { 26 display: inline-block; 27 background: rgba(56,162,56,0.3); 28 } 29 .container { 30 position: relative; 31 outline: black dotted 1px; 32 height: 100px; 33 width: 400px; 34 font: 50px/1 Ahem; /* baseline is 40px */ 35 } 36 </style> 37 <main> 38 <h2><TABLE> baseline tests</h2> 39 40 <p>Empty table's baseline is bottom of table's border box.</p> 41 <div class="container"> 42 Xp<table data-offset-y="10"> 43 </table> 44 </div> 45 46 <p>Empty body's baseline is bottom of table's border box.</p> 47 <div class="container"> 48 Xp<table data-offset-y="10"> 49 <tbody> 50 </tbody> 51 </table> 52 </div> 53 54 <p>Empty row's baseline is center of the row.</p> 55 <div class="container"> 56 Xp<table data-offset-y="25"> 57 <tbody> 58 <tr></tr> 59 </tbody> 60 </table> 61 </div> 62 63 <p>First row defines baseline even if empty.</p> 64 <div class="container"> 65 Xp<table style="font: 12px fixed" data-offset-y="25"> 66 <tbody> 67 <tr></tr> 68 <tr><td>1,0</td></tr> 69 </tbody> 70 </table> 71 </div> 72 73 <p>Cell's baseline defined row's baseline only if cell is vertical-align:baseline.</p> 74 <div class="container"> 75 Xp<table style="font-size: 24px" data-offset-y="2"> 76 <tbody> 77 <tr><td style="vertical-align:baseline">Xp</td></tr> 78 </tbody> 79 </table></div> 80 </div> 81 <div class="container"> 82 Xp<table style="font-size:24px" data-offset-y="0"> 83 <tbody> 84 <tr><td style="vertical-align:middle">Xp</td></tr> 85 </tbody> 86 </table> 87 </div> 88 89 90 <p>Table's vertical-align: top.</p> 91 <div class="container"> 92 Xp<table style="vertical-align:top" data-offset-y="0"></table> 93 </div> 94 95 <p>Table's vertical-align: middle. </p> 96 <div class="container"> 97 Xp<table style="vertical-align:middle" data-offset-y="5"></table> 98 </div> 99 100 <p>Table's vertical-align: bottom. </p> 101 <div class="container"> 102 Xp<table style="vertical-align:bottom" data-offset-y="20"></table> 103 </div> 104 105 <p>Table's top/middle/bottom combined. </p> 106 <div class="container"> 107 Xp<table style="vertical-align:top" data-offset-y="0"></table> 108 <table style="vertical-align:middle" data-offset-y="5"></table> 109 <table style="vertical-align:bottom" data-offset-y="20"></table> 110 </div> 111 112 <p>Two rows empty, 1st row has css height.</p> 113 <div class="container"> 114 Xp<table data-offset-y=25 data-expected-height=50> 115 <tr style="height:20px"></tr> 116 <tr></tr> 117 </table> 118 </div> 119 120 <p>First row empty with css height, 2 row has content, </p> 121 <div class="container"> 122 Xp<table data-offset-y=25 data-expected-height=68> 123 <tr style="height:20px"></tr> 124 <tr><td style="font-size:10px">X</td></tr> 125 </table> 126 </div> 127 128 <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> 129 <div class="container"> 130 Xp<table> 131 <tr> 132 <td rowspan=2 style="height:80px"></td> 133 <td></td> 134 </tr> 135 <tr> 136 <td></td> 137 </tr> 138 </table><div style="display:inline-block" data-offset-y=15>pX</div> 139 </div> 140 141 <p>Block level table inside inline block does not produce a baseline.</p> 142 <div class="container" style="font: 10px/1 Ahem;width:500px"> 143 Xp<br>Xp<table 144 title="inline table produces a baseline" 145 data-offset-y=33><td style="vertical-align:baseline">Xp</td></table> 146 <div style="display:inline-block;height:50px;background:yellow;width:50px;" 147 title="empty inline block baseline is bottom of the block" 148 data-offset-y=10 149 ></div> 150 <div style="display:inline-block;height:50px;background:yellow;width:50px;" 151 title="inline block's content defines its baseline" 152 data-offset-y=52 153 >X</div> 154 <div style="display:inline-block;height:50px;background:yellow" 155 title="table inside inline block does not produce a baseline" 156 data-offset-y=10 157 ><table style="display:table"><td style="vertical-align:baseline">X</td></table></div> 158 <div style="display:inline-block;height:50px;background:yellow" 159 title="but inline table inside inline block does produce a baseline" 160 data-offset-y=33 161 ><table style="display:inline-table"><td style="vertical-align:baseline">X</td></table></div> 162 </div> 163 164 <!-- anonymous-table-no-baseline-align replica --> 165 <p>Anonymous tables should not generate baselines</p> 166 <div class="container">Xp 167 <div style="height:60px;width:100px;display:inline-block;background:green" 168 data-offset-y=0> 169 <div style="display:table-cell;vertical-align:middle;color:yellow"> </div> 170 </div> 171 <div style="height:60px;width:100px;display:inline-block;background:green" 172 data-offset-y=0> 173 <div style="display:table-cell;vertical-align:middle;color:yellow">> <br> <br></div> 174 </div> 175 </div> 176 </main> 177 <script> 178 document.fonts.ready.then(() => checkLayout(".container")); 179 </script>