mirror of
https://github.com/servo/servo.git
synced 2025-08-15 10:25:32 +01:00
Auto merge of #27413 - utsavoza:ugo/issue-26958/26-07-2020, r=nox
Fire mouseenter and mouseleave events The PR primarily consists of changes for: - Fixing the order in which `mousemove` events are fired. - Firing `mouseenter` and `mouseleave` events. --- - [x] `./mach build -d` does not report any errors - [x] `./mach test-tidy` does not report any errors - [x] These changes fix #26958 - [ ] There are tests for these changes
This commit is contained in:
bors-servo
GitHub
commit
0021a82cb2
8 changed files with 320 additions and 72 deletions
56
tests/html/test_mouse_events_order_1.html
Normal file
56
tests/html/test_mouse_events_order_1.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Mouse Events Order 1</title>
|
||||
<meta name="specification" content="https://w3c.github.io/uievents/#events-mouseevent-event-order">
|
||||
<style>
|
||||
.box {
|
||||
width: 16ex;
|
||||
height: 16ex;
|
||||
padding: 1ex;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: #99DDFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
left: 22ex;
|
||||
background: #44BB99;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p><strong>Description:</strong> Tests the order of mouse events when a pointing device transitions from a
|
||||
visible element A to another visible element B.</p>
|
||||
|
||||
<div id="box-1" class="box blue">A</div>
|
||||
<div id="box-2" class="box green">B</div>
|
||||
|
||||
<script>
|
||||
function print(label, message) {
|
||||
console.log(`${label}: ${message}`);
|
||||
}
|
||||
|
||||
function handleMouseEvents(element, label) {
|
||||
element.addEventListener("mouseup", _ => print(label, "mouseup"));
|
||||
element.addEventListener("mousedown", _ => print(label, "mousedown"));
|
||||
element.addEventListener("mouseenter", _ => print(label, "mouseenter"));
|
||||
element.addEventListener("mouseleave", _ => print(label, "mouseleave"));
|
||||
element.addEventListener("mousemove", _ => print(label, "mousemove"));
|
||||
element.addEventListener("mouseout", _ => print(label, "mouseout"));
|
||||
element.addEventListener("mouseover", _ => print(label, "mouseover"));
|
||||
}
|
||||
|
||||
handleMouseEvents(document.getElementById("box-1"), "A");
|
||||
handleMouseEvents(document.getElementById("box-2"), "B");
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
60
tests/html/test_mouse_events_order_2.html
Normal file
60
tests/html/test_mouse_events_order_2.html
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Mouse Events Order 2</title>
|
||||
<meta name="specification" content="https://w3c.github.io/uievents/#events-mouseevent-event-order">
|
||||
<style>
|
||||
.box {
|
||||
width: 16ex;
|
||||
height: 16ex;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
padding: 1ex;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: #99DDFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
width: 10ex;
|
||||
height: 10ex;
|
||||
left: 3ex;
|
||||
top: 3ex;
|
||||
background: #44BB99;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p><strong>Description:</strong> Tests the order of mouse events when a pointing device is moved into an element A,
|
||||
and then into a nested element B and then back out again.</p>
|
||||
|
||||
<div id="box-1" class="box blue">A
|
||||
<div id="box-2" class="box green">B</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function print(label, msg) {
|
||||
console.log(`${label}: ${msg}`);
|
||||
}
|
||||
|
||||
function handleMouseEvents(element, label) {
|
||||
element.addEventListener("mouseup", _ => print(label, "mouseup"));
|
||||
element.addEventListener("mousedown", _ => print(label, "mousedown"));
|
||||
element.addEventListener("mouseenter", _ => print(label, "mouseenter"));
|
||||
element.addEventListener("mouseleave", _ => print(label, "mouseleave"));
|
||||
element.addEventListener("mousemove", _ => print(label, "mousemove"));
|
||||
element.addEventListener("mouseout", _ => print(label, "mouseout"));
|
||||
element.addEventListener("mouseover", _ => print(label, "mouseover"));
|
||||
}
|
||||
|
||||
handleMouseEvents(document.getElementById("box-1"), "A");
|
||||
handleMouseEvents(document.getElementById("box-2"), "B");
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
62
tests/html/test_mouse_events_order_3.html
Normal file
62
tests/html/test_mouse_events_order_3.html
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Mouse Events Order 3</title>
|
||||
<meta name="specification" content="https://w3c.github.io/uievents/#events-mouseevent-event-order">
|
||||
<style>
|
||||
.box {
|
||||
width: 16ex;
|
||||
height: 16ex;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: #99DDFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: #44BB99;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: #EEDD88;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p><strong>Description: </strong> Tests the order of mouse events when a pointing device is moved into a visually
|
||||
overlapped stack of elements having the same dimensions and absolute positions and then moved out again.</p>
|
||||
|
||||
<div id="box-1" class="box blue">A
|
||||
<div id="box-2" class="box green">B
|
||||
<div id="box-3" class="box yellow">C</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function print(label, msg) {
|
||||
console.log(`${label}: ${msg}`);
|
||||
}
|
||||
|
||||
function handleMouseEvents(element, label) {
|
||||
element.addEventListener("mouseup", _ => print(label, "mouseup"));
|
||||
element.addEventListener("mousedown", _ => print(label, "mousedown"));
|
||||
element.addEventListener("mouseenter", _ => print(label, "mouseenter"));
|
||||
element.addEventListener("mouseleave", _ => print(label, "mouseleave"));
|
||||
element.addEventListener("mousemove", _ => print(label, "mousemove"));
|
||||
element.addEventListener("mouseout", _ => print(label, "mouseout"));
|
||||
element.addEventListener("mouseover", _ => print(label, "mouseover"));
|
||||
}
|
||||
|
||||
handleMouseEvents(document.getElementById("box-1"), "A");
|
||||
handleMouseEvents(document.getElementById("box-2"), "B");
|
||||
handleMouseEvents(document.getElementById("box-3"), "C");
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue