gecko/accessible/tests/mochitest/test_relations.html

210 lines
7.6 KiB
HTML

<html>
<head>
<title>nsIAccessible::getAccessibleRelated() tests</title>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<script type="application/javascript"
src="chrome://mochikit/content/MochiKit/packed.js"></script>
<script type="application/javascript"
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript"
src="chrome://mochikit/content/a11y/accessible/common.js"></script>
<script type="application/javascript"
src="chrome://mochikit/content/a11y/accessible/relations.js"></script>
<script type="application/javascript"
src="chrome://mochikit/content/a11y/accessible/role.js"></script>
<script type="application/javascript">
function doTest()
{
// html:label@for
testRelation("label1", RELATION_LABEL_FOR, "checkbox1");
testRelation("checkbox1", RELATION_LABELLED_BY, "label1");
// aria-labelledby
testRelation("label2", RELATION_LABEL_FOR, "checkbox2");
testRelation("checkbox2", RELATION_LABELLED_BY, "label2");
// aria-labelledby, multiple relations
testRelation("label3", RELATION_LABEL_FOR, "checkbox3");
testRelation("label4", RELATION_LABEL_FOR, "checkbox3");
testRelation("checkbox3", RELATION_LABELLED_BY, ["label3", "label4"]);
// aria-describedby
testRelation("descr1", RELATION_DESCRIPTION_FOR, "checkbox4");
testRelation("checkbox4", RELATION_DESCRIBED_BY, "descr1");
// aria-describedby, multiple relations
testRelation("descr2", RELATION_DESCRIPTION_FOR, "checkbox5");
testRelation("descr3", RELATION_DESCRIPTION_FOR, "checkbox5");
testRelation("checkbox5", RELATION_DESCRIBED_BY, ["descr2", "descr3"]);
// aria_owns, multiple relations
testRelation("treeitem1", RELATION_NODE_CHILD_OF, "tree");
testRelation("treeitem2", RELATION_NODE_CHILD_OF, "tree");
// 'node child of' relation for outlineitem role
testRelation("treeitem3", RELATION_NODE_CHILD_OF, "tree");
testRelation("treeitem4", RELATION_NODE_CHILD_OF, "tree");
testRelation("treeitem5", RELATION_NODE_CHILD_OF, "treeitem4");
testRelation("treeitem6", RELATION_NODE_CHILD_OF, "treeitem5");
// 'node child of' relation for row role of treegrid
testRelation("treegridrow1", RELATION_NODE_CHILD_OF, "treegrid");
testRelation("treegridrow2", RELATION_NODE_CHILD_OF, "treegrid");
testRelation("treegridrow3", RELATION_NODE_CHILD_OF, "treegridrow2");
// 'node child of' relation for the document having window, returns
// direct accessible parent (fixed in bug 419770).
var iframeElmObj = {};
var iframeAcc = getAccessible("iframe", null, iframeElmObj);
var iframeDoc = iframeElmObj.value.contentDocument;
var iframeDocAcc = getAccessible(iframeDoc);
testRelation(iframeDocAcc, RELATION_NODE_CHILD_OF, iframeAcc);
// aria-controls
testRelation("tabpanel", RELATION_CONTROLLED_BY, "tab");
testRelation("tab", RELATION_CONTROLLER_FOR, "tabpanel");
// aria-controls, multiple relations
testRelation("lr1", RELATION_CONTROLLED_BY, "button");
testRelation("lr2", RELATION_CONTROLLED_BY, "button");
testRelation("button", RELATION_CONTROLLER_FOR, ["lr1", "lr2"]);
// aria-flowto
testRelation("flowto", RELATION_FLOWS_TO, "flowfrom");
testRelation("flowfrom", RELATION_FLOWS_FROM, "flowto");
// aria-flowto, multiple relations
testRelation("flowto1", RELATION_FLOWS_TO, ["flowfrom1", "flowfrom2"]);
testRelation("flowfrom1", RELATION_FLOWS_FROM, "flowto1");
testRelation("flowfrom2", RELATION_FLOWS_FROM, "flowto1");
// 'default button' relation
testRelation("input", RELATION_DEFAULT_BUTTON, "submit");
// 'described by'/'description for' relation for html:table and
// html:caption
testRelation("caption", RELATION_DESCRIPTION_FOR, "table");
testRelation("table", RELATION_DESCRIBED_BY, "caption");
// 'labelled by'/'label for' relation for html:fieldset and
// html:legend
testRelation("legend", RELATION_LABEL_FOR, "fieldset");
testRelation("fieldset", RELATION_LABELLED_BY, "legend");
// 'embeds' relation for root accessible
var docAcc = null;
var parentOfDocAcc = null;
var parentDocAcc = getAccessible(document);
do {
docAcc = parentDocAcc;
parentOfDocAcc = getAccessible(docAcc.parent, [nsIAccessNode]);
parentDocAcc = getAccessible(parentOfDocAcc.accessibleDocument,
[nsIAccessible]);
} while (getRole(parentDocAcc) != ROLE_CHROME_WINDOW)
testRelation(parentDocAcc, RELATION_EMBEDS, docAcc);
// finish test
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTest);
</script>
</head>
<body>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=475298"
title="mochitests for accessible relations">
Mozilla Bug 475298
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<label id="label1" for="checkbox1">label</label>
<input id="checkbox1" />
<span id="label2">label</span>
<span role="checkbox" id="checkbox2" aria-labelledby="label2"></span>
<span id="label3">label1</span>
<span id="label4">label2</span>
<span role="checkbox" id="checkbox3" aria-labelledby="label3 label4"></span>
<span id="descr1">description</span>
<span role="checkbox" id="checkbox4" aria-describedby="descr1"></span>
<span id="descr2">description1</span>
<span id="descr3">description2</span>
<span role="checkbox" id="checkbox5" aria-describedby="descr2 descr3"></span>
<div role="treeitem" id="treeitem1">Yellow</div>
<div role="treeitem" id="treeitem2">Orange</div>
<div id="tree" role="tree" aria-owns="treeitem1 treeitem2">
<div role="treeitem" id="treeitem3">Blue</div>
<div role="treeitem" id="treeitem4" aria-level="1">Green</div>
<div role="treeitem" id="treeitem5" aria-level="2">Light green</div>
<div role="group">
<div role="treeitem" id="treeitem6">Super light green</div>
</div>
</div>
<div role="treegrid" id="treegrid">
<div role="row" id="treegridrow1">
<span role="gridcell">cell1</span><span role="gridcell">cell2</span>
</div>
<div role="row" id="treegridrow2" aria-level="1">
<span role="gridcell">cell3</span><span role="gridcell">cell4</span>
</div>
<div role="row" id="treegridrow3" aria-level="2">
<span role="gridcell">cell5</span><span role="gridcell">cell6</span>
</div>
</div>
<iframe id="iframe"></iframe>
<div id="tablist" role="tablist">
<div id="tab" role="tab" aria-controls="tabpanel">tab</div>
</div>
<div id="tabpanel" role="tabpanel">tabpanel</div>
<div id="lr1" aria-live="assertive">1</div>
<div id="lr2" aria-live="assertive">a</div>
<input type="button" id="button" aria-controls="lr1 lr2"
onclick="getNode('lr1').textContent += '1'; getNode('lr2').textContent += 'a';"/>
<span id="flowto" aria-flowto="flowfrom">flow to</span>
<span id="flowfrom">flow from</span>
<span id="flowto1" aria-flowto="flowfrom1 flowfrom2">flow to</span>
<span id="flowfrom1">flow from</span>
<span id="flowfrom2">flow from</span>
<form>
<input id="input" />
<input type="submit" id="submit" />
</form>
<table id="table">
<caption id="caption">tabple caption</caption>
<tr>
<td>cell1</td><td>cell2</td>
</tr>
</table>
<fieldset id="fieldset">
<legend id="legend">legend</legend>
<input />
</fieldset>
</body>
</html>