tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

visibility-hidden-row-002.html (2438B)

      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: pink;
     16        margin: 3px;
     17        height: 100px;
     18        width: 100px;
     19    }
     20 </style>
     21 <main>
     22    <h1>Visibility hidden</h1>
     23    <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a>
     24    <p>
     25    Setting cells to visibility:hidden doesn't change table height or 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 1's cells has been hidden.
     46    <x-table id="two">
     47        <x-tr>
     48            <x-td style="visibility:hidden">
     49                <span>row 1</span>
     50            </x-td>
     51            <x-td style="visibility:hidden">
     52                <span></span><span></span>
     53            </x-td>
     54        </x-tr>
     55        <x-tr>
     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    tests = [
     68    [
     69        document.getElementById('two').offsetWidth,
     70        document.getElementById('one').offsetWidth,
     71        "row visibility:hidden doesn't change table width"
     72    ],
     73    [
     74        document.getElementById('two').offsetHeight,
     75        document.getElementById('one').offsetHeight,
     76        "row visibility:hidden doesn't change table height"
     77    ],
     78    [
     79        document.getElementById('two').offsetHeight,
     80        222,
     81        "Table height is 222px"
     82    ]];
     83 
     84    for (i = 0; i< tests.length; i++) {
     85        test(function()
     86            {
     87                assert_equals.apply(this, tests[i]);
     88            },
     89            tests[i][2]);
     90    };
     91 </script>
     92 </html>