test_valuechange.html

mozilla-central/accessible/tests/mochitest/events/test_valuechange.html (file symbol)

Enable keyboard shortcuts

Source code

File a bug in Core :: Disability Access APIs

Revision control

Copy as Markdown

Other Tools

Test Info: Errors

This test gets skipped with pattern: os == 'mac'
This test failed 12 times in the preceding 30 days. quicksearch this test
Manifest: accessible/tests/mochitest/events/a11y.toml

<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>