Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: os != 'mac'
- Manifest: accessible/tests/browser/mac/browser.toml
/* 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
"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");
}
);