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