| <!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><video> 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><input type=button> 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><input type=text> 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><textarea> should be simialr to <input type=text><br> |
| <textarea class="draggable" draggable="true">textarea</textarea></li> |
| <li><input type=text> 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> |
