visibility-collapse-row-group-002.html (2680B)
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-height"> 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-height">Spec</a> 24 <p> 25 Setting row group to visibility:collapse changes table height but not width. 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-tbody> 46 <x-tr> 47 <x-td> 48 <span>row 3</span> 49 </x-td> 50 <x-td> 51 <span></span> 52 </x-td> 53 </x-tr> 54 </x-table> 55 Bottom table is identical to top except row group of first two rows has been collapsed. 56 <x-table id="two"> 57 <x-tbody style="visibility:collapse;"> 58 <x-tr> 59 <x-td> 60 <span>row 1</span> 61 </x-td> 62 <x-td> 63 <span></span> 64 </x-td> 65 </x-tr> 66 <x-tr> 67 <x-td> 68 <span>row 2</span> 69 </x-td> 70 <x-td> 71 <span></span> 72 </x-td> 73 </x-tr> 74 </x-tbody> 75 <x-tr> 76 <x-td> 77 <span>row 3</span> 78 </x-td> 79 <x-td> 80 <span></span> 81 </x-td> 82 </x-tr> 83 </x-table> 84 </main> 85 86 <script> 87 tests = [ 88 [ 89 document.getElementById('two').offsetWidth, 90 document.getElementById('one').offsetWidth, 91 "row group visibility:collapse doesn't change table width" 92 ], 93 [ 94 document.getElementById('two').offsetHeight, 95 116, 96 "row group visibility:collapse changes table height" 97 ]]; 98 99 for (i = 0; i< tests.length; i++) { 100 test(function() 101 { 102 assert_equals.apply(this, tests[i]); 103 }, 104 tests[i][2]); 105 }; 106 </script> 107 </html>