<!doctype html> <meta charset="utf-8"> <script src='/resources/testharness.js'></script> <script src='/resources/testharnessreport.js'></script> <link rel='stylesheet' href='support/base.css' /> <link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> <style> x-table { border: 5px solid black; } x-table span { display: inline-block; vertical-align: top; background: pink; margin: 3px; height: 100px; width: 100px; } </style> <main> <h1>Visibility hidden</h1> <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> <p> Setting cells to visibility:hidden doesn't change table height or width. </p> <x-table id="one"> <x-tr> <x-td> <span>row 1</span> </x-td> <x-td> <span></span><span></span> </x-td> </x-tr> <x-tr> <x-td> <span>row 2</span> </x-td> <x-td> <span></span> </x-td> </x-tr> </x-table> Bottom table is identical to top except row 1's cells has been hidden. <x-table id="two"> <x-tr> <x-td style="visibility:hidden"> <span>row 1</span> </x-td> <x-td style="visibility:hidden"> <span></span><span></span> </x-td> </x-tr> <x-tr> <x-td> <span>row 2</span> </x-td> <x-td> <span></span> </x-td> </x-tr> </x-table> </main> <script> tests = [ [ document.getElementById('two').offsetWidth, document.getElementById('one').offsetWidth, "row visibility:hidden doesn't change table width" ], [ document.getElementById('two').offsetHeight, document.getElementById('one').offsetHeight, "row visibility:hidden doesn't change table height" ], [ document.getElementById('two').offsetHeight, 222, "Table height is 222px" ]]; for (i = 0; i< tests.length; i++) { test(function() { assert_equals.apply(this, tests[i]); }, tests[i][2]); }; </script> </html>