mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 01:35:08 +02:00
55 lines
1.2 KiB
HTML
55 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
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 logEvent(e) {
|
|
println(`${e.type} target.id=(${e.target.id}) relatedTarget.id=(${e.relatedTarget?.id ?? 'null'})`);
|
|
}
|
|
|
|
const events = [
|
|
'pointerover',
|
|
'pointerout',
|
|
'pointerenter',
|
|
'pointerleave',
|
|
'pointermove',
|
|
];
|
|
|
|
events.forEach(eventType => {
|
|
outer.addEventListener(eventType, logEvent);
|
|
inner.addEventListener(eventType, logEvent);
|
|
});
|
|
|
|
test(() => {
|
|
internals.mouseMove(150, 150);
|
|
|
|
println("> move pointer over #inner");
|
|
internals.mouseMove(10, 10);
|
|
|
|
println("> move pointer over #outer (leaving #inner)");
|
|
internals.mouseMove(60, 60);
|
|
|
|
println("> move pointer outside (leaving #outer)");
|
|
internals.mouseMove(150, 150);
|
|
});
|
|
</script>
|