visibility-hidden-nested-001.html (4238B)
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-width"> 8 <link rel="help" href="https://drafts.csswg.org/css-box-3/#visibility-prop"> 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 hidden</h1> 24 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> 25 <p> 26 Setting a table to visibility:hidden, but rows and cells to different visibility values. 27 </p> 28 <x-table id="one"> 29 <x-tbody> 30 <x-tr id="visibleRow"> 31 <x-td> 32 <span>row 1</span> 33 </x-td> 34 <x-td> 35 <span></span> 36 </x-td> 37 </x-tr> 38 <x-tr> 39 <x-td> 40 <span>row 2</span> 41 </x-td> 42 <x-td id="visibleCell"> 43 <span></span> 44 </x-td> 45 </x-tr> 46 <x-tr> 47 <x-td> 48 <span>row 3</span> 49 </x-td> 50 <x-td> 51 <span id="visibleSpan"></span> 52 </x-td> 53 </x-tr> 54 </x-tbody> 55 </x-table> 56 Bottom table is identical to top, except entire table is hidden, the second row 57 is visible with a nested hidden cell, and the third row is visible with a nested 58 hidden span. 59 <x-table id="two" style="visibility:hidden;"> 60 <x-tbody> 61 <x-tr id="invisibleRow"> 62 <x-td> 63 <span>row 1</span> 64 </x-td> 65 <x-td> 66 <span></span> 67 </x-td> 68 </x-tr> 69 <x-tr style="visibility:visible;"> 70 <x-td> 71 <span>row 2</span> 72 </x-td> 73 <x-td id="invisibleCell" style="visibility:hidden;"> 74 <span></span> 75 </x-td> 76 </x-tr> 77 <x-tr style="visibility:visible;"> 78 <x-td> 79 <span>row 3</span> 80 </x-td> 81 <x-td> 82 <span id="invisibleSpan" style="visibility:hidden;"></span> 83 </x-td> 84 </x-tr> 85 </x-tbody> 86 </x-table> 87 </main> 88 89 <script> 90 tests = [ 91 [ 92 document.getElementById('two').offsetHeight, 93 document.getElementById('one').offsetHeight, 94 "table visibility:hidden doesn't change table height" 95 ], 96 [ 97 document.getElementById('two').offsetWidth, 98 222, 99 "table visibility:hidden doesn't change table width" 100 ], 101 [ 102 document.getElementById('visibleRow').offsetWidth, 103 document.getElementById('invisibleRow').offsetWidth, 104 "row visibility:hidden doesn't change row width" 105 ], 106 [ 107 document.getElementById('visibleRow').offsetHeight, 108 document.getElementById('invisibleRow').offsetHeight, 109 "row visibility:hidden doesn't change row height" 110 ], 111 [ 112 document.getElementById('visibleCell').offsetWidth, 113 document.getElementById('invisibleCell').offsetWidth, 114 "cell visibility:hidden doesn't change cell width" 115 ], 116 [ 117 document.getElementById('visibleCell').offsetHeight, 118 document.getElementById('invisibleCell').offsetHeight, 119 "cell visibility:hidden doesn't change cell height" 120 ], 121 [ 122 document.getElementById('visibleSpan').offsetWidth, 123 document.getElementById('invisibleSpan').offsetWidth, 124 "span visibility:hidden doesn't change span width" 125 ], 126 [ 127 document.getElementById('visibleSpan').offsetHeight, 128 document.getElementById('invisibleSpan').offsetHeight, 129 "span visibility:hidden doesn't change span height" 130 ]]; 131 132 for (i = 0; i< tests.length; i++) { 133 test(function() 134 { 135 assert_equals.apply(this, tests[i]); 136 }, 137 tests[i][2]); 138 }; 139 </script> 140 </html>