mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-26 18:09:45 +00:00
dd5a0361f2
We were generating click events always using the primary mouse button instead of the provided button, and with the buttons field set to that provided button.
95 lines
2.9 KiB
HTML
95 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
padding: 5px;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
#outer {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: yellowgreen;
|
|
}
|
|
|
|
#inner {
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: magenta;
|
|
}
|
|
</style>
|
|
<body id="body"><div id="outer"><div id="inner"></div></div></body>
|
|
<script src="../include.js"></script>
|
|
<script>
|
|
function handleMouseOver(e) {
|
|
println(`mouseover target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id}), relatedTarget.id=(${e.relatedTarget.id})`);
|
|
}
|
|
function handleMouseOut(e) {
|
|
println(`mouseout target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id}), relatedTarget.id=(${e.relatedTarget.id})`);
|
|
}
|
|
function handleMouseEnter(e) {
|
|
println(`mouseenter target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id}), relatedTarget.id=(${e.relatedTarget.id})`);
|
|
}
|
|
function handleMouseLeave(e) {
|
|
println(`mouseleave target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id}), relatedTarget.id=(${e.relatedTarget.id})`);
|
|
}
|
|
function handleClick(e) {
|
|
println(`click target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id}), button=${e.button}`);
|
|
}
|
|
function handleAuxClick(e) {
|
|
println(`auxclick target.id=(${e.target.id}) currentTarget.id=(${e.currentTarget.id}), button=${e.button}`);
|
|
}
|
|
|
|
outer.onmouseover = handleMouseOver;
|
|
outer.onmouseout = handleMouseOut;
|
|
outer.onmouseenter = handleMouseEnter;
|
|
outer.onmouseleave = handleMouseLeave;
|
|
outer.onclick = handleClick;
|
|
outer.onauxclick = handleAuxClick;
|
|
|
|
inner.onmouseover = handleMouseOver;
|
|
inner.onmouseout = handleMouseOut;
|
|
inner.onmouseenter = handleMouseEnter;
|
|
inner.onmouseleave = handleMouseLeave;
|
|
inner.onclick = handleClick;
|
|
inner.onauxclick = handleAuxClick;
|
|
|
|
const clickOnBody = () => {
|
|
return new Promise(resolve => {
|
|
document.body.onclick = () => { resolve(); };
|
|
internals.click(1, 1);
|
|
});
|
|
}
|
|
|
|
const clickOnOuterBox = (button) => {
|
|
return new Promise((resolve, reject) => {
|
|
if (button == 0) {
|
|
document.body.onclick = () => { resolve(); };
|
|
internals.click(80, 80);
|
|
} else if (button == 1) {
|
|
document.body.onauxclick = () => { resolve(); };
|
|
internals.middleClick(80, 80);
|
|
} else {
|
|
println(`Unimplemented button click: ${button}`);
|
|
reject();
|
|
}
|
|
});
|
|
};
|
|
|
|
asyncTest(async done => {
|
|
// First move the mouse outside #outer to populate the MouseEvent.relatedTarget property
|
|
internals.movePointerTo(150, 150);
|
|
println("> move pointer over #inner");
|
|
internals.movePointerTo(10, 10);
|
|
println("> move pointer over #outer");
|
|
internals.movePointerTo(60, 60);
|
|
println("> click #outer");
|
|
await clickOnOuterBox(0);
|
|
println("> auxclick #outer");
|
|
await clickOnOuterBox(1);
|
|
println("> click document.body");
|
|
await clickOnBody();
|
|
done();
|
|
});
|
|
</script>
|