visibility-collapse-non-rowcol-001.html (3340B)
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 <link rel="help" href="https://drafts.csswg.org/css-box-3/#visibility-prop"> 9 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> 10 <style> 11 x-table { 12 border: 5px solid black; 13 } 14 x-table span { 15 display: inline-block; 16 vertical-align: top; 17 background: lime; 18 margin: 3px; 19 height: 100px; 20 width: 100px; 21 } 22 </style> 23 <main> 24 <h1>Visibility collapse</h1> 25 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> 26 <p> 27 When setting any element that is not a row, col, row group, or col group, 28 visibility:collapse is equivalent to visibility:hidden. 29 </p> 30 <x-table id="one"> 31 <x-tr> 32 <x-td id="visibleCell"> 33 <span>row 1</span> 34 </x-td> 35 <x-td> 36 <span id="visibleSpan"></span> 37 </x-td> 38 </x-tr> 39 <x-tr> 40 <x-td> 41 <span>row 2</span> 42 </x-td> 43 <x-td> 44 <span></span> 45 </x-td> 46 </x-tr> 47 </x-table> 48 Bottom table is identical to top except top cells have been collapsed. 49 <x-table id="two"> 50 <x-tr> 51 <x-td id="hiddenCell" style="visibility:collapse"> 52 <span>row 1</span> 53 </x-td> 54 <x-td> 55 <span id="hiddenSpan" style="visibility:collapse"></span> 56 </x-td> 57 </x-tr> 58 <x-tr> 59 <x-td> 60 <span>row 2</span> 61 </x-td> 62 <x-td> 63 <span></span> 64 </x-td> 65 </x-tr> 66 </x-table> 67 </main> 68 69 <script> 70 tests = [ 71 [ 72 document.getElementById('two').offsetWidth, 73 document.getElementById('one').offsetWidth, 74 "table width is unchanged" 75 ], 76 [ 77 document.getElementById('two').offsetHeight, 78 document.getElementById('one').offsetHeight, 79 "table height is unchanged" 80 ], 81 [ 82 document.getElementById('hiddenCell').offsetWidth, 83 document.getElementById('visibleCell').offsetWidth, 84 "td visibility:collapse has no effect on td width" 85 ], 86 [ 87 document.getElementById('hiddenCell').offsetHeight, 88 document.getElementById('visibleCell').offsetHeight, 89 "td visibility:collapse has no effect on td height" 90 ], 91 [ 92 document.getElementById('hiddenSpan').offsetWidth, 93 document.getElementById('visibleSpan').offsetWidth, 94 "span visibility:collapse has no effect on span width" 95 ], 96 [ 97 document.getElementById('hiddenSpan').offsetHeight, 98 document.getElementById('visibleSpan').offsetHeight, 99 "span visibility:collapse has no effect on span height" 100 ]]; 101 102 for (i = 0; i< tests.length; i++) { 103 test(function() 104 { 105 assert_equals.apply(this, tests[i]); 106 }, 107 tests[i][2]); 108 }; 109 </script> 110 </html>