visibility-hidden-nested-002.html (3208B)
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 nested visibility values. 27 Height and width of table should not change. 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 1</span> 42 </x-td> 43 <x-td> 44 <span></span> 45 </x-td> 46 </x-tr> 47 </x-tbody> 48 </x-table> 49 Bottom table is identical to top except entire row group of two rows is hidden, and 50 first row is visible with two hidden cells and a visible span in the left cell. 51 <x-table id="two"> 52 <x-tbody style="visibility:hidden;"> 53 <x-tr id="invisibleRow" style="visibility:visible;"> 54 <x-td id="leftCell" style="visibility:hidden;"> 55 <span style="visibility:visible;">row 1</span> 56 </x-td> 57 <x-td id="rightCell" style="visibility:hidden;"> 58 <span></span> 59 </x-td> 60 </x-tr> 61 <x-tr> 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-tbody> 70 </x-table> 71 72 </main> 73 74 <script> 75 tests = [ 76 [ 77 document.getElementById('two').offsetHeight, 78 document.getElementById('one').offsetHeight, 79 "table visibility:hidden doesn't change table height" 80 ], 81 [ 82 document.getElementById('two').offsetWidth, 83 document.getElementById('one').offsetWidth, 84 "table visibility:hidden doesn't change table width" 85 ], 86 [ 87 document.getElementById("leftCell").offsetWidth, 88 document.getElementById("rightCell").offsetWidth, 89 "hidden and visible cells should have same height" 90 ], 91 [ 92 document.getElementById("leftCell").offsetHeight, 93 document.getElementById("rightCell").offsetHeight, 94 "hidden and visible cells should have same width" 95 ] 96 ]; 97 98 for (i = 0; i< tests.length; i++) { 99 test(function() 100 { 101 assert_equals.apply(this, tests[i]); 102 }, 103 tests[i][2]); 104 }; 105 </script> 106 </html>