Add WPT platform test for mouse events after layout.

Chrome implementation: https://chromium-review.googlesource.com/c/615424 W3C UIEvents issue: w3c/uievents#154 BUG=488886 Change-Id: I732ef83ea7ca916d564d3af0419f4da0e3db1d45
web-platform-tests · Jan 2, 2018 · 294e0df · 294e0df
1 parent 1f9c924
commit 294e0df
Showing 1 changed file with 84 additions and 0 deletions.
diff --git a/uievents/mouse/layout_change_should_fire_mouseover-manual.html b/uievents/mouse/layout_change_should_fire_mouseover-manual.html
@@ -0,0 +1,84 @@
+<!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>
+        <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 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, validMouseEventsResult);
+                });
+                testMouseOver.step_timeout(function () {
+                   validateResults();
+                }, 2500);
+            }
+
+            function validateResults() {
+                var result = eventList.join();
+                assert_true(result == 'mouseover,mouseenter');
+                testMouseOver.done();
+            }
+
+            function run() {
+                document.addEventListener('click', addBlue);
+            }
+
+            function validMouseEventsResult(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") {
+                      validateResults();
+                  }
+              });
+            }
+        </script>
+    </body>
+</html>
+