visibility-collapse-col-004-dynamic.html (2104B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> 6 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> 7 <style> 8 table { 9 border: 5px solid black; 10 } 11 table span { 12 display: inline-block; 13 vertical-align: top; 14 background: lime; 15 margin: 3px; 16 height: 100px; 17 width: 100px; 18 } 19 </style> 20 <main> 21 <h1>Dynamic Visibility collapse</h1> 22 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> 23 <p> 24 Setting a column to visibility:collapse changes table width but not height. 25 Bottom table is identical to top except left column has been collapsed. 26 </p> 27 <table id="test"> 28 <colgroup id="collapse"></colgroup> 29 <tbody> 30 <tr> 31 <td> 32 <span>row 1</span> 33 </td> 34 <td> 35 <span></span> 36 </td> 37 </tr> 38 <tr> 39 <td> 40 <span>row 2</span> 41 </td> 42 <td> 43 <span></span> 44 </td> 45 </tr> 46 <tr> 47 <td> 48 <span>row 3</span> 49 </td> 50 <td> 51 <span style="height:50px"></span> 52 </td> 53 </tr> 54 </tbody> 55 </table> 56 </main> 57 58 <script> 59 colgroup = document.getElementById("collapse"); 60 colgroup.style.visibility = "collapse"; 61 62 tests = [ 63 [ 64 document.getElementById('test').offsetHeight, 65 342, 66 "col visibility:collapse doesn't change table height", 67 ], 68 [ 69 document.getElementById('test').offsetWidth, 70 122, 71 "col visibility:collapse changes table width" 72 ]]; 73 for (i = 0; i< tests.length; i++) { 74 test(function() 75 { 76 assert_equals.apply(this, tests[i]); 77 }, 78 tests[i][2]); 79 }; 80 </script> 81 </html>