diff --git a/tests/html/test_mouse_events_order_1.html b/tests/html/test_mouse_events_order_1.html
new file mode 100644
index 00000000000..eee56954bea
--- /dev/null
+++ b/tests/html/test_mouse_events_order_1.html
@@ -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>
diff --git a/tests/html/test_mouse_events_order_2.html b/tests/html/test_mouse_events_order_2.html
new file mode 100644
index 00000000000..45319c2f45e
--- /dev/null
+++ b/tests/html/test_mouse_events_order_2.html
@@ -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>
diff --git a/tests/html/test_mouse_events_order_3.html b/tests/html/test_mouse_events_order_3.html
new file mode 100644
index 00000000000..dd3ae1031a4
--- /dev/null
+++ b/tests/html/test_mouse_events_order_3.html
@@ -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>
