blob: b279f6ce82f89a8c0536ab538509a8d5ea1ed33e [file] [log] [blame]
<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../../resources/gesture-util.js'></script>
<style>
body, html {
margin: 0;
}
div {
height: 50px;
width: 100%;
}
.hoverme {
background-color: rgb(0, 0, 255);
}
.hoverme:hover {
background-color: rgb(255, 255, 0);
}
.message {
width: 100%;
text-align: left;
}
</style>
<div class="message">
First move your mouse cursor to the page, you will see the text under the mouse cursor changed to "currently hovered". <br>
Scroll mouse wheel slowly, you should not see any text under the mouse changed to "currently hovered" while the scrolling is in process and finishes.
</div>
<script>
let array;
const numHoverElements = 30;
const elementHeight = 50;
const textWhenNotHovered = "hover over me";
const textWhenHovered = "currently hovered";
const textWhenWasHovered = "was hovered";
const mouse = GestureSourceType.MOUSE_INPUT;
const scrollSpeed = 350;
const hoveredColor = "rgb(255, 255, 0)";
const unhoveredColor = "rgb(0, 0, 255)";
function buildPage() {
for (let i = 0; i < numHoverElements; i++) {
let div = document.createElement('div');
div.className = "hoverme";
div.innerHTML = textWhenNotHovered;
document.body.appendChild(div);
}
array = document.getElementsByClassName('hoverme');
for (let element of array) {
element.addEventListener('mouseover', function (e) {
this.innerHTML = textWhenHovered;
});
element.addEventListener('mouseout', function (e) {
this.innerHTML = textWhenWasHovered;
});
}
}
window.onload = async () => {
if (window.internals) {
internals.settings.setScrollAnimatorEnabled(false);
internals.runtimeFlags.updateHoverFromScrollAtBeginFrameEnabled = true;
}
buildPage();
await waitForCompositorCommit();
promise_test(async () => {
let x = array[0].offsetLeft + 10;
let y = array[0].offsetTop + 25;
// Move cursor to 1st element.
await mouseMoveTo(x, y);
await waitFor( () => { return array[0].innerHTML == textWhenHovered;}, 'wait for move to 1st element');
assert_equals(array[0].innerHTML, textWhenHovered);
assert_equals(array[1].innerHTML, textWhenNotHovered);
assert_equals(getComputedStyle(array[0]).backgroundColor, hoveredColor);
// Scroll end up at 4th element. Hover state does not update during scrolling
// so that 2nd, 3rd elements do not see the mouseover and mouseout events, but hover state
// is updated at the end of scroll, so 4th element does see a mouseover and mouseout events.
assert_equals(document.scrollingElement.scrollTop, 0);
await smoothScroll(3 * elementHeight, x, y, mouse, 'down', scrollSpeed);
// Wait enough time to see if we fire a fake mouse move event to update the hover state.
await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; }, 200, 60);
// TODO(crbug/902438): Support wheel scroll at low speeds in GpuBenchmarking::SmoothScrollBy.
assert_approx_equals(document.scrollingElement.scrollTop, 3 * elementHeight, 25);
assert_equals(array[0].innerHTML, textWhenWasHovered);
assert_equals(array[1].innerHTML, textWhenNotHovered);
assert_equals(array[2].innerHTML, textWhenNotHovered);
assert_equals(array[3].innerHTML, textWhenHovered);
assert_equals(array[4].innerHTML, textWhenNotHovered);
assert_equals(getComputedStyle(array[0]).backgroundColor, unhoveredColor);
assert_equals(getComputedStyle(array[1]).backgroundColor, unhoveredColor);
assert_equals(getComputedStyle(array[2]).backgroundColor, unhoveredColor);
assert_equals(getComputedStyle(array[3]).backgroundColor, hoveredColor);
}, 'Mouse wheel scroll on the page, no hover update during scrolling, but updating hover at the end of scroll.');
}
</script>