1 files changed, 97 insertions, 0 deletions
diff --git a/testing/web-platform/tests/uievents/mouse/layout_change_should_fire_mouseover.html b/testing/web-platform/tests/uievents/mouse/layout_change_should_fire_mouseover.html
new file mode 100644
index 0000000000..49257ae60d
--- /dev/null
+++ b/testing/web-platform/tests/uievents/mouse/layout_change_should_fire_mouseover.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Mouseover/enter is sent on layout change</title>
+        <meta name="viewport" content="width=device-width">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <script src="/resources/testdriver.js"></script>
+        <script src="/resources/testdriver-actions.js"></script>
+        <script src="/resources/testdriver-vendor.js"></script>
+        <style>
+            #spacer {
+                height: 100px;
+                width: 100px;
+            }
+            #red {
+                background-color: rgb(255, 0, 0);
+                position: absolute;
+                z-index: 0;
+                left: 0px;
+                top: 0px;
+                height: 100px;
+                width: 100px;
+            }
+            #blue {
+                background-color: rgb(0, 0, 255);
+                position: absolute;
+                z-index: 1;
+                left: 0px;
+                top: 0px;
+                height: 100px;
+                width: 100px;
+            }
+            #blue:hover {
+                background-color: rgb(255, 255, 0);
+            }
+        </style>
+    </head>
+    <body onload="run();">
+        <div id="spacer"></div>
+        <div id="red"></div>
+        <h4>Test Description: Tests that the mouseover event is fired and the element has a hover effect when the element underneath the mouse cursor is changed.
+            <ol>
+                <li>Put your mouse over the red rectangle</li>
+                <li>Click the primary mouse button</li>
+            </ol>
+        </h4>
+        <script type="text/javascript">
+            var testMouseOver = async_test('Tests that the mouseover event is fired and the element has a hover effect when the element underneath the mouse cursor is changed.');
+            var actions_promise;
+
+            var eventList = [];
+            function addBlue() {
+                document.body.innerHTML += '<div id="blue"></div>';
+                var blue = document.getElementById("blue");
+                var events = ['mouseover', 'mousemove', 'mouseout', 'mouseenter', 'mouseleave'];
+                events.forEach(function (event) {
+                    blue.addEventListener(event, checkHoverEffect);
+                });
+                testMouseOver.step_timeout(function () {
+                   checkEventSequence();
+                }, 2500);
+            }
+
+            function checkEventSequence() {
+                var result = eventList.join();
+                assert_equals(result, 'mouseover,mouseenter');
+                // Make sure the test finishes after all the input actions are completed.
+                actions_promise.then( () => {
+                    testMouseOver.done();
+                });
+            }
+
+            function run() {
+                document.addEventListener('click', addBlue);
+            }
+
+            function checkHoverEffect(event) {
+                eventList.push(event.type);
+                testMouseOver.step(function () {
+                  assert_equals(event.target.id, "blue");
+                  assert_equals(getComputedStyle(event.target).backgroundColor, "rgb(255, 255, 0)");
+                  if (event.type == "mouseenter") {
+                      checkEventSequence();
+                  }
+              });
+            }
+
+            // Inject mouse inputs.
+            actions_promise = new test_driver.Actions()
+                .pointerMove(0, 0, {origin: red})
+                .pointerDown()
+                .pointerUp()
+                .send();
+        </script>
+    </body>
+</html>