native-slider-synthesized-events-on-action.html

<!DOCTYPE HTML>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  .rtl {
    direction: rtl;
  }
</style>
</head>
<body>
  <input id="slider" type="range" value="0" step="1"/>
  <input id="slider-rtl" class="rtl" type="range" value="0" step="1"/>

<script>
  function checkEvent(event, target, expected_key) {
    if (expected_key == "ArrowUp") {
      assert_equals(event.code, "ArrowUp", "event.code on " + event.type);
      assert_equals(event.key, "ArrowUp", "event.key on " + event.type);
      assert_equals(event.keyCode, 38, "event.keyCode on " + event.type);
      assert_equals(event.which, 38, "event.which on " + event.type);
    } else if (expected_key == "ArrowDown") {
      assert_equals(event.code, "ArrowDown", "event.code on " + event.type);
      assert_equals(event.key, "ArrowDown", "event.key on " + event.type);
      assert_equals(event.keyCode, 40, "event.keyCode on " + event.type);
      assert_equals(event.which, 40, "event.which on " + event.type);
    } else if (expected_key == "ArrowLeft") {
      assert_equals(event.code, "ArrowLeft", "event.code on " + event.type);
      assert_equals(event.key, "ArrowLeft", "event.key on " + event.type);
      assert_equals(event.keyCode, 37, "event.keyCode on " + event.type);
      assert_equals(event.which, 37, "event.which on " + event.type);
    } else if (expected_key == "ArrowRight") {
      assert_equals(event.code, "ArrowRight", "event.code on " + event.type);
      assert_equals(event.key, "ArrowRight", "event.key on " + event.type);
      assert_equals(event.keyCode, 39, "event.keyCode on " + event.type);
      assert_equals(event.which, 39, "event.which on " + event.type);
    }

    assert_true(event.isTrusted, "event.isTrusted on " + event.type);
    assert_equals(event.charCode, 0, "event.charCode on " + event.type);
    assert_equals(event.target, target, "event.target on " + event.type);
    assert_equals(event.srcElement, target, "event.srcElement on " + event.type);
    assert_true(event.bubbles, "event.bubbles on " + event.type);
    assert_false(event.defaultPrevented, "event.defaultPrevented on " + event.type);
  }

  test(function(t) {
    assert_true(internals.runtimeFlags.synthesizedKeyboardEventsForAccessibilityActionsEnabled);
  }, "Make sure that keyboard event synthesis is enabled");

  // Test left-to-right slider

  async_test(function(t) {
    var slider = document.getElementById("slider");
    var axSlider = accessibilityController.accessibleElementById("slider");

    // Listener for keydown event after increment action.
    slider.addEventListener("keydown", t.step_func((event) => {
      checkEvent(event, slider, "ArrowRight");
    }), { once: true });

    // Listener for keyup event after increment action.
    // It sets up a new set of listeners and runs the decrement action.
    slider.addEventListener("keyup", t.step_func((event) => {
      checkEvent(event, slider, "ArrowRight");
      assert_equals(slider.value, "1", "slider value after increase");

      // Listener for keydown event after decrement action.
      slider.addEventListener("keydown", t.step_func((event) => {
        checkEvent(event, slider, "ArrowLeft");
      }), { once: true });

      // Listener for keyup event after decrement action.
      slider.addEventListener("keyup", t.step_func_done((event) => {
        checkEvent(event, slider, "ArrowLeft");
        assert_equals(slider.value, "0", "slider value after decrease");
      }), { once: true });

      window.setTimeout(() => {
        axSlider.decrement();
      }, 0);
    }), { once: true });

    window.setTimeout(
        t.unreached_func("didn't get all key events within 1000ms"), 1000);

    axSlider.increment();
  }, "Check that running increment and decrement actions on a native slider generates the corresponding keydown and keyup events");

  // Test right-to-left slider

  async_test(function(t) {
    var slider = document.getElementById("slider-rtl");
    var axSlider = accessibilityController.accessibleElementById("slider-rtl");

    // Listener for keydown event after increment action.
    slider.addEventListener("keydown", t.step_func((event) => {
      checkEvent(event, slider, "ArrowLeft");
    }), { once: true });

    // Listener for keyup event after increment action.
    // It sets up a new set of listeners and runs the decrement action.
    slider.addEventListener("keyup", t.step_func((event) => {
      checkEvent(event, slider, "ArrowLeft");
      assert_equals(slider.value, "1", "slider value after increase");

      // Listener for keydown event after decrement action.
      slider.addEventListener("keydown", t.step_func((event) => {
        checkEvent(event, slider, "ArrowRight");
      }), { once: true });

      // Listener for keyup event after decrement action.
      slider.addEventListener("keyup", t.step_func_done((event) => {
        checkEvent(event, slider, "ArrowRight");
        assert_equals(slider.value, "0", "slider value after decrease");
        t.done();
      }), { once: true });

      window.setTimeout(() => {
        axSlider.decrement();
      }, 0);
    }), { once: true });

    window.setTimeout(
        t.unreached_func("didn't get all key events within 1000ms"), 1000);

    axSlider.increment();
  }, "Check that running increment and decrement actions on a RTL native slider generates the corresponding keydown and keyup events");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/accessibility/native-slider-synthesized-events-on-action.html
