Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/C/Firefox/accessible/tests/mochitest/tree/   (Browser von der Mozilla Stiftung Version 136.0.1©)  Datei vom 10.2.2025 mit Größe 12 kB image not shown  

Quelle  test_table.html   Sprache: HTML

 
 products/Sources/formale Sprachen/C/Firefox/accessible/tests/mochitest/tree/test_table.html


<!DOCTYPE html>
<html>
<head>
  <title>HTML 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">
    function doTest() {
      // ////////////////////////////////////////////////////////////////////////
      // tables having captions

      // Two captions, first is used, second is ignored.
      var accTree =
        { TABLE: [
          { CAPTION: [
            {
              role: ROLE_TEXT_LEAF,
              name: "caption",
             },
          ] },
          { ROW: [
            { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] },
            { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] },
          ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] },
          ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] },
          ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] },
          ] },
        ] };

      testAccessibleTree("table", accTree);

      // One caption, empty text, caption is included.
      accTree =
        { TABLE: [
          { CAPTION: [ ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] },
          ] },
        ] };

      testAccessibleTree("table_caption_empty", accTree);

      // Two captions, first has empty text, second is ignored.
      accTree =
        { TABLE: [
          { CAPTION: [ ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] },
          ] },
        ] };

      testAccessibleTree("table_caption_firstempty", accTree);

      // One caption, placed in the end of table. In use.
      accTree =
        { TABLE: [
          { CAPTION: [
            {
              role: ROLE_TEXT_LEAF,
              name: "caption",
             },
          ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] },
          ] },
        ] };

      testAccessibleTree("table_caption_intheend", accTree);

      // One caption, collapsed to zero width and height. In use.
      accTree =
        { TABLE: [
          { CAPTION: [
            {
              role: ROLE_TEXT_LEAF,
              name: "caption",
             },
          ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] },
          ] },
        ] };

      testAccessibleTree("table_caption_collapsed", accTree);

      // ////////////////////////////////////////////////////////////////////////
      // table2 (consist of one column)

      accTree = {
        role: ROLE_TABLE,
        children: [
          {
            role: ROLE_ROW,
            children: [
              {
                role: ROLE_COLUMNHEADER,
              },
            ],
          },
          {
            role: ROLE_ROW,
            children: [
              {
                role: ROLE_CELL,
              },
            ],
          },
        ],
      };

      testAccessibleTree("table2", accTree);

      // ////////////////////////////////////////////////////////////////////////
      // table3 (consist of one row)

      accTree = {
        role: ROLE_TABLE,
        children: [
          {
            role: ROLE_ROW,
            children: [
              {
                role: ROLE_ROWHEADER,
              },
              {
                role: ROLE_CELL,
              },
            ],
          },
        ],
      };

      testAccessibleTree("table3", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // table4 (display: table-row)
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [
              { TEXT_LEAF: [ ] },
            ] },
          ] } ],
        };
      testAccessibleTree("table4", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // table5 (tbody with display: block should not get accessible)
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [
              { TEXT_LEAF: [ ] },
            ] },
          ] },
        ] };
      testAccessibleTree("table5", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // log table
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [
              { TEXT_LEAF: [ ] },
            ] },
          ] },
        ] };
      testAccessibleTree("logtable", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // display:block table
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [
              { TEXT_LEAF: [ ] },
            ] },
          ] },
        ] };
      testAccessibleTree("block_table", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // display:inline table
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [
              { TEXT_LEAF: [ ] },
            ] },
            { CELL: [
              { TEXT_LEAF: [ ] },
            ] },
          ] },
        ] };
      testAccessibleTree("inline_table1", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // display:inline table
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [
              { TABLE: [
                { ROW: [
                  { CELL: [
                    { TEXT_LEAF: [ ] },
                  ] },
                ] },
              ] },
            ] },
          ] },
        ] };
      testAccessibleTree("table_containing_inlinetable", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // table with a cell that has display:block
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [
              { TEXT_LEAF: [ ] },
            ] },
            { CELL: [
              { TEXT_LEAF: [ ] },
            ] },
          ] },
        ] };
      testAccessibleTree("table_containing_block_cell", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // A table with all elements being display:block, including a row group.
      // This makes us fall back to the ARIAGridRowAccessible.
      // Strange example from Gmail.
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [
              { TEXT_LEAF: [ ] },
            ] },
          ] },
        ] };
        testAccessibleTree("table_all_display_block", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // A table with a display:block tbody that has an aria role
      // The tbody should get an accessible with the desired role.
      accTree =
        { TABLE: [
          { DIALOG: [
            { TEXT_CONTAINER: [
              { TEXT_CONTAINER: [
                { TEXT_LEAF: [ ] },
              ] },
            ] },
          ] },
        ] };
        testAccessibleTree("table_with_block_tbody_and_role", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // A table with a display:block tbody that is focusable
      // The tbody should get a grouping accessible.
      accTree =
        { TABLE: [
          { ROWGROUP: [
            { ROW: [
              { CELL: [
                { TEXT_LEAF: [ ] },
              ] },
            ] },
          ] },
        ] };
        testAccessibleTree("table_with_focusable_block_tbody", accTree);

      // ///////////////////////////////////////////////////////////////////////
      // Test that the CSS position property doesn't stop th elements from
      // reporting the proper columnheader, rowheader roles.
      accTree =
        { TABLE: [
          { ROW: [
            { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] },
            { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] },
            { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] },
            { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] },
            { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] },
          ] },
          { ROW: [
            { ROWHEADER: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ ] },
            { ROWHEADER: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ ] },
            { ROWHEADER: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ ] },
            { ROWHEADER: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ ] },
            { ROWHEADER: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ ] },
          ] },
        ] };
      testAccessibleTree("table_containing_pos_styled_th", accTree);

      SimpleTest.finish();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTest);
  </script>
</head>
<body>

  <a target="_blank"
     title="When a table has only one column per row and that column happens to be a column header its role is exposed wrong"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=529621">
    Mozilla Bug 529621
  </a>
  <a target="_blank"
     title="when div has display style table-row"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=727722">
    Mozilla Bug 727722
  </a>
  <p id="display"></p>
  <div id="content" style="display: none"></div>
  <pre id="test">
  </pre>

  <table id="table">
    <thead>
      <tr>
        <th>col1</th><th>col2</th>
      </tr>
    </thead>
    <caption>caption</caption>
    <tbody>
      <tr>
        <td>cell1</td><td>cell2</td>
      </tr>
    </tbody>
    <tr>
      <td>cell3</td><td>cell4</td>
    </tr>
    <caption>caption2</caption>
    <tfoot>
      <tr>
        <td>cell5</td><td>cell6</td>
      </tr>
    </tfoot>
  </table>

  <table id="table_caption_empty">
    <caption></caption>
    <tr>
      <td>cell1</td><td>cell2</td>
    </tr>
  </table>

  <table id="table_caption_firstempty">
    <caption></caption>
    <tr>
      <td>cell1</td><td>cell2</td>
    </tr>
    <caption>caption</caption>
  </table>

  <table id="table_caption_intheend">
    <tr>
      <td>cell1</td><td>cell2</td>
    </tr>
    <caption>caption</caption>
  </table>

  <table id="table_caption_collapsed">
    <caption style="width: 0; height: 0">caption</caption>
    <tr>
      <td>cell1</td><td>cell2</td>
    </tr>
  </table>
  <table id="table2">
    <thead>
      <tr>
        <th>colheader</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>bla</td>
      </tr>
    </tbody>
  </table>

  <table id="table3">
    <tr>
      <th>rowheader</th>
      <td>cell</td>
    </tr>
  </table>

  <table id="table4">
    <div style="display: table-row">
      <td>cell1</td>
    </div>
  </table>

  <table id="table5">
    <tbody style="display:block;">
      <tr>
        <td>bla</td>
      </tr>
    </tbody>
  </table>

  <table id="logtable" role="log"><tr><td>blah</td></tr></table>

  <table id="block_table" style="display: block;">
    <tr>
      <td>bla</td>
    </tr>
  </table>

  <table id="inline_table1" border="1" style="display:inline">
    <tr>
     <td>table1 cell1</td>
     <td>table1 cell2</td>
    </tr>
   </table>

   <table id="table_containing_inlinetable"><tr><td>
     <table id="inline_table2" border="1" style="display:inline">
       <tr id="tr_in_inline_table2">
         <td id="td_in_inline_table2">cell</td>
       </tr>
     </table>
   </td></tr></table>

  <table id="table_containing_block_cell">
    <tr>
      <td>Normal cell</td>
      <td style="display: block;">Block cell</td>
    </tr>
  </table>
  <table id="table_all_display_block" style="display:block;">
    <tbody style="display:block;">
      <tr style="display:block;">
        <td style="display:block;">text</td>
      </tr>
    </tbody>
  </table>

  <table id="table_with_block_tbody_and_role">
    <tbody style="display:block;" role="dialog">
      <tr>
        <td>text</td>
      </tr>
    </tbody>
  </table>

  <table id="table_with_focusable_block_tbody">
    <tbody style="display:block;" tabindex="0">
      <tr>
        <td>text</td>
      </tr>
    </tbody>
  </table>

  <table id="table_containing_pos_styled_th">
    <tr>
      <th style="position: static">static colheader</th>
      <th style="position: relative">relative colheader</th>
      <th style="position: absolute">absolute colheader</th>
      <th style="position: fixed">fixed colheader</th>
      <th style="position: sticky">sticky colheader</th>
    </tr>
    <tr>
      <th style="position: static">static rowheader</th>
      <td/>
      <th style="position: relative">relative rowheader</th>
      <td/>
      <th style="position: absolute">absolute rowheader</th>
      <td/>
      <th style="position: fixed">fixed rowheader</th>
      <td/>
      <th style="position: sticky">sticky rowheader</th>
      <td/>
    </tr>
  </table>
</body>
</html>

Messung V0.5
C=94 H=95 G=94

¤ Dauer der Verarbeitung: 0.6 Sekunden  ¤

*© Formatika GbR, Deutschland




Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.