visibility-collapse-row-001.html (2204B)
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="David Grogan" href="mailto:dgrogan@chromium.org"> 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 a row to visibility:collapse changes table height but not width. 26 </p> 27 <x-table id="one"> 28 <x-tr> 29 <x-td> 30 <span>row 1</span> 31 </x-td> 32 <x-td> 33 <span></span><span></span> 34 </x-td> 35 </x-tr> 36 <x-tr> 37 <x-td> 38 <span>row 2</span> 39 </x-td> 40 <x-td> 41 <span></span> 42 </x-td> 43 </x-tr> 44 </x-table> 45 Bottom table is identical to top except row 1 has been collapsed. 46 <x-table id="two"> 47 <x-tr style="visibility:collapse"> 48 <x-td> 49 <span>row 1</span> 50 </x-td> 51 <x-td> 52 <span></span><span></span> 53 </x-td> 54 </x-tr> 55 <x-tr> 56 <x-td> 57 <span>row 2</span> 58 </x-td> 59 <x-td> 60 <span></span> 61 </x-td> 62 </x-tr> 63 </x-table> 64 </main> 65 66 <script> 67 generate_tests(assert_equals, [ 68 [ 69 "row visibility:collapse doesn't change table width, unlike display:none", 70 document.getElementById('two').offsetWidth, 71 document.getElementById('one').offsetWidth 72 ], 73 [ 74 "row visibility:collapse changes table height, unlike visibility:hidden", 75 document.getElementById('two').offsetHeight, 76 116 77 ] 78 ]); 79 </script> 80 </html>