visibility-collapse-row-002-dynamic.html (2416B)
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 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 2 has been collapsed. 46 <x-table id="two"> 47 <x-tr> 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 id="collapse"> 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 row = document.getElementById("collapse"); 68 row.style.visibility = "collapse"; 69 70 tests = [ 71 [ 72 document.getElementById('two').offsetWidth, 73 document.getElementById('one').offsetWidth, 74 "row visibility:collapse doesn't change table width, unlike display:none" 75 ], 76 [ 77 document.getElementById('two').offsetHeight, 78 116, 79 "row visibility:collapse changes table height, unlike visibility:hidden" 80 ]]; 81 for (i = 0; i< tests.length; i++) { 82 test(function() 83 { 84 assert_equals.apply(this, tests[i]); 85 }, 86 tests[i][2]); 87 }; 88 </script> 89 </html>