/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/* import-globals-from ../../mochitest/role.js */
loadScripts({ name:
"role.js", dir: MOCHITESTS_DIR });
/* import-globals-from ../../mochitest/attributes.js */
loadScripts({ name:
"attributes.js", dir: MOCHITESTS_DIR });
/**
* Helper function to test table consistency.
*/
function testTableConsistency(table, expectedRowCount, expectedColumnCount) {
is(table.getAttributeValue(
"AXRole"),
"AXTable",
"Correct role for table");
let tableChildren = table.getAttributeValue(
"AXChildren");
// XXX: Should be expectedRowCount+ExpectedColumnCount+1 children, rows (incl headers) + cols + headers
// if we're trying to match Safari.
is(
tableChildren.length,
expectedRowCount + expectedColumnCount,
"Table has children = rows (4) + cols (3)"
);
for (let i = 0; i < tableChildren.length; i++) {
let currChild = tableChildren[i];
if (i < expectedRowCount) {
is(
currChild.getAttributeValue(
"AXRole"),
"AXRow",
"Correct role for row"
);
}
else {
is(
currChild.getAttributeValue(
"AXRole"),
"AXColumn",
"Correct role for col"
);
is(
currChild.getAttributeValue(
"AXRoleDescription"),
"column",
"Correct role desc for col"
);
}
}
is(
table.getAttributeValue(
"AXColumnCount"),
expectedColumnCount,
"Table has correct column count."
);
is(
table.getAttributeValue(
"AXRowCount"),
expectedRowCount,
"Table has correct row count."
);
let cols = table.getAttributeValue(
"AXColumns");
is(cols.length, expectedColumnCount,
"Table has col list of correct length");
for (let i = 0; i < cols.length; i++) {
let currCol = cols[i];
let currChildren = currCol.getAttributeValue(
"AXChildren");
is(
currChildren.length,
expectedRowCount,
"Column has correct number of cells"
);
for (let j = 0; j < currChildren.length; j++) {
let currChild = currChildren[j];
is(
currChild.getAttributeValue(
"AXRole"),
"AXCell",
"Column child is cell"
);
}
}
let rows = table.getAttributeValue(
"AXRows");
is(rows.length, expectedRowCount,
"Table has row list of correct length");
for (let i = 0; i < rows.length; i++) {
let currRow = rows[i];
let currChildren = currRow.getAttributeValue(
"AXChildren");
is(
currChildren.length,
expectedColumnCount,
"Row has correct number of cells"
);
for (let j = 0; j < currChildren.length; j++) {
let currChild = currChildren[j];
is(currChild.getAttributeValue(
"AXRole"),
"AXCell",
"Row child is cell");
}
}
}
/**
* Test table, columns, rows
*/
addAccessibleTask(
`<table id=
"customers">
<tbody>
<tr id=
"firstrow"><th>Company</th><th>Contact</th><th>Country</th></tr>
<tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr>
<tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr>
<tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr>
</tbody>
</table>`,
async (browser, accDoc) => {
let table = getNativeInterface(accDoc,
"customers");
testTableConsistency(table, 4, 3);
const rowText = [
"Madrigal Electromotive GmbH",
"Lydia Rodarte-Quayle",
"Germany",
];
let reorder = waitForEvent(EVENT_REORDER,
"customers");
await SpecialPowers.spawn(browser, [rowText], _rowText => {
let tr = content.document.createElement(
"tr");
for (let t of _rowText) {
let td = content.document.createElement(
"td");
td.textContent = t;
tr.appendChild(td);
}
content.document.getElementById(
"customers").appendChild(tr);
});
await reorder;
let cols = table.getAttributeValue(
"AXColumns");
is(cols.length, 3,
"Table has col list of correct length");
for (let i = 0; i < cols.length; i++) {
let currCol = cols[i];
let currChildren = currCol.getAttributeValue(
"AXChildren");
is(currChildren.length, 5,
"Column has correct number of cells");
let lastCell = currChildren[currChildren.length - 1];
let cellChildren = lastCell.getAttributeValue(
"AXChildren");
is(cellChildren.length, 1,
"Cell has a single text child");
is(
cellChildren[0].getAttributeValue(
"AXRole"),
"AXStaticText",
"Correct role for cell child"
);
is(
cellChildren[0].getAttributeValue(
"AXValue"),
rowText[i],
"Correct text for cell"
);
}
reorder = waitForEvent(EVENT_REORDER,
"firstrow");
await SpecialPowers.spawn(browser, [], () => {
let td = content.document.createElement(
"td");
td.textContent =
"Ticker";
content.document.getElementById(
"firstrow").appendChild(td);
});
await reorder;
cols = table.getAttributeValue(
"AXColumns");
is(cols.length, 4,
"Table has col list of correct length");
is(
cols[cols.length - 1].getAttributeValue(
"AXChildren").length,
1,
"Last column has single child"
);
reorder = waitForEvent(
EVENT_REORDER,
e => e.accessible.role == ROLE_DOCUMENT
);
await SpecialPowers.spawn(browser, [], () => {
content.document.getElementById(
"customers").remove();
});
await reorder;
try {
cols[0].getAttributeValue(
"AXChildren");
ok(
false,
"Getting children from column of expired table should fail");
}
catch (e) {
ok(
true,
"Getting children from column of expired table should fail");
}
}
);
addAccessibleTask(
`<table id=
"table">
<tr>
<th colspan=
"2" id=
"header1">Header 1</th>
<th id=
"header2">Header 2</th>
</tr>
<tr>
<td id=
"cell1">one</td>
<td id=
"cell2" rowspan=
"2">two</td>
<td id=
"cell3">three</td>
</tr>
<tr>
<td id=
"cell4">four</td>
<td id=
"cell5">five</td>
</tr>
</table>`,
(browser, accDoc) => {
let table = getNativeInterface(accDoc,
"table");
let getCellAt = (col, row) =>
table.getParameterizedAttributeValue(
"AXCellForColumnAndRow", [col, row]);
function testCell(cell, expectedId, expectedColRange, expectedRowRange) {
is(
cell.getAttributeValue(
"AXDOMIdentifier"),
expectedId,
"Correct DOM Identifier"
);
Assert.deepEqual(
cell.getAttributeValue(
"AXColumnIndexRange"),
expectedColRange,
"Correct column range"
);
Assert.deepEqual(
cell.getAttributeValue(
"AXRowIndexRange"),
expectedRowRange,
"Correct row range"
);
}
testCell(getCellAt(0, 0),
"header1", [0, 2], [0, 1]);
testCell(getCellAt(1, 0),
"header1", [0, 2], [0, 1]);
testCell(getCellAt(2, 0),
"header2", [2, 1], [0, 1]);
testCell(getCellAt(0, 1),
"cell1", [0, 1], [1, 1]);
testCell(getCellAt(1, 1),
"cell2", [1, 1], [1, 2]);
testCell(getCellAt(2, 1),
"cell3", [2, 1], [1, 1]);
testCell(getCellAt(0, 2),
"cell4", [0, 1], [2, 1]);
testCell(getCellAt(1, 2),
"cell2", [1, 1], [1, 2]);
testCell(getCellAt(2, 2),
"cell5", [2, 1], [2, 1]);
let colHeaders = table.getAttributeValue(
"AXColumnHeaderUIElements");
Assert.deepEqual(
colHeaders.map(c => c.getAttributeValue(
"AXDOMIdentifier")),
[
"header1",
"header1",
"header2"],
"Correct column headers"
);
}
);
addAccessibleTask(
`<table id=
"table">
<tr>
<td>Foo</td>
</tr>
</table>`,
(browser, accDoc) => {
// Make sure we guess this table to be a layout table.
testAttrs(
findAccessibleChildByID(accDoc,
"table"),
{
"layout-guess":
"true" },
true
);
let table = getNativeInterface(accDoc,
"table");
is(
table.getAttributeValue(
"AXRole"),
"AXGroup",
"Correct role (AXGroup) for layout table"
);
let children = table.getAttributeValue(
"AXChildren");
is(
children.length,
1,
"Layout table has single child (no additional columns)"
);
}
);
addAccessibleTask(
`<div id=
"table" role=
"table">
<span style=
"display: block;">
<div role=
"row">
<div role=
"cell">Cell 1</div>
<div role=
"cell">Cell 2</div>
</div>
</span>
<span style=
"display: block;">
<div role=
"row">
<span style=
"display: block;">
<div role=
"cell">Cell 3</div>
<div role=
"cell">Cell 4</div>
</span>
</div>
</span>
</div>`,
async (browser, accDoc) => {
let table = getNativeInterface(accDoc,
"table");
testTableConsistency(table, 2, 2);
}
);
/*
* After executing function 'change' which operates on 'elem', verify the specified
* 'event' (if not null) is fired on elem. After the event, check if the given
* native accessible 'table' is a layout or data table by role using 'isLayout'.
*/
async
function testIsLayout(table, elem, event, change, isLayout) {
info(
"Changing " +
elem +
", expecting table change to " +
(isLayout ?
"AXGroup" :
"AXTable")
);
const toWait = event ? waitForEvent(event, elem) :
null;
await change();
if (toWait) {
await toWait;
}
let intendedRole = isLayout ?
"AXGroup" :
"AXTable";
await untilCacheIs(
() => table.getAttributeValue(
"AXRole"),
intendedRole,
"Table role correct after change"
);
}
/*
* The following attributes should fire an attribute changed
* event, which in turn invalidates the layout-table cache
* associated with the given table. After adding and removing
* each attr, verify the table is a data or layout table,
* appropriately. Attrs: summary, abbr, scope, headers
*/
addAccessibleTask(
`<table id=
"table" summary=
"example summary">
<tr role=
"presentation">
<td id=
"cellOne">cell1</td>
<td>cell2</td>
</tr>
<tr>
<td id=
"cellThree">cell3</td>
<td>cell4</td>
</tr>
</table>`,
async (browser, accDoc) => {
let table = getNativeInterface(accDoc,
"table");
// summary attr should take precedence over role="presentation" to make this
// a data table
is(table.getAttributeValue(
"AXRole"),
"AXTable",
"Table is data table");
info(
"Removing summary attr");
// after summary is removed, we should have a layout table
await testIsLayout(
table,
"table",
EVENT_OBJECT_ATTRIBUTE_CHANGED,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document.getElementById(
"table").removeAttribute(
"summary");
});
},
true
);
info(
"Setting abbr attr");
// after abbr is set we should have a data table again
await testIsLayout(
table,
"cellThree",
EVENT_OBJECT_ATTRIBUTE_CHANGED,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document
.getElementById(
"cellThree")
.setAttribute(
"abbr",
"hello world");
});
},
false
);
info(
"Removing abbr attr");
// after abbr is removed we should have a layout table again
await testIsLayout(
table,
"cellThree",
EVENT_OBJECT_ATTRIBUTE_CHANGED,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document.getElementById(
"cellThree").removeAttribute(
"abbr");
});
},
true
);
info(
"Setting scope attr");
// after scope is set we should have a data table again
await testIsLayout(
table,
"cellThree",
EVENT_OBJECT_ATTRIBUTE_CHANGED,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document
.getElementById(
"cellThree")
.setAttribute(
"scope",
"col");
});
},
false
);
info(
"Removing scope attr");
// remove scope should give layout
await testIsLayout(
table,
"cellThree",
EVENT_OBJECT_ATTRIBUTE_CHANGED,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document.getElementById(
"cellThree").removeAttribute(
"scope");
});
},
true
);
info(
"Setting headers attr");
// add headers attr should give data
await testIsLayout(
table,
"cellThree",
EVENT_OBJECT_ATTRIBUTE_CHANGED,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document
.getElementById(
"cellThree")
.setAttribute(
"headers",
"cellOne");
});
},
false
);
info(
"Removing headers attr");
// remove headers attr should give layout
await testIsLayout(
table,
"cellThree",
EVENT_OBJECT_ATTRIBUTE_CHANGED,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document
.getElementById(
"cellThree")
.removeAttribute(
"headers");
});
},
true
);
}
);
/*
* The following style changes should fire a table style changed
* event, which in turn invalidates the layout-table cache
* associated with the given table.
*/
addAccessibleTask(
`<table id=
"table">
<tr id=
"rowOne">
<td id=
"cellOne">cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td>cell4</td>
</tr>
</table>`,
async (browser, accDoc) => {
let table = getNativeInterface(accDoc,
"table");
// we should start as a layout table
is(table.getAttributeValue(
"AXRole"),
"AXGroup",
"Table is layout table");
info(
"Adding cell border");
// after cell border added, we should have a data table
await testIsLayout(
table,
"cellOne",
null,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document
.getElementById(
"cellOne")
.style.setProperty(
"border",
"5px solid green");
});
},
false
);
info(
"Removing cell border");
// after cell border removed, we should have a layout table
await testIsLayout(
table,
"cellOne",
null,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document
.getElementById(
"cellOne")
.style.removeProperty(
"border");
});
},
true
);
info(
"Adding row background");
// after row background added, we should have a data table
await testIsLayout(
table,
"rowOne",
null,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document
.getElementById(
"rowOne")
.style.setProperty(
"background-color",
"green");
});
},
false
);
info(
"Removing row background");
// after row background removed, we should have a layout table
await testIsLayout(
table,
"rowOne",
null,
async () => {
await SpecialPowers.spawn(browser, [], () => {
content.document
.getElementById(
"rowOne")
.style.removeProperty(
"background-color");
});
},
true
);
}
);
/*
* thead/tbody elements with click handlers should:
* (a) render as AXGroup elements
* (b) expose their rows as part of their parent table's AXRows array
*/
addAccessibleTask(
`<table id=
"table">
<thead id=
"thead">
<tr><td>head row</td></tr>
</thead>
<tbody id=
"tbody">
<tr><td>body row</td></tr>
<tr><td>another body row</td></tr>
</tbody>
</table>`,
async (browser, accDoc) => {
let table = getNativeInterface(accDoc,
"table");
// No click handlers present on thead/tbody
let tableChildren = table.getAttributeValue(
"AXChildren");
let tableRows = table.getAttributeValue(
"AXRows");
is(tableChildren.length, 4,
"Table has four children (3 row + 1 col)");
is(tableRows.length, 3,
"Table has three rows");
for (let i = 0; i < tableChildren.length; i++) {
const child = tableChildren[i];
if (i < 3) {
is(
child.getAttributeValue(
"AXRole"),
"AXRow",
"Table's first 3 children are rows"
);
}
else {
is(
child.getAttributeValue(
"AXRole"),
"AXColumn",
"Table's last child is a column"
);
}
}
const reorder = waitForEvent(EVENT_REORDER);
await invokeContentTask(browser, [], () => {
const head = content.document.getElementById(
"thead");
const body = content.document.getElementById(
"tbody");
head.addEventListener(
"click",
function () {});
body.addEventListener(
"click",
function () {});
});
await reorder;
// Click handlers present
tableChildren = table.getAttributeValue(
"AXChildren");
is(tableChildren.length, 3,
"Table has three children (2 groups + 1 col)");
is(
tableChildren[0].getAttributeValue(
"AXRole"),
"AXGroup",
"Child one is a group"
);
is(
tableChildren[0].getAttributeValue(
"AXChildren").length,
1,
"Child one has one child"
);
is(
tableChildren[1].getAttributeValue(
"AXRole"),
"AXGroup",
"Child two is a group"
);
is(
tableChildren[1].getAttributeValue(
"AXChildren").length,
2,
"Child two has two children"
);
is(
tableChildren[2].getAttributeValue(
"AXRole"),
"AXColumn",
"Child three is a col"
);
tableRows = table.getAttributeValue(
"AXRows");
is(tableRows.length, 3,
"Table has three rows");
}
);
