1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
  
     | 
    
      <!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1261673
https://bugzilla.mozilla.org/show_bug.cgi?id=1970030
-->
<head>
  <meta charset="utf-8">
  <title>Test change number and range input value through wheel event</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script src="/tests/SimpleTest/paint_listener.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1261673">Mozilla Bug 1261673</a>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1970030">Mozilla Bug 1970030</a>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<input id="test_number" type="number" value=5>
<script type="text/javascript">
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(runTests);
function runTests() {
  let input = window.document.getElementById("test_number");
  // focus: whether the target input element is focused
  // deltaY: deltaY of WheelEvent
  // deltaMode: deltaMode of WheelEvent
  // valueChanged: expected value changes after input element handled the wheel event
  let params = [
    {focus: true, deltaY: 1.0, deltaMode: WheelEvent.DOM_DELTA_LINE, valueChanged: -1},
    {focus: true, deltaY: -1.0, deltaMode: WheelEvent.DOM_DELTA_LINE, valueChanged: 1},
    {focus: true, deltaY: 1.0, deltaMode: WheelEvent.DOM_DELTA_PAGE, valueChanged: -1},
    {focus: true, deltaY: -1.0, deltaMode: WheelEvent.DOM_DELTA_PAGE, valueChanged: 1},
    {focus: true, deltaY: 1.0, deltaMode: WheelEvent.DOM_DELTA_PIXEL, valueChanged: 0},
    {focus: true, deltaY: -1.0, deltaMode: WheelEvent.DOM_DELTA_PIXEL, valueChanged: 0},
    {focus: false, deltaY: 1.0, deltaMode: WheelEvent.DOM_DELTA_LINE, valueChanged: 0},
    {focus: false, deltaY: -1.0, deltaMode: WheelEvent.DOM_DELTA_LINE, valueChanged: 0}
  ];
  let testIdx = 0;
  // The expected value of the number field; used in is() check below.
  // Initialized to the value that the field starts out with; subtests will
  // modify this if they expect to modify the value.
  let expectedValue = parseInt(input.value);
  // Actual/expected number of mutations to the number field's value:
  let actualChangeCount = 0;
  let expectedChangeCount = 0;
  const prefName = "dom.input.number_and_range_modified_by_mousewheel";
  let didFlipPref = false;
  let isPrefEnabled = SpecialPowers.getBoolPref(prefName);
  is(isPrefEnabled, false,  "Expecting pref to be disabled by default");
  input.addEventListener("change", () => {
    ++actualChangeCount;
  });
  function runNext() {
    let p = params[testIdx];
    (p.focus) ? input.focus() : input.blur();
    if (isPrefEnabled && p.valueChanged != 0) {
      expectedChangeCount++;
      expectedValue += p.valueChanged;
    }
    const wheelEventPromise = new Promise(res => {
      input.addEventListener("wheel", e => res(e), { passive: true, once: true });
    })
    sendWheelAndPaint(input, 1, 1, { deltaY: p.deltaY, deltaMode: p.deltaMode },
                      async () => {
      is(parseInt(input.value), expectedValue,
         "Handle wheel in number input test-" + testIdx +
         " with pref " + (isPrefEnabled ? "en" : "dis") + "abled");
      info(`actualChangeCount ${actualChangeCount}, expectedChangeCount ${expectedChangeCount}`);
      is(actualChangeCount, expectedChangeCount,
         "UA should fire change event when input's value changed");
      // Need to wrap event to see if it was default prevented by system
      const wheelEvent = SpecialPowers.wrap(await wheelEventPromise);
      const shouldScroll = !(isPrefEnabled && p.valueChanged);
      if (shouldScroll) {
        ok(!wheelEvent.defaultPrevented, "Wheel event should not be default prevented");
      } else {
        ok(wheelEvent.defaultPrevented, "Wheel event should be default prevented");
      }
      if (++testIdx < params.length) {
        // More subtests remain; kick off the next one.
        runNext();
      } else if (!didFlipPref) {
        // Reached the end of the subtest list.  Flip the pref
        // and restart our iteration over the subtests.
        await SpecialPowers.pushPrefEnv({
          set: [[prefName, !isPrefEnabled]],
        });
        isPrefEnabled = !isPrefEnabled;
        didFlipPref = true;
        testIdx = actualChangeCount = expectedChangeCount = 0;
        runNext();
      } else {
        // Reached the end of the subtest list, for both pref settings.
        // We're done!
        SimpleTest.finish();
      }
    });
  }
  runNext();
}
</script>
</body>
</html>
 
     |