| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| #drop-container > div { |
| height: 256px; |
| width: 256px; |
| color: gray; |
| } |
| #drop-instructions { |
| display: -webkit-box; |
| display: -moz-box; |
| display: -ms-flexbox; |
| -webkit-box-align: center; |
| -moz-box-align: center; |
| -ms-flex-align: center; |
| -webkit-box-pack: center; |
| -moz-box-pack: center; |
| -ms-flex-pack: center; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| pointer-events: none; |
| } |
| #drop-target { |
| border: 1px dashed black; |
| margin-top: -256px; /* Paint on top of #drop-instructions. */ |
| } |
| </style> |
| <script> |
| var dropTarget; |
| var draggingElement; |
| var event; |
| |
| var svgHyperlink; |
| var htmlHyperlink; |
| var numberOfTestsToRun; |
| |
| window.jsTestIsAsync = true; |
| |
| window.onload = function () |
| { |
| svgHyperlink = document.getElementById("svgHyperlink"); |
| htmlHyperlink = document.getElementById("htmlHyperlink"); |
| |
| svgHyperlink.ondragstart = dragStart; |
| svgHyperlink.ondragend = dragEnd; |
| htmlHyperlink.ondragstart = dragStart; |
| htmlHyperlink.ondragend = dragEnd; |
| |
| dropTarget = document.getElementById("drop-target"); |
| dropTarget.ondrop = drop; |
| |
| runTests(); |
| } |
| |
| function dragStart(e) |
| { |
| event = e; |
| draggingElement = e.target; |
| } |
| |
| function dragEnd(e) |
| { |
| dropTarget.innerHTML = ""; |
| draggingElement = null; |
| } |
| |
| function drop(e) |
| { |
| event = e; |
| var expectedHref = draggingElement instanceof SVGElement ? draggingElement.href.baseVal : draggingElement.href; |
| shouldBeEqualToString('event.dataTransfer.getData("url")', expectedHref); |
| if (window.testRunner && !--numberOfTestsToRun) |
| done(); |
| } |
| |
| function done() |
| { |
| var testContainer = document.getElementById("test-container"); |
| if (testContainer) |
| document.body.removeChild(testContainer); |
| debug('<br><span class="pass">TEST COMPLETE</span>'); |
| finishJSTest(); |
| } |
| |
| function dragAndDrop(beginX, beginY, endX, endY) |
| { |
| if (!window.eventSender) |
| return; |
| eventSender.mouseMoveTo(beginX, beginY); |
| eventSender.mouseDown(); |
| eventSender.leapForward(100); |
| eventSender.mouseMoveTo(endX, endY); |
| eventSender.mouseUp(); |
| } |
| |
| function runTests() |
| { |
| if (!window.testRunner) |
| return; |
| |
| var endX = dropTarget.offsetLeft + 10; |
| var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2; |
| |
| numberOfTestsToRun = 2; |
| |
| debug("<br>Dragging HTML hyperlink<br>"); |
| dragAndDrop(htmlHyperlink.offsetLeft, htmlHyperlink.offsetTop + htmlHyperlink.offsetHeight / 2, endX, endY); |
| |
| debug("<br>Dragging SVG hyperlink<br>"); |
| const clientRect = svgHyperlink.ownerSVGElement.getBoundingClientRect(); |
| dragAndDrop(clientRect.left, clientRect.top + 10, endX, endY); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="description"></div> |
| <div id="test-container"> |
| <div id="drop-container"> |
| <div id="drop-instructions">Drop a hyperlink on me.</div> |
| <div id="drop-target" contenteditable="true"></div> |
| </div> |
| <hr> |
| <p>Items that can be dragged to the drop target:</p> |
| <svg width="200" height="30"> |
| <a xlink:href="http://www.w3.org/TR/SVG11/" id="svgHyperlink"><text x="0" y="20" style="text-decoration: underline">SVG hyperlink</text></a> |
| </svg> |
| <a href="http://www.whatwg.org/html" id="htmlHyperlink">HTML hyperlink</a> |
| <hr> |
| </div> |
| <div id="console"></div> |
| <script> |
| description("This test checks that drag-and-drop support works for a hyperlink."); |
| </script> |
| </body> |
| </html> |
