colgroup-col.html (3722B)
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>COLGROUP/COL</title> 6 <meta name="flags" content="ahem"> 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://html.spec.whatwg.org/multipage/tables.html#the-colgroup-element" /> 11 <link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#the-col-element" /> 12 <link rel="help" href="https://stackoverflow.com/questions/29411447/what-does-the-width-attribute-of-colgroup-actually-specify" /> 13 <style> 14 main table { 15 background: gray; 16 } 17 18 main td { 19 background: #BFB; 20 } 21 22 main td > div { 23 display: inline-block; 24 background: rgba(56,162,56,0.3); 25 } 26 </style> 27 <main> 28 <h1>Colgroup col widths</h1> 29 <ol> 30 <li>colgroup's purpose is to "group" cols</li> 31 <li>one can think of colgroup as always generating max(colgroup.span,1) cols, unless it has <col> children.</li> 32 <li>colgroup css_width specifies width of generated cols.</li> 33 <li>col.css_width can override colgroup width</li> 34 </ol> 35 <p class="testdesc">colgroups with spans</p> 36 <table> 37 <colgroup width="100px"></colgroup> 38 <colgroup width="100px" span=3></colgroup> 39 <td data-expected-width=100>cg1</td> 40 <td data-expected-width=100>cg2</td> 41 <td data-expected-width=100>cg2</td> 42 <td data-expected-width=100>cg2</td> 43 <td data-expected-width=50><div style="width:50px">50px</div></td> 44 </table> 45 46 <p class="testdesc">cols with spans</p> 47 <table> 48 <col width="100px"> 49 <col width="100px" span=3> 50 <td data-expected-width=100>col1</td> 51 <td data-expected-width=100>col2</td> 52 <td data-expected-width=100>col2</td> 53 <td data-expected-width=100>col2</td> 54 <td data-expected-width=50><div style="width:50px">50px</div></td> 55 </table> 56 57 <p class="testdesc">colgroups with cols</p> 58 <table> 59 <colgroup span=4 style="width:100px"> 60 <col> 61 <col style="width:50px"> 62 <col style="width:150px"> 63 </colgroup> 64 <td data-expected-width=100>cg</td> 65 <td data-expected-width=50>col1</td> 66 <td data-expected-width=150>col2</td> 67 <td data-expected-width=50><div style="width:50px">50px</div></td> 68 </table> 69 70 <p class="testdesc">colgroups with cols with spans</p> 71 <p class="error">Legacy fails col with span inside colgroup test.</p> 72 <table> 73 <colgroup span=3 style="width:100px"> 74 <col> 75 <col style="width:50px" span=2> 76 </colgroup> 77 <colgroup style="width:66px"> 78 <col span=2> 79 </colgroup> 80 <td data-expected-width=100>cg1</td> 81 <td data-expected-width=50>col1</td> 82 <td data-expected-width=50>col1</td> 83 <td data-expected-width=66>cg2</td> 84 <td data-expected-width=66>cg2</td> 85 <td data-expected-width=75><div style="width:75px">50px</div></td> 86 </table> 87 88 <p class="testdesc">0% cols are ignored</p> 89 <table data-expected-width=106> 90 <colgroup> 91 <col style="width:0%"> 92 <col style="width:0%"> 93 </colgroup> 94 <tr> 95 <td data-expected-width=100> 96 <div><span style=" display: inline-block;word-break: break-word;font: 20px/1 Ahem">01234</span></div> 97 </td> 98 <td> 99 <div></div> 100 </td> 101 </tr> 102 </table> 103 <table data-expected-width=107> 104 <colgroup> 105 <col style="width:0%"> 106 <col style="width:1%"> 107 </colgroup> 108 <tr> 109 <td data-expected-width=100> 110 <div><span style=" display: inline-block;word-break: break-word;font: 20px/1 Ahem;">01234</span></div> 111 </td> 112 <td> 113 <div></div> 114 </td> 115 </tr> 116 </table> 117 118 </main> 119 120 <script> 121 document.fonts.ready.then(() => checkLayout("table")); 122 </script>