visibility-collapse-row-group-001.html (3359B)
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://www.w3.org/TR/2017/WD-css-tables-3-20170307/#visible-track"> 9 <style> 10 x-table { 11 border: 5px solid black; 12 } 13 x-table span { 14 display: inline-block; 15 vertical-align: top; 16 background: lime; 17 margin: 3px; 18 height: 100px; 19 width: 100px; 20 } 21 </style> 22 <main> 23 <h1>Visibility collapse</h1> 24 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> 25 <p> 26 Collapsing a row group but making its rows visible should still result in a 27 collapsed row group. 28 </p> 29 <x-table id="one"> 30 <x-tbody> 31 <x-tr> 32 <x-td> 33 <span>row 1</span> 34 </x-td> 35 <x-td> 36 <span></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-tbody> 48 <x-tr id="thirdRowRef"> 49 <x-td> 50 <span>row 3</span> 51 </x-td> 52 <x-td> 53 <span></span> 54 </x-td> 55 </x-tr> 56 </x-table> 57 When row group is collapsed, visible rows within the row group are still collapsed and therefore invisible. 58 <x-table id="two"> 59 <x-tbody style="visibility:collapse;"> 60 <x-tr style="visibility:visible;" id="firstRow"> 61 <x-td> 62 <span>row 1</span> 63 </x-td> 64 <x-td> 65 <span></span> 66 </x-td> 67 </x-tr> 68 <x-tr style="visibility:visible;" id="secondRow"> 69 <x-td> 70 <span>row 2</span> 71 </x-td> 72 <x-td> 73 <span></span> 74 </x-td> 75 </x-tr> 76 </x-tbody> 77 <x-tr id="thirdRow"> 78 <x-td> 79 <span>row 3</span> 80 </x-td> 81 <x-td> 82 <span></span> 83 </x-td> 84 </x-tr> 85 </x-table> 86 </main> 87 88 <script> 89 tests = [ 90 [ 91 document.getElementById('two').offsetWidth, 92 document.getElementById('one').offsetWidth, 93 "row group visibility:collapse doesn't change table width" 94 ], 95 [ 96 document.getElementById('two').offsetHeight, 97 116, 98 "row group visibility:collapse changes table height" 99 ], 100 [ 101 document.getElementById('firstRow').offsetHeight, 102 0, 103 "the first row should be collapsed" 104 ], 105 [ 106 document.getElementById('secondRow').offsetHeight, 107 0, 108 "the second row should be collapsed" 109 ], 110 [ 111 document.getElementById('thirdRow').offsetHeight, 112 document.getElementById('thirdRowRef').offsetHeight, 113 "the third row stays the same" 114 ]]; 115 116 for (i = 0; i< tests.length; i++) { 117 test(function() 118 { 119 assert_equals.apply(this, tests[i]); 120 }, 121 tests[i][2]); 122 }; 123 </script> 124 </html>