test_layoutguess.html

mozilla-central/accessible/tests/mochitest/table/test_layoutguess.html

Enable keyboard shortcuts

Source code

File a bug in Core :: Disability Access APIs

Revision control

Copy as Markdown

Other Tools

Test Info:

Manifest: accessible/tests/mochitest/table/a11y.toml

<html>

<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=495388 -->

<head>

  <title>test HTMLTableAccessible::IsProbablyForLayout implementation</title>

  <link rel="stylesheet" type="text/css"

        href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script type="application/javascript"

          src="../common.js"></script>

  <script type="application/javascript"

          src="../attributes.js"></script>

  <script type="application/javascript">

    function isLayoutTable(id) {

      // This helps us know if the absence of layout-guess is simply because

      // it is not a table.

      ok(isAccessible(id, nsIAccessibleTable), `${id} has table interface`);

      testAttrs(id, { "layout-guess": "true" }, true);

    function isDataTable(id) {

      testAbsentAttrs(id, { "layout-guess": "true" });

    function doTest() {

      // table with role of grid

      isDataTable("table1");

      // table with role of grid and datatable="0"

      isDataTable("table1.1");

      // table with landmark role

      isDataTable("table2");

      // table with summary

      isDataTable("table3");

      // table with caption

      isDataTable("table4");

      // layout table with empty caption

      isLayoutTable("table4.2");

      // table with thead element

      isDataTable("table5");

      // table with tfoot element

      isDataTable("table5.1");

      // table with colgroup or col elements

      isDataTable("table5.2");

      isDataTable("table5.3");

      // table with th element

      isDataTable("table6");

      // table with headers attribute

      isDataTable("table6.2");

      // table with scope attribute

      isDataTable("table6.2.2");

      // table with abbr attribute

      isDataTable("table6.2.3");

      // table with abbr element

      isDataTable("table6.3");

      // table with abbr element having empty text node

      isDataTable("table6.4");

      // table with abbr element and non-empty text node

      isLayoutTable("table6.5");

      // layout table with nested table

      isLayoutTable("table9");

      // layout table with 1 column

      isLayoutTable("table10");

      // layout table with 1 row

      isLayoutTable("table11");

      // table with 5 columns

      isDataTable("table12");

      // table with a bordered cell

      isDataTable("table13");

      // table with alternating row background colors

      isDataTable("table14");

      // table with 3 columns and 21 rows

      isDataTable("table15");

      // layout table that has a 100% width

      isLayoutTable("table16");

      // layout table that has a 95% width in pixels

      isLayoutTable("table17");

      // layout table with less than 10 columns

      isLayoutTable("table18");

      // layout table with embedded iframe

      isLayoutTable("table19");

      // tree grid, no layout table

      isDataTable("table20");

      // layout table containing nested data table (having data structures)

      isLayoutTable("table21");

      isLayoutTable("table21.2");

      isLayoutTable("table21.3");

      isLayoutTable("table21.4");

      isLayoutTable("table21.5");

      isLayoutTable("table21.6");

      // layout table having datatable="0" attribute and containing data table structure (tfoot element)

      isLayoutTable("table22");

      // repurposed table for tabbed UI

      isLayoutTable("table23");

      // data table that has a nested table but has non-zero border width on a cell

      isDataTable("table24");

      // layout display:block table with 1 column

      isLayoutTable("displayblock_table1");

      // matrix

      isDataTable("mtable1");

      SimpleTest.finish();

    SimpleTest.waitForExplicitFinish();

    addA11yLoadEvent(doTest);

  </script>

</head>

<body>

  <a target="_blank"

     href="https://bugzilla.mozilla.org/show_bug.cgi?id=495388"

     title="Don't treat tables that have a landmark role as layout table">

    Mozilla Bug 495388

  </a>

  <a target="_blank"

     href="https://bugzilla.mozilla.org/show_bug.cgi?id=690222"

     title="Data table elements used to determine layout-guess attribute shouldn't be picked from nested tables">

    Mozilla Bug 690222

  </a>

  <a target="_blank"

     href="https://bugzilla.mozilla.org/show_bug.cgi?id=696975"

     title="Extend the list of legitimate data table structures">

    Mozilla Bug 696975

  </a>

  <p id="display"></p>

  <div id="content" style="display: none"></div>

  <pre id="test">

  </pre>

  <!-- Table with role of grid -->

  <table id="table1" role="grid">

    <tr>

      <th>Sender</th>

      <th>Subject</th>

      <th>Date</th>

    </tr>

    <tr>

      <td>Marco</td>

      <td>Test</td>

      <td>June 12</td>

    </tr>

    <tr>

      <td>David</td>

      <td>Another test</td>

      <td>June 12</td>

    </tr>

    <tr>

      <td>Alex</td>

      <td>Third test</td>

      <td>June 12</td>

    </tr>

  </table>

   <!-- table with role of grid and datatable="0"-->

  <table id="table1.1" role="grid" datatable="0">

    <tr>

      <td>Cell1</td><td>cell2</td>

    </tr>

  </table>

  <!-- table with landmark role -->

  <table id="table2" role="main">

    <tr>

      <th>Sender</th>

      <th>Subject</th>

      <th>Date</th>

    </tr>

    <tr>

      <td>Marco</td>

      <td>Test</td>

      <td>June 12</td>

    </tr>

    <tr>

      <td>David</td>

      <td>Another test</td>

      <td>June 12</td>

    </tr>

    <tr>

      <td>Alex</td>

      <td>Third test</td>

      <td>June 12</td>

    </tr>

  </table>

  <!-- table with summary -->

  <table id="table3" summary="This is a table">

    <tr>

      <td>Cell1</td><td>cell2</td>

    </tr>

  </table>

  <!-- table with caption -->

  <table id="table4">

    <caption>This is a table</caption>

    <tr>

      <td>Cell1</td><td>cell2</td>

    </tr>

  </table>

  <!-- layout table with empty caption -->

  <table id="table4.2">

    <caption> </caption>

    <tr>

      <td>Cell1</td><td>cell2</td>

    </tr>

  </table>

  <!-- table with thead element -->

  <table id="table5">

    <thead>

      <tr>

        <td>Cell1</td><td>cell2</td>

      </tr>

    </thead>

  </table>

  <!-- table with tfoot element -->

  <table id="table5.1">

    <tfoot>

      <tr>

        <td>Cell1</td><td>cell2</td>

      </tr>

    </tfoot>

  </table>

  <!-- table with colgroup and col elements -->

  <table id="table5.2">

    <colgroup width="20"></colgroup>

    <tr>

      <td>Cell1</td><td>cell2</td>

    </tr>

  </table>

  <table id="table5.3">

    <col width="20">

    <tr>

      <td>Cell1</td><td>cell2</td>

    </tr>

  </table>

  <!-- table with th element -->

  <table id="table6">

    <tr>

      <th>Cell1</th><th>cell2</th>

    </tr>

  </table>

  <!-- table with headers attribute -->

  <table id="table6.2">

    <tr>

      <td headers="a">table6.2 cell</td>

    </tr>

  </table>

  <!-- table with scope attribute -->

  <table id="table6.2.2">

    <tr>

      <td scope="a">table6.2.2 cell</td>

    </tr>

  </table>

  <!-- table with abbr attribute -->

  <table id="table6.2.3">

    <tr>

      <td abbr="table6.2.3">table6.2.3 cell1</td>

    </tr>

  </table>

  <!-- table with abbr element -->

  <table id="table6.3">

    <tr>

      <td>table6.3 cell1</td>

      <td><abbr>table6.3 cell2</abbr></td>

    </tr>

  </table>

  <!-- table with abbr element having empty text node -->

  <table id="table6.4">

    <tr>

      <td>

        <abbr>abbr</abbr>

      </td>

    </tr>

  </table>

  <!-- table with abbr element and non-empty text node -->

  <table id="table6.5">

    <tr>

      <td>

        This is a really long text (<abbr>tiarlt</abbr>) inside layout table

      </td>

    </tr>

  </table>

  <!-- layout table with nested table -->

  <table id="table9">

    <tr>

      <td><table><tr><td>Cell</td></tr></table></td>

    </tr>

  </table>

  <!-- layout table with 1 column -->

  <table id="table10">

    <tr><td>Row1</td></tr>

    <tr><td>Row2</td></tr>

  </table>

  <!-- layout table with 1 row and purposely many columns -->

  <table id="table11">

    <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td><td>Col5</td></tr>

  </table>

  <!-- table with 5 columns -->

  <table id="table12">

    <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td><td>Col5</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td><td>Col5</td></tr>

  </table>

  <!-- table with a bordered cell -->

  <table id="table13" border="1" width="100%" bordercolor="#0000FF">

    <tr>

      <td bordercolor="#000000"> </td>

      <td bordercolor="#000000"> </td>

      <td bordercolor="#000000"> </td>

    </tr>

    <tr>

      <td bordercolor="#000000"> </td>

      <td bordercolor="#000000"> </td>

      <td bordercolor="#000000"> </td>

    </tr>

  </table>

  <!-- table with alternating row background colors -->

  <table id="table14" width="100%">

    <tr style="background-color: #0000FF;">

      <td> </td>

      <td> </td>

      <td> </td>

    </tr>

    <tr style="background-color: #00FF00;">

      <td> </td>

      <td> </td>

      <td> </td>

    </tr>

  </table>

  <!-- table with 3 columns and 21 rows -->

  <table id="table15" border="0">

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

  </table>

  <!-- layout table that has a 100% width -->

  <table id="table16" width="100%">

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

  </table>

  <!-- layout table that has a 95% width in pixels -->

  <table id="table17" width="98%">

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

    <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>

  </table>

  <!-- layout table with less than 10 columns -->

  <table id="table18">

    <tr>

      <td>Marco</td>

      <td>Test</td>

      <td>June 12</td>

    </tr>

    <tr>

      <td>David</td>

      <td>Another test</td>

      <td>June 12</td>

    </tr>

    <tr>

      <td>Alex</td>

      <td>Third test</td>

      <td>June 12</td>

    </tr>

  </table>

  <!-- layout table with embedded iframe -->

  <table id="table19">

    <tr><td><iframe id="frame"></iframe></td><td> </td><td> </td></tr>

    <tr><td> </td><td> </td><td> </td></tr>

    <tr><td> </td><td> </td><td> </td></tr>

    <tr><td> </td><td> </td><td> </td></tr>

  </table>

  <!-- tree grid, no layout table -->

  <table id="table20" role="treegrid">

    <tr role="treeitem"><td>Cell1</td><td>Cell2</td></tr>

  </table>

  <!-- layout table with nested data table containing data table elements -->

  <table id="table21">

    <tr>

      <td>

        <table>

          <caption>table</caption>

          <tr><td>Cell</td></tr>

        </table>

      </td>

    </tr>

  </table>

  <table id="table21.2">

    <tr>

      <td>

        <table>

          <colgroup width="20"></colgroup>

          <tr><th>Cell</th></tr>

        </table>

      </td>

    </tr>

  </table>

  <table id="table21.3">

    <tr>

      <td>

        <table>

          <col width="20"></col>

          <tr><th>Cell</th></tr>

        </table>

      </td>

    </tr>

  </table>

  <table id="table21.4">

    <tr>

      <td>

        <table>

          <tr><th>Cell</th></tr>

        </table>

      </td>

    </tr>

  </table>

  <table id="table21.5">

    <tr>

      <td>

        <table>

          <thead>

            <tr><td>Cell</td></tr>

          </thead>

        </table>

      </td>

    </tr>

  </table>

  <table id="table21.6">

    <tr>

      <td>

        <table>

          <tfoot>

            <tr><td>Cell</td></tr>

          </tfoot>

        </table>

      </td>

    </tr>

  </table>

  <!-- layout table with datatable="0" and tfoot element-->

  <table id="table22" datatable="0">

    <tfoot>

      <tr>

        <td>Cell1</td><td>cell2</td>

      </tr>

    </tfoot>

  </table>

  <table id="table23" border="1">

    <tr role="tablist">

      <td role="tab">Tab 1</td><td role="tab">Tab 2</td>

    </tr>

    <tr>

      <td role="tabpanel" colspan="2">Hello</td>

    </tr>

  </table>

  <table id="table24">↩

    <tr></tr>↩

    <tr>↩

      <td style="width: 1px;"></td>↩

      <td>↩

        <table></table>↩

      </td>↩

    </tr>↩

  </table>

  <!-- display:block table -->

  <table id="displayblock_table1" style="display:block">

    <tr><td>Row1</td></tr>

    <tr><td>Row2</td></tr>

  </table>

  <!-- MathML matrix -->

  <math>

    <mtable id="mtable1">

      <mtr>

        <mtd>

          <mn>1</mn>

        </mtd>

        <mtd>

          <mn>0</mn>

        </mtd>

      </mtr>

      <mtr>

        <mtd>

          <mn>0</mn>

        </mtd>

        <mtd>

          <mn>1</mn>

        </mtd>

      </mtr>

    </mtable>

  </math>

</body>

</html>