visibility-collapse-rowcol-002.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-tables/visibility-collapse-rowcol-002.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset="utf-8">

<script src='/resources/testharness.js'></script>

<script src='/resources/testharnessreport.js'></script>

<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">

<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">

<style>

    td {

        padding: 0;

</style>

<h1>Visibility collapse</h1>

<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a>

<p>

Setting row and spanning column to visibility:collapse changes height and width.

</p>

<table id="test" style="border-spacing:0;">

   <col style="background-color: pink;">

   <col style="background-color: green;">

   <col span="2" style="background-color: purple; visibility: collapse;">

  <tr>

    <td><div style="width: 25px; height: 25px"></div></td>

    <td><div style="width: 20px; height: 20px"></div></td>

    <td><div style="width: 15px; height: 15px"></div></td>

    <td><div style="width: 10px; height: 10px"></div></td>

  </tr>

  <tr>

    <td rowspan="2" colspan="3"><div style="width: 45px; height: 25px"></div></td>

    <td><div style="width: 10px; height: 10px"></div></td>

  </tr>

  <tr style="visibility: collapse;">

    <td><div style="width: 70px; height: 40px"></div></td>

  </tr>

</table>

<script>

    borderWidth = 2;

    tests = [

            document.getElementById('test').offsetWidth,

45,

            "spanning row visibility:collapse doesn't change table width"

],

            document.getElementById('test').offsetHeight,

35,

            "spanning row visibility:collapse doesn't change height in this case"

]];

    for (i = 0; i< tests.length; i++) {

        test(function()

                assert_equals.apply(this, tests[i]);

},

            tests[i][2]);

};

</script>

</html>