<!DOCTYPE html>
<link
rel="help"
href="http://www.w3.org/TR/DOM-Level-3-Events/#events-WheelEvent"
/>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<span id="parent">
<div
id="target"
style="
border: solid 1px green;
width: 220px;
height: 70px;
overflow: scroll;
white-space: nowrap;
"
>
TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP<br>
Scroll mouse wheel over here<br>
Scroll mouse wheel over here<br>
Scroll mouse wheel over here<br>
Scroll mouse wheel over here<br>
Scroll mouse wheel over here<br>
Scroll mouse wheel over here<br>
END END END END END END END END END END END END END END<br>
</div>
</span>
<div id="console"></div>
<script>
'use strict';
// This test is not a WPT. It's to ensure coverage on high-DPI
// VirtualTestSuites which run in fast/events/synthetic-events
promise_test(async () => {
var deltaX;
var deltaY;
var wheelDeltaX;
var wheelDeltaY;
var testDiv = document.getElementById("target");
testDiv.addEventListener(
"wheel",
(e) => {
deltaX = e.deltaX;
deltaY = e.deltaY;
wheelDeltaX = e.wheelDeltaX;
wheelDeltaY = e.wheelDeltaY;
},
{ once: true }
);
var x = testDiv.offsetLeft + 5;
var y = testDiv.offsetTop + 5;
await mouseMoveTo(x, y);
const pixelsToScroll = 40;
const expectedWheelDelta = (pixelsToScroll / pixelsPerTick()) * LEGACY_MOUSE_WHEEL_TICK_MULTIPLIER;
await smoothScroll(
pixelsToScroll,
x,
y,
GestureSourceType.MOUSE_INPUT,
"downright",
SPEED_INSTANT,
/*precise_scrolling_deltas=*/ true
);
await raf();
assert_greater_than(testDiv.scrollLeft, 0);
assert_greater_than(testDiv.scrollTop, 0);
assert_equals(deltaX, testDiv.scrollLeft);
assert_equals(deltaY, testDiv.scrollTop);
assert_equals(wheelDeltaX, -Math.floor(expectedWheelDelta));
assert_equals(wheelDeltaY, -Math.floor(expectedWheelDelta));
}, "Tests the deltas are the same no matter what the screen scale factor is.");
</script>
Codebase Browser
chromium