gecko/accessible/tests/mochitest/events/test_aria_statechange.html

184 lines
5.0 KiB
HTML

<html>
<head>
<title>ARIA state change event testing</title>
<link rel="stylesheet" type="text/css"
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<script type="application/javascript"
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"
src="../states.js"></script>
<script type="application/javascript"
src="../events.js"></script>
<script type="application/javascript">
/**
* Do tests.
*/
var gQueue = null;
//gA11yEventDumpID = "eventdump"; // debugging
//gA11yEventDumpToConsole = true; // debugging
function expandNode(aID, aIsExpanded)
{
this.DOMNode = getNode(aID);
this.eventSeq = [
new expandedStateChecker(aIsExpanded, this.DOMNode)
];
this.invoke = function expandNode_invoke()
{
this.DOMNode.setAttribute("aria-expanded",
(aIsExpanded ? "true" : "false"));
};
this.getID = function expandNode_getID()
{
return prettyName(aID) + " aria-expanded changed to '" + aIsExpanded + "'";
};
}
function busyify(aID, aIsBusy)
{
this.DOMNode = getNode(aID);
this.eventSeq = [
new stateChangeChecker(STATE_BUSY, kOrdinalState, aIsBusy, this.DOMNode)
];
this.invoke = function busyify_invoke()
{
this.DOMNode.setAttribute("aria-busy", (aIsBusy ? "true" : "false"));
};
this.getID = function busyify_getID()
{
return prettyName(aID) + " aria-busy changed to '" + aIsBusy + "'";
};
}
function setAttrOfMixedType(aID, aAttr, aState, aValue)
{
this.DOMNode = getNode(aID);
this.eventSeq = [
new stateChangeChecker(aState, kOrdinalState,
aValue == "true", this.DOMNode)
];
if (hasState(aID, STATE_MIXED) || aValue == "mixed") {
this.eventSeq.push(
new stateChangeChecker(STATE_MIXED, kOrdinalState,
aValue == "mixed", this.DOMNode)
);
}
this.invoke = function setAttrOfMixedType_invoke()
{
this.DOMNode.setAttribute(aAttr, aValue);
};
this.getID = function setAttrOfMixedType_getID()
{
return prettyName(aID) + " " + aAttr + " changed to '" + aValue + "'";
};
}
function setPressed(aID, aValue)
{
this.__proto__ =
new setAttrOfMixedType(aID, "aria-pressed", STATE_PRESSED, aValue);
}
function setChecked(aID, aValue)
{
this.__proto__ =
new setAttrOfMixedType(aID, "aria-checked", STATE_CHECKED, aValue);
}
function buildQueueForAttrOfMixedType(aQueue, aID, aInvokerFunc)
{
var list = [ "", "undefined", "false", "true", "mixed" ];
for (var i = 0; i < list.length; i++) {
for (var j = i + 1; j < list.length; j++) {
// XXX: changes from/to "undefined"/"" shouldn't fire state change
// events, bug 472142.
aQueue.push(new aInvokerFunc(aID, list[i]));
aQueue.push(new aInvokerFunc(aID, list[j]));
}
}
}
function doTests()
{
gQueue = new eventQueue();
gQueue.push(new expandNode("section", true));
gQueue.push(new expandNode("section", false));
gQueue.push(new expandNode("div", true));
gQueue.push(new expandNode("div", false));
gQueue.push(new busyify("aria_doc", true));
gQueue.push(new busyify("aria_doc", false));
buildQueueForAttrOfMixedType(gQueue, "pressable", setPressed);
buildQueueForAttrOfMixedType(gQueue, "checkable", setChecked);
gQueue.invoke(); // Will call SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTests);
</script>
</head>
<body>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=551684"
title="No statechange event for aria-expanded on native HTML elements, is fired on ARIA widgets">
Mozilla Bug 551684
</a><br>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=648133"
title="fire state change event for aria-busy"
Mozilla Bug 648133
</a><br>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=467143"
title="mixed state change event is fired for focused accessible only"
Mozilla Bug 467143
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<div id="eventdump"></div>
<!-- aria-expanded -->
<div id="section" role="section" aria-expanded="false">expandable section</div>
<div id="div" aria-expanded="false">expandable native div</div>
<!-- aria-busy -->
<div id="aria_doc" role="document" tabindex="0">A document</div>
<!-- aria-pressed -->
<div id="pressable" role="button"></div>
<!-- aria-checked -->
<div id="checkable" role="checkbox"></div>
</body>
</html>