139 lines
3.4 KiB
HTML
139 lines
3.4 KiB
HTML
<!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>
|