1 files changed, 65 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/editing/dnd/events/relatedTarget-attribute-manual.html b/testing/web-platform/tests/html/editing/dnd/events/relatedTarget-attribute-manual.html
new file mode 100644
index 0000000000..c5a897d68e
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/events/relatedTarget-attribute-manual.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+    <head>
+        <title>relatedTarget attribute for dragenter and dragleave events</title>
+        <meta name="viewport" content="width=device-width">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <style>
+        #outerdiv {
+          padding: 50px;
+          background: blue;
+        }
+        #innerdiv {
+          width:200px;
+          height:100px;
+          background: green;
+        }
+        </style>
+        <script>
+            var drag_test = async_test("dragenter and dragleave are correctly fired.");
+            var got_dragenter = false;
+            var got_dragleave = false;
+            function run() {
+                var draggable = document.getElementById("draggable");
+                var innerdiv = document.getElementById("innerdiv");
+                draggable.addEventListener("dragstart", (e) => {
+                    e.dataTransfer.setData("text", draggable.innerHTML);
+                });
+                innerdiv.addEventListener("dragenter", (e) => {
+                    if (!got_dragenter) {
+                        test(function() {
+                            assert_equals(e.relatedTarget.id, "outerdiv", "dragenter event should have the correct relatedTarget.");
+                        }, "dragenter event should have the correct relatedTarget.");
+                        got_dragenter = true;
+                    }
+                });
+                innerdiv.addEventListener("dragleave", (e) => {
+                    if (!got_dragleave) {
+                        test(function() {
+                            assert_equals(e.relatedTarget.id, "outerdiv", "dragleave event should have the correct relatedTarget.");
+                        }, "dragleave event should have the correct relatedTarget.");
+                        got_dragleave = true;
+                        if (got_dragenter)
+                            drag_test.done();
+                    }
+                });
+            }
+        </script>
+    </head>
+    <body onload="run()">
+        <h1>Drag & Drop: relatedTarget attribute for dragenter and dragleave events</h1>
+        <h2 id="pointerTypeDescription"></h2>
+        <h4>Test Description:
+            <ol>
+                 <li>Drag the text into the green box.</li>
+                 <li>Without releasing the drag, drag the text out of the green box.</li>
+            </ol>
+        </h4>
+        <br>
+        <div id="draggable" draggable="true">Drag this text</br>over the green box</div>
+        <div id="outerdiv">
+          <div id="innerdiv"></div>
+        </div>
+    </body>
+</html>