caption.html (5061B)
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 <title>caption</title> 6 <meta name="flags" content="ahem"> 7 <link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 10 <link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#the-caption-element"/> 11 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#bounding-box-assignment" /> 12 <style> 13 main table { 14 border-spacing: 0 0; 15 position:relative; 16 background: gray; 17 } 18 main td { 19 background: #BFB; 20 } 21 main caption { 22 background: yellow; 23 } 24 main caption > div { 25 display: inline-block; 26 background: rgba(0,0,0,0.1); 27 } 28 main caption > div:after { 29 content: "c"; 30 } 31 .lh { 32 line-height:30px; 33 } 34 </style> 35 <h1>Caption sizing and positioning</h1> 36 <p class="error">There is a fundamental disagreement between Chrome Legacy and Firefox on caption size influence on table width. Chrome uses caption min width as lower limit of table's grid box, FF does not. Firefox also does not support multiple captions.</p> 37 38 <main> 39 40 <h2>Caption width limits</h2> 41 42 <p class="testdesc">Caption minmax and grid width 43 caption.min is lower limit of grid min.</p> 44 <table> 45 <caption data-expected-width=50><div style="width:50px"></div><div style="width:30px"></caption> 46 <td data-expected-width=50>auto</td> 47 </table> 48 49 <p class="testdesc">Caption.min vs caption.css_width 50 Caption.css_width is upper limit of caption.min 51 Caption.css_width is lower limit of caption.min 52 </p> 53 <table> 54 <caption style="width:100px" data-expected-width=100><div style="width:200px"></div></caption> 55 <td data-expected-width=100>auto</td> 56 </table> 57 <table> 58 <caption style="width:300px" data-expected-width=300><div style="width:200px"></div></caption> 59 <td data-expected-width=300>auto</td> 60 </table> 61 62 63 <p class="testdesc">Caption width:50% 64 Percent width is resolved wrt to table width.</p> 65 <table style="width:200px"> 66 <caption style="width:50%" data-expected-width=100><div></div></caption> 67 <td data-expected-width=200>auto</td> 68 </table> 69 70 <table style="width:200px"> 71 <caption style="width:50%" data-expected-width=100><div style="width:200px"></div></caption> 72 <td data-expected-width=200>auto</td> 73 </table> 74 75 <p class="testdesc">Caption and size of empty table 76 Larger of table borders, and caption min size.</p> 77 <table style="border:50px solid green;border-spacing:10px" data-expected-width=100> 78 <caption><div style="width:50px">c</div><div style="width:50px">c</div></caption> 79 </table> 80 81 <p class="testdesc">Caption height:80% 82 github spec <a href="https://github.com/w3c/csswg-drafts/issues/4676">issue</a>. 83 TablesNG will not resolve percentage heights per spec. FF agrees. 84 </p> 85 <table style="width:200px;height:100px"> 86 <caption style="height:80%" data-expected-height=30><div style="height:30px"></div></caption> 87 <td data-expected-width=200>auto</td> 88 </table> 89 90 <p class="testdesc">Multiple captions 91 Do we allow multiple captions? There are 4 in this test.</p> 92 <table> 93 <caption class="lh" data-offset-y=0>over1</caption> 94 <caption class="lh" data-offset-y=30>over2</caption> 95 <caption class="lh" style="caption-side:bottom" data-offset-y=90>under1</caption> 96 <caption class="lh" style="caption-side:bottom" data-offset-y=120>under2</caption> 97 <td class="lh" data-offset-y=60>2 above me, 2 below me?</td> 98 </table> 99 <p class="testdesc">Caption margins 100 Margins between captions do not collapse</p> 101 <table style="width:200px"> 102 <caption class="lh" style="margin:20px;" data-offset-y=20 data-offset-x=20>20px margins</caption> 103 <td data-expected-width=200 data-offset-y=70>1 caption</td> 104 </table> 105 <table style="width:200px"> 106 <caption class="lh" style="margin:20px;" data-offset-y=20 data-offset-x=20>20px margins</caption> 107 <caption class="lh" style="margin:20px;" data-offset-y=90 data-offset-x=20>20px margins</caption> 108 <td data-expected-width=200 data-offset-y=140>2 captions</td> 109 </table> 110 111 112 <p class="testdesc">Caption margins auto 113 auto margins center captions that are less wide than the table. 114 </p> 115 <table style="width:200px"> 116 <caption class="lh" style="margin:auto" data-offset-x=0><div style="width:100px">auto margins</div></caption> 117 <td data-expected-width=200>1 caption</td> 118 </table> 119 <table style="width:200px"> 120 <caption class="lh" style="margin:auto;width:50%" data-offset-x=50><div style="width:100px">auto margins</div></caption> 121 <td data-expected-width=200>1 caption</td> 122 </table> 123 124 125 <p class="testdesc">Vertical writing mode caption 126 </p> 127 <table> 128 <caption style="writing-mode:vertical-rl;height:min-content;font:10px Ahem;color:rgba(0,0,0,0.3)" data-expected-height=100 ><div style="height:100px;">vertical</div> caption bigger than table</caption> 129 <tbody data-offset-y=100> 130 <td>vertical!</td> 131 </tbody> 132 </table> 133 134 </main> 135 <script> 136 checkLayout("table"); 137 </script>