draggable-controls.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
.target {
    border:solid thick yellow;
}
.pass {
    border:solid thick green;
}
</style>
<div id="container">
    <p>Drag the object with yellow borders. Repeat until all objects become green.</p>
    <ol>
        <li>&lt;video&gt; being draggable makes sense: <a href="https://crbug.com/451307">crbug.com/451307</a><br>
            <video class="draggable" draggable="true" src=" [...mp4]" width="336" height="69"></video></li>
        <li>&lt;input type=button&gt; being draggable is not defined: <a href="https://crbug.com/440820">crbug.com/440820</a><br>
            <input class="draggable" draggable="true" type="button" value="button" /></li>
        <li>&lt;input type=text&gt; being draggable is not defined: <a href="https://crbug.com/440820">crbug.com/440820</a><br>
            <input class="draggable" draggable="true" value="input" /></li>
        <li>&lt;textarea&gt; should be simialr to &lt;input type=text&gt;<br>
            <textarea class="draggable" draggable="true">textarea</textarea></li>
        <li>&lt;input type=text&gt; within draggable div is not defined: <a href="https://crbug.com/417170">crbug.com/417170</a><br>
            <div class="draggable" draggable="true"><input value="input within draggable div" /></div></li>
    </ol>
</div>
<script>
setup({ explicit_done: true });
document.body.offsetLeft;
var container = document.getElementById("container");

var draggables = document.querySelectorAll(".draggable");
var dragStartCount = 0;
container.addEventListener("dragstart", function (e) {
    var target = e.target;
    console.log("dragstart" + e.target);
    assert_equals(target, draggables[dragStartCount]);
    target.classList.add("pass");
    target.classList.remove("target");
    if (++dragStartCount == draggables.length)
        done();
    else
        draggables[dragStartCount].classList.add("target");
});

test(function () {
    if (window.eventSender) {
        Array.prototype.forEach.call(draggables, function (element) {
            dragAndDrop(element);
        });
    } else {
        draggables[0].classList.add("target");
    }
}, "draggables should be draggable");

function dragAndDrop(element) {
    var rect = element.getBoundingClientRect();
    var x = rect.left + rect.width / 2;
    var y = rect.top + rect.height / 2;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.leapForward(400);
    eventSender.mouseMoveTo(x + 100, y + 100);
    eventSender.mouseUp();
}

if (window.testRunner)
    container.style.display = "none";
</script>
chromium/third_party/blink/web_tests/fast/html/draggable-controls.html
