<!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>
