test_mtable.html - mozsearch

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

  <title>MathML table tests</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="../role.js"></script>

  <script type="application/javascript"

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

  <script type="application/javascript">

    function doTest() {

      // 'Simple' table

      var idxes = [

        [0, 1],

        [2, 3],

];

      testTableIndexes("simple", idxes);

      var cellsArray = [

        [kDataCell, kDataCell],

        [kDataCell, kDataCell],

];

      var rowsArray = [ROLE_MATHML_TABLE_ROW, ROLE_MATHML_TABLE_ROW];

      testTableStruct("simple", cellsArray, kNoColumnHeader,

                      "", "", kMathTable, rowsArray);

      // 'Complex' table

      idxes = [

        [0, 0, 0],

        [1, 1, 2],

        [1, 1, 3],

];

      testTableIndexes("complex", idxes);

      cellsArray = [

        [kDataCell,   kColSpanned, kColSpanned],

        [kDataCell,   kColSpanned, kDataCell],

        [kRowSpanned, kSpanned,    kDataCell],

];

      rowsArray = [

        ROLE_MATHML_TABLE_ROW,

        ROLE_MATHML_TABLE_ROW,

        ROLE_MATHML_TABLE_ROW,

];

      testTableStruct("complex", cellsArray, kNoColumnHeader,

                      "", "", kMathTable, rowsArray);

      // 'Simple' table with mlabeledtr

      // At the moment we do not implement mlabeledtr but just hide the label

      // with display: none. Thus we just test the role for now. See bug 689641.

      idxes = [[0]];

      testTableIndexes("simple_label", idxes);

      cellsArray = [[kDataCell]];

      rowsArray = [ROLE_MATHML_LABELED_ROW];

      testTableStruct("simple_label", cellsArray, kNoColumnHeader,

                      "", "", kMathTable, rowsArray);

      // Test that a non-table display style still generates the proper

      // roles in the accessibility tree.

      const table_tree = {

        MATHML_TABLE: [{↩

            MATHML_TABLE_ROW: [{ MATHML_CELL: [{ TEXT_LEAF: [] }] }]↩

}],

};

      testAccessibleTree("table_with_display_block_mtd", table_tree);

      // Equivalent to the above test but with display: block mtr.

      testAccessibleTree("table_with_display_block_mtr", table_tree);

      // Equivalent to the above test but with display: block mtable.

      testAccessibleTree("table_with_display_block", table_tree);

      SimpleTest.finish();

    SimpleTest.waitForExplicitFinish();

    addA11yLoadEvent(doTest);

  </script>

</head>

<body>

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

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

  <pre id="test">

  </pre>

  <math>

    <mtable id="simple">

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

    <mtable id="complex">

      <mtr>

        <mtd columnspan="3">

          <mtext>1 x 3</mtext>

        </mtd>

      </mtr>

      <mtr>

        <mtd rowspan="2" columnspan="2">

          <mtext>2 x 2</mtext>

        </mtd>

        <mtd>

          <mtext>1 x 1</mtext>

        </mtd>

      </mtr>

      <mtr>

        <mtd>

          <mtext>1 x 1</mtext>

        </mtd>

      </mtr>

    </mtable>

    <mtable id="simple_label">

      <mlabeledtr>

        <mtd><mtext>1</mtext></mtd>

        <mtd><mtext>label</mtext></mtd>

      </mlabeledtr>

    </mtable>

    <mtable id="table_with_display_block_mtd">

      <mtr>

        <mtd style="display: block">test</mtd>

      </mtr>

    </mtable>

    <mtable id="table_with_display_block_mtr">

      <mtr style="display: block">

        <mtd>test</mtd>

      </mtr>

    </mtable>

    <mtable id="table_with_display_block" style="display: block">

      <mtr>

        <mtd>test</mtd>

      </mtr>

    </mtable>

  </math>

</body>

</html>