diff options
Diffstat (limited to 'accessible/tests/mochitest/events/test_valuechange.html')
| -rw-r--r-- | accessible/tests/mochitest/events/test_valuechange.html | 315 |
1 files changed, 315 insertions, 0 deletions
diff --git a/accessible/tests/mochitest/events/test_valuechange.html b/accessible/tests/mochitest/events/test_valuechange.html new file mode 100644 index 0000000000..1ad3c0359d --- /dev/null +++ b/accessible/tests/mochitest/events/test_valuechange.html @@ -0,0 +1,315 @@ +<html> + +<head> + <title>Accessible value change events testing</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 src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> + + <script type="application/javascript" + src="../common.js"></script> + <script type="application/javascript" + src="../events.js"></script> + + <script type="application/javascript" + src="../value.js"></script> + + <script type="application/javascript"> + /** + * Do tests. + */ + var gQueue = null; + + // Value change invoker + function changeARIAValue(aNodeOrID, aValuenow, aValuetext) { + this.DOMNode = getNode(aNodeOrID); + this.eventSeq = [ new invokerChecker(aValuetext ? + EVENT_TEXT_VALUE_CHANGE : + EVENT_VALUE_CHANGE, this.DOMNode), + ]; + + this.invoke = function changeARIAValue_invoke() { + // Note: this should not fire an EVENT_VALUE_CHANGE when aria-valuetext + // is not empty + if (aValuenow != undefined) + this.DOMNode.setAttribute("aria-valuenow", aValuenow); + + // Note: this should always fire an EVENT_VALUE_CHANGE + if (aValuetext != undefined) + this.DOMNode.setAttribute("aria-valuetext", aValuetext); + }; + + this.check = function changeARIAValue_check() { + var acc = getAccessible(aNodeOrID, [nsIAccessibleValue]); + if (!acc) + return; + + // Note: always test against valuetext first because the existence of + // aria-valuetext takes precedence over aria-valuenow in gecko. + is(acc.value, (aValuetext != undefined) ? aValuetext : aValuenow, + "Wrong value of " + prettyName(aNodeOrID)); + }; + + this.getID = function changeARIAValue_getID() { + return prettyName(aNodeOrID) + " value changed"; + }; + } + + function changeValue(aID, aValue) { + this.DOMNode = getNode(aID); + this.eventSeq = [new invokerChecker(EVENT_TEXT_VALUE_CHANGE, + this.DOMNode), + ]; + + this.invoke = function changeValue_invoke() { + this.DOMNode.value = aValue; + }; + + this.check = function changeValue_check() { + var acc = getAccessible(this.DOMNode); + is(acc.value, aValue, "Wrong value for " + prettyName(aID)); + }; + + this.getID = function changeValue_getID() { + return prettyName(aID) + " value changed"; + }; + } + + function changeProgressValue(aID, aValue) { + this.DOMNode = getNode(aID); + this.eventSeq = [new invokerChecker(EVENT_VALUE_CHANGE, this.DOMNode)]; + + this.invoke = function changeProgressValue_invoke() { + this.DOMNode.value = aValue; + }; + + this.check = function changeProgressValue_check() { + var acc = getAccessible(this.DOMNode); + is(acc.value, aValue + "%", "Wrong value for " + prettyName(aID)); + }; + + this.getID = function changeProgressValue_getID() { + return prettyName(aID) + " value changed"; + }; + } + + function changeRangeValueWithMouse(aID) { + this.DOMNode = getNode(aID); + this.eventSeq = [new invokerChecker(EVENT_VALUE_CHANGE, this.DOMNode)]; + + this.invoke = function changeRangeValue_invoke() { + synthesizeMouse(getNode(aID), 5, 5, { }); + }; + + this.finalCheck = function changeRangeValue_finalCheck() { + var acc = getAccessible(this.DOMNode); + is(acc.value, "0", "Wrong value for " + prettyName(aID)); + }; + + this.getID = function changeRangeValue_getID() { + return prettyName(aID) + " range value changed"; + }; + } + + function changeRangeValueWithA11yAPI(aID) { + this.DOMNode = getNode(aID); + let inputChecker = new invokerChecker("input", this.DOMNode); + inputChecker.eventTarget = "element"; + + let changeChecker = new invokerChecker("change", this.DOMNode); + changeChecker.eventTarget = "element"; + + this.eventSeq = [ + inputChecker, + changeChecker, + new invokerChecker(EVENT_VALUE_CHANGE, this.DOMNode), + ]; + + this.invoke = function changeRangeValue_invoke() { + this.DOMNode.focus(); + let acc = getAccessible(this.DOMNode, [nsIAccessibleValue]); + acc.currentValue = 0; + this.DOMNode.blur(); + }; + + this.finalCheck = function changeRangeValue_finalCheck() { + var acc = getAccessible(this.DOMNode); + is(acc.value, "0", "Wrong value for " + prettyName(aID)); + }; + + this.getID = function changeRangeValue_getID() { + return prettyName(aID) + " range value changed"; + }; + } + + function changeSelectValue(aID, aKey, aValue) { + this.eventSeq = + [ new invokerChecker(EVENT_TEXT_VALUE_CHANGE, getAccessible(aID)) ]; + + this.invoke = function changeSelectValue_invoke() { + getAccessible(aID).takeFocus(); + synthesizeKey(aKey, {}, window); + }; + + this.finalCheck = function changeSelectValue_finalCheck() { + is(getAccessible(aID).value, aValue, "Wrong value for " + prettyName(aID)); + }; + + this.getID = function changeSelectValue_getID() { + return `${prettyName(aID)} closed select value change on '${aKey}'' key press`; + }; + } + + // enableLogging("DOMEvents"); + // gA11yEventDumpToConsole = true; + function doTests() { + + // Test initial values + testValue("slider_vn", "5", 5, 0, 1000, 0); + testValue("slider_vnvt", "plain", 0, 0, 5, 0); + testValue("slider_vt", "hi", 1.5, 0, 3, 0); + testValue("scrollbar", "5", 5, 0, 1000, 0); + testValue("splitter", "5", 5, 0, 1000, 0); + testValue("progress", "22%", 22, 0, 100, 0); + testValue("range", "6", 6, 0, 10, 1); + testValue("range2", "6", 6, 0, 10, 1); + + // Test that elements which should not expose values do not + let separatorVal = getAccessible("separator", [nsIAccessibleValue], null, DONOTFAIL_IF_NO_INTERFACE); + ok(!separatorVal, "value interface is not exposed for separator"); + let separatorAcc = getAccessible("separator"); + ok(!separatorAcc.value, "Value text is not exposed for separator"); + + // Test value change events + gQueue = new eventQueue(); + + gQueue.push(new changeARIAValue("slider_vn", "6", undefined)); + gQueue.push(new changeARIAValue("slider_vt", undefined, "hey!")); + gQueue.push(new changeARIAValue("slider_vnvt", "3", "sweet")); + gQueue.push(new changeARIAValue("scrollbar", "6", undefined)); + gQueue.push(new changeARIAValue("splitter", "6", undefined)); + + gQueue.push(new changeValue("combobox", "hello")); + + gQueue.push(new changeProgressValue("progress", "50")); + gQueue.push(new changeRangeValueWithMouse("range")); + gQueue.push(new changeRangeValueWithA11yAPI("range2")); + + gQueue.push(new changeSelectValue("select", "VK_DOWN", "2nd")); + gQueue.push(new changeSelectValue("select", "3", "3rd")); + + let iframeSelect = getAccessible("selectIframe").firstChild.firstChild; + gQueue.push(new changeSelectValue(iframeSelect, "VK_DOWN", "2")); + + let shadowSelect = getAccessible("selectShadow").firstChild; + gQueue.push(new changeSelectValue(shadowSelect, "VK_DOWN", "2")); + gQueue.push(new changeValue("number", "2")); + + 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=478032" + title=" Fire delayed value changed event for aria-valuetext changes"> + Mozilla Bug 478032 + </a> + <a target="_blank" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=529289" + title="We dont expose new aria role 'scrollbar' and property aria-orientation"> + Mozilla Bug 529289 + </a> + <a target="_blank" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=559764" + title="Make HTML5 input@type=range element accessible"> + Mozilla Bug 559764 + </a> + <a target="_blank" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=703202" + title="ARIA comboboxes don't fire value change events"> + Mozilla Bug 703202 + </a> + <a target="_blank" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=761901" + title=" HTML5 progress accessible should fire value change event"> + Mozilla Bug 761901 + </a> + + + <p id="display"></p> + <div id="content" style="display: none"></div> + <pre id="test"> + </pre> + <div id="eventdump"></div> + + <!-- ARIA sliders --> + <div id="slider_vn" role="slider" aria-valuenow="5" + aria-valuemin="0" aria-valuemax="1000">slider</div> + + <div id="slider_vt" role="slider" aria-valuetext="hi" + aria-valuemin="0" aria-valuemax="3">greeting slider</div> + + <div id="slider_vnvt" role="slider" aria-valuenow="0" aria-valuetext="plain" + aria-valuemin="0" aria-valuemax="5">sweetness slider</div> + + <!-- ARIA scrollbar --> + <div id="scrollbar" role="scrollbar" aria-valuenow="5" + aria-valuemin="0" aria-valuemax="1000">slider</div> + + <!-- ARIA separator which is focusable (i.e. a splitter) --> + <div id="splitter" role="separator" tabindex="0" aria-valuenow="5" + aria-valuemin="0" aria-valuemax="1000">splitter</div> + + <!-- ARIA separator which is not focusable and should not expose values --> + <div id="separator" role="separator" aria-valuenow="5" + aria-valuemin="0" aria-valuemax="1000">splitter</div> + + <!-- ARIA combobox --> + <input id="combobox" role="combobox" aria-autocomplete="inline"> + + <!-- progress bar --> + <progress id="progress" value="22" max="100"></progress> + + <!-- input@type="range" --> + <input type="range" id="range" min="0" max="10" value="6"> + + <!-- input@type="range" --> + <input type="range" id="range2" min="0" max="10" value="6"> + + <select id="select"> + <option>1st</option> + <option>2nd</option> + <option>3rd</option> + </select> + + <iframe id="selectIframe" + src="data:text/html,<select id='iframeSelect'><option>1</option><option>2</option></select>"> + </iframe> + + <div id="selectShadow"></div> + <script> + let host = document.getElementById("selectShadow"); + let shadow = host.attachShadow({mode: "open"}); + let select = document.createElement("select"); + select.id = "shadowSelect"; + let option = document.createElement("option"); + option.textContent = "1"; + select.appendChild(option); + option = document.createElement("option"); + option.textContent = "2"; + select.appendChild(option); + shadow.appendChild(select); + </script> + + <input type="number" id="number" value="1"> +</body> +</html> |