Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add some manual tests for verifying mouse events order

Browse source
This commit is contained in:
Utsav Oza 2020-07-30 22:07:04 +05:30
parent 962e620529
commit de20715f23
3 changed files with 178 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

56
tests/html/test_mouse_events_order_1.html Normal file
View 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
View 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
View 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>