wheel-event-cancelable.html | Explore in Territory

<!DOCTYPE html>
<head>
  <style>
    div {
      margin: 0.5em;
      padding: 0.5em;
    }

    .clickme {
      width: 500px;
      height: 2000px;
      background: palegoldenrod;
    }

    .logdiv {
      position: fixed;
      top: 1em;
      right: 1em;
    }

    .logdiv2 {
      background: paleturquoise;
      overflow: scroll;
      height: 60vh;
    }

    .container {
      display: flex;
      flex-direction: row;
    }

    p {
      margin: 0;
    }
  </style>
  <link rel="help" href="crbug.com/1063722">
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <script src="../resources/gesture-util.js"></script>
</head>
<body>
<h1>When pointer is locked and preventDefault is called the wheel event has to be cancelable and no scrolling should occur</h1>
<div class='container'>
  <div class='clickme'>
    This example was taken from <a
      href='https://stackoverflow.com/questions/54428499/preventing-mouse-wheel-event-during-pointer-lock-in-chrome'>this
      SO question</a>, and slightly modified.

    Steps:
    <ul>
      <li>Clicking this div locks pointer on it (it calls <code>requestPointerLock</code>)</li>
      <li>After clicking this div, while pointer lock is in effect, <code>wheel</code> events should be cancelable, and <code>preventDefault</code> should work (i.e.
        scrolling is prevented)
      </li>
    </ul>
  </div>
  <div class='logdiv'>
    Newest events at the top.<br>This log window should not scroll at all.
    <div class='logdiv2'></div>
  </div>
</div>

<script>
  const wheel_event_cancelable = async_test("When pointer is locked and preventDefault is called the wheel event has to be cancelable and no scrolling should occur.");
  const logdiv2 = document.querySelector('.logdiv2');
  function log(...things) {
    logdiv2.innerHTML = `<p>${things.map(t => t.toString()).join(' ')}</p>` + logdiv2.innerHTML;
  }

  const clickme = document.querySelector('.clickme');
  let locked = false;


  document.addEventListener('pointerlockchange', async () => {
    locked = document.pointerLockElement !== null;
    log("setting locked:", locked);
  });

  clickme.addEventListener('click', () => {
    clickme.requestPointerLock();
  });

  document.addEventListener('wheel', event => {
    wheel_event_cancelable.step(()=>{
      assert_true(locked, "pointer has to be locked");
      assert_true(event.cancelable, "wheel event has to be cancelable");
      assert_equals(document.body.scrollTop, 0, "no scrolling should occur");
    });

    log("locked:", locked, "| cancelable:", event.cancelable);

    event.stopImmediatePropagation();
    event.preventDefault();
  }, { passive: false });

  async function runTest(){
     let rect = clickme.getBoundingClientRect();
     let x = rect.left + 5;
     let y = rect.top + 5;

     await mouseMoveTo(x,y);
     await mouseClickOn(x,y);

     // send a number of wheel events and check that all of them are cancelable
     let maxWheelEvents = 25;
     for(let i=0;i<maxWheelEvents;i++){
       let distance = 5;
       await smoothScroll(distance, x, y, GestureSourceType.MOUSE_INPUT, 'downright', SPEED_INSTANT);
       x += distance;
       y += distance;
     }

     wheel_event_cancelable.done();
  }

  runTest();
</script>
</body>
chromium/third_party/blink/web_tests/pointer-lock/wheel-event-cancelable.html
