computing-column-measure-2.html (2604B)
1 <!doctype html> 2 <script src='/resources/testharness.js'></script> 3 <script src='/resources/testharnessreport.js'></script> 4 <link rel="author" title="Richard Townsend" href="Richard.Townsend@arm.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" /> 6 <style type="text/css"> 7 td { 8 padding: 0; 9 } 10 div { 11 /* Bug does not happen when the table's containing block is less 12 than (100+200+300)=600px, so make sure sure that it's larger. */ 13 width: 750px; 14 } 15 </style> 16 <div> 17 <h1>Width Distribution</h1> 18 <h4>"Computing column measures"</h4> 19 <p>This is testing that the table's auto columns are correctly recalculated after removing and adding a <code>col</code> element. 20 <a href="https://www.w3.org/TR/CSS2/tables.html#auto-table-layout">Spec Text</a></p> 21 22 <hr/> 23 24 <table id="one" style="border: 1px solid orange"> 25 <colgroup> 26 <col style="width: 100px" /> 27 <col style="width: 200px" /> 28 <col style="width: 300px;" id="hideable" /> 29 </colgroup> 30 <tr> 31 <td>100</td> 32 <td>200</td> 33 <td>300</td> 34 </tr> 35 </table> 36 37 <table id="two" style="border: 1px solid orange"> 38 <colgroup> 39 <col style="width: 100px; display: none;" id="displayable" /> 40 <col style="width: 200px;" /> 41 <col style="width: auto;" /> 42 </colgroup> 43 <tr> 44 <td>100</td> 45 <td>200</td> 46 <td>300</td> 47 </tr> 48 </table> 49 50 <table id="ref" style="border: 1px solid orange"> 51 <colgroup> 52 <col style="width: 100px;" /> 53 <col style="width: 200px;" /> 54 <col style="width: auto;" /> 55 </colgroup> 56 <tr> 57 <td>100</td> 58 <td>200</td> 59 <td>300</td> 60 </tr> 61 </table> 62 63 </div> 64 <script> 65 test(function() { 66 var one = document.getElementById('one'); 67 var two = document.getElementById('two'); 68 var ref = document.getElementById('ref'); 69 70 // Force initial layout. 71 assert_greater_than(one.offsetWidth, ref.offsetWidth); 72 73 // Display two's colgroup and hide one's. 74 document.getElementById('displayable').style.display = 'table-column'; 75 document.getElementById('hideable').style.display = 'none'; 76 77 // Both tables should now match the reference. 78 assert_equals(one.offsetWidth, ref.offsetWidth); 79 assert_equals(two.offsetWidth, ref.offsetWidth); 80 }, "Table recalculations should match the reference"); 81 </script>