visibility-collapse-col-003.html (2850B)
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='stylesheet' href='support/base.css' /> 6 <link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> 7 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> 8 <style> 9 x-table { 10 border: 5px solid black; 11 } 12 x-table span { 13 display: inline-block; 14 vertical-align: top; 15 background: lime; 16 margin: 3px; 17 height: 100px; 18 width: 100px; 19 } 20 </style> 21 <main> 22 <h1>Visibility collapse</h1> 23 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> 24 <p> 25 Setting a column to visibility:collapse changes table width but not height. 26 </p> 27 <x-table id="one"> 28 <x-tbody> 29 <x-tr> 30 <x-td> 31 <span>row 1</span> 32 </x-td> 33 <x-td> 34 <span></span> 35 </x-td> 36 </x-tr> 37 <x-tr> 38 <x-td> 39 <span>row 2</span> 40 </x-td> 41 <x-td> 42 <span></span> 43 </x-td> 44 </x-tr> 45 <x-tr> 46 <x-td> 47 <span>row 3</span> 48 </x-td> 49 <x-td> 50 <span style="height:50px"></span> 51 </x-td> 52 </x-tr> 53 </x-tbody> 54 </x-table> 55 56 Second table is identical to first except right column has been collapsed. 57 Visibility:collapse is applied on col, not colgroup. 58 59 <x-table id="two"> 60 <x-colgroup></x-colgroup> 61 <x-colgroup> 62 <x-col style="visibility:collapse;"> 63 </x-colgroup> 64 65 <x-tbody> 66 <x-tr> 67 <x-td> 68 <span>row 1</span> 69 </x-td> 70 <x-td> 71 <span></span> 72 </x-td> 73 </x-tr> 74 <x-tr> 75 <x-td> 76 <span>row 2</span> 77 </x-td> 78 <x-td> 79 <span></span> 80 </x-td> 81 </x-tr> 82 <x-tr> 83 <x-td> 84 <span>row 3</span> 85 </x-td> 86 <x-td> 87 <span style="height:50px"></span> 88 </x-td> 89 </x-tr> 90 </x-tbody> 91 </x-table> 92 </main> 93 94 <script> 95 tests = [ 96 [ 97 document.getElementById('two').offsetHeight, 98 document.getElementById('one').offsetHeight, 99 "col visibility:collapse doesn't change table height" 100 ], 101 [ 102 document.getElementById('two').offsetWidth, 103 116, 104 "col visibility:collapse changes table width" 105 ]]; 106 for (i = 0; i< tests.length; i++) { 107 test(function() 108 { 109 assert_equals.apply(this, tests[i]); 110 }, 111 tests[i][2]); 112 }; 113 </script> 114 </html>