diff options
Diffstat (limited to 'testing/web-platform/tests/html/editing/dnd/drop')
28 files changed, 1172 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/editing/dnd/drop/001.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/001.xhtml new file mode 100644 index 0000000000..c34aef9734 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/001.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: allowed effects 'copy','move','link'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link'], i = 0; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[i] && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3; + selectText();} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p ondragstart="start(event)">Drag me</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/002.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/002.xhtml new file mode 100644 index 0000000000..19da353097 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/002.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Text input selection drag and drop: allowed effects 'copy','move','link'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link'], i = 0; +function selectText() + {document.querySelector('input').select()} +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[i] && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3; + selectText();} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p><input value="Drag me" ondragstart="start(event)"/></p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/003.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/003.xhtml new file mode 100644 index 0000000000..b114c3770e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/003.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: allowed effects 'copy','move','link'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link'], i = 0; +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[i] && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3;} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag link and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/004.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/004.xhtml new file mode 100644 index 0000000000..715792f8ef --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/004.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>PNG image drag and drop: allowed effects 'copy','move','link'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link'], i = 0; +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[i] && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3;} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p><img ondragstart="start(event)" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAEq0lEQVR42u1dvU4bQRAeR0RCCilSp0peIoKGB4DSXYRDlcZlFClKBI4bB/kV/AymIDwCTahiicaioEOxhCsjWVTJziyKMfYZn+9ud3bvG2mEZB13u9+nndmf2Rki7fKFXtEBbVKD9o22jB4bPaND6hm9Mjo0enevw/vfevKMfbYl/8vv4HdBUkvFALhltG2A7dN3+pur8jv53fwN/hZkjjRo3eiuAatjdJA7CcnkDOSb/G1uQ6mFzUeDagaQrvl764yEJOU22LbUymXaGrRhOt40OvJOQvLIGUkbP9GLeIn4SM9NJ+tOTVI+Jq0ubY9sVFRNxy6DIWKWmEvpQ/ByQNumI+fBEjHrZ86lT8HJV3ptGn8aDRGzxJxKHwMZFe9Mg6+jJWNCyrX0VbUc0nuj4+jJmPiWsfRZodN+ZvSoNETMjpYjwUCFfKaXpjEnpSVjQsqJYOF5ZLw1elF6MiakXAgmnpw378DegIgZUm4EGw8jA2QsIuUbvXHpM2CmljFfhfsUO5uCA0/j6AudfZV5arv6WuVHcYs+ALwqKTkvHnmLoEwr8CJW9Llts9iNwvj3plzsfeWyIRnzrq37kfIzq6naBpA5a6bzlJgOl/SMkl+rklEFgIX5k5THwTYgIdwzcP2jhM/o19KsOeoArnBS6suaqo2gQnXCJWSwXNwXB4gBMFekNBeTwSGUmiMK4yNktDhsleNaAZRrUvYWmasuQHJOSDdpdKyriEIvo9maexWC70gAIF/bKTvzzFUH4HgbJZ3HdFSw9vC6lfKHpq7X8X07AOOblK2HhLQBindC2g/9Rx+gePcj/cnqHIDoUFm1c9gjwNAy/d0kyXIAMLSYrQ8kqScAhhbH3iLJBwIwtBByTJKkBWBoIeSMJHMOwNBCyG+SdEYAQ4tTvyLJMQUwtBAyJEn8BTC0EHIHQhQSApOlzGTBqaty6jzVAhhaCOlhYahuYYitE02EHGNzURchLZItX4ChhZB9HFBpUjmgwhGuHv0feI0gBw1T3j7CgHT5jzYC5XQRsjUdSsrhjADGl7ka0EylBgRb+ySkMy9rww7A8Waududf2MH9Qh9k3CbXLsGVNh/mqrvojuEeQHI+Qmq4Fq1ndIyeruaDxAEuCWk+ncmB0z3gepubtQenMUHyGTWELJl8xk6B15CeqVAyLtPXtUICsyJnVivWs+J0dAAwbzLOkQRTk2YuKsapTQFkXqPjlDILEinnRcZ1fpXdkGo866xqnH9FNyTjz0JIQZXcuPQCAE5rqo6oMEFBl7RknBRfTg8lj5Yl48JdGT0ueIWiYIvIuHFfPg9l85LJcF42b+JTUFjysZnyVlhy2qfA0asovTo9+0JxYnWC8t0KBQXuFYrdkIy3mBj3LbeNQrejZTuqOlbcl8znGTqcfjXoM3pboqgaPhEPxda1qgcVYsRt5TanDkgISWzcV1N1hCS3jdu4dNxUDMIhlBzXysHGGspkcBtsW2pPh3fGLrZ2ya5cXHFp0qxJ6si3E68EQCpy344vQRZxO5jfye+2d/oqgHsV02Z3lvcl9QTnA+EkLZw5h9MZcY4pTvxldXj/W0+esc+25H/5HQGYon+Q5f+MwFz+8QAAAABJRU5ErkJggg==" alt="PNG circle"/></p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag circle and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/005.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/005.xhtml new file mode 100644 index 0000000000..a6c237c29d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/005.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG image drag and drop: allowed effects 'copy','move','link'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link'], i = 0; +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[i] && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3;} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p><img ondragstart="start(event)" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22green%22/%3E%3C/svg%3E" alt="SVG circle"/></p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag circle and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/006.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/006.xhtml new file mode 100644 index 0000000000..3faea1803f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/006.xhtml @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop: allowed effects 'copy','move','link'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link'], i = 0; +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[i] && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3;} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondragenter="event.preventDefault()" ondragover="return false" ondrop="addImage(event)">Canvas</canvas> +</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag canvas pattern and drop it onto any of the green boxes.</p> +<script type="application/ecmascript"> +var canvas = document.querySelector('canvas'), +c = canvas.getContext('2d'); +for(var x = 0; x != 50; x++) + {c.fillStyle = (x%2 == 0)?'navy':'white'; + c.beginPath(); + c.moveTo(x,x); + c.lineTo(100-x,x); + c.lineTo(100-x,100-x); + c.lineTo(x,100-x); + c.closePath(); + c.fill();} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/007.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/007.xhtml new file mode 100644 index 0000000000..b326b25ee4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/007.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: allowed effects 'copy','copyLink','copyMove'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','copyLink','copyMove'], i = 0; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == 'copy' && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3; + selectText();} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p ondragstart="start(event)">Drag me</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/008.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/008.xhtml new file mode 100644 index 0000000000..d1ec557e73 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/008.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: allowed effects 'link','linkMove','uninitialized'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['link','linkMove','copyMove'], i = 0; +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[i].substring(0,4) && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3;} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag link and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/009.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/009.xhtml new file mode 100644 index 0000000000..e9e41c6f83 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/009.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Text input selection drag and drop: allowed effects 'move','uninitialized'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +</style> +<script type="application/ecmascript"> +var effects = ['move','uninitialized'], i = 0; +function selectText() + {document.querySelector('input').select()} +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == 'move' && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%2; + selectText();} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]; + event.dataTransfer.dropEffect = 'move'} +</script> +</head> +<body onload="selectText()"> +<p><input value="Drag me" ondragstart="start(event)"/></p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/010.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/010.xhtml new file mode 100644 index 0000000000..3758fdd32a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/010.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: allowed effects 'all','uninitialized'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +</style> +<script type="application/ecmascript"> +var effects = ['all','uninitialized'], i = 0; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == 'copy' && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%2; + selectText();} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p ondragstart="start(event)">Drag me</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/011.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/011.xhtml new file mode 100644 index 0000000000..ab81380feb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/011.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: allowed effects 'link','copyLink','linkMove'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['link','copyLink','linkMove'], i = 0; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[i].substring(0,4) && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3; + selectText();} +function start(event) + {event.dataTransfer.effectAllowed = effects[i];} +</script> +</head> +<body onload="selectText()"> +<p ondragstart="start(event)">Drag me</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/012.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/012.xhtml new file mode 100644 index 0000000000..a19e6d42d1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/012.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: allowed effects 'move','copyMove','linkMove'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['move','copyMove','linkMove'], i = 0; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[i].substring(0,4) && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3; + selectText();} +function start(event) + {event.dataTransfer.effectAllowed = effects[i];} +</script> +</head> +<body onload="selectText()"> +<p ondragstart="start(event)">Drag me</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/013.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/013.xhtml new file mode 100644 index 0000000000..5dc10ea385 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/013.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: allowed effects 'copy','all','uninitialized'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','all','uninitialized'], i = 0; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == 'copy' && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3; + selectText();} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p ondragstart="start(event)">Drag me</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/014.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/014.xhtml new file mode 100644 index 0000000000..91bc6efb3e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/014.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: allowed effects 'copy','copyMove','invalid'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','all','uninitialized'], i = 0; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == 'copy' && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3; + selectText();} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]} +</script> +</head> +<body onload="selectText()"> +<p ondragstart="start(event)">Drag me</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/015.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/015.xhtml new file mode 100644 index 0000000000..952abd2e15 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/015.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: dropzone 'copy','move' and 'link'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link']; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event,element) + {document.querySelectorAll('div')[element].appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[element])?' PASS ':' FAIL ')); + selectText();} +</script> +</head> +<body onload="selectText()"> +<div ondrop="dropSelection(event,0)" dropzone="copy string:text/plain"/> +<div ondrop="dropSelection(event,1)" dropzone="move string:text/plain"/> +<div ondrop="dropSelection(event,2)" dropzone="link string:text/plain"/> +<p>Drag me</p> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/016.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/016.xhtml new file mode 100644 index 0000000000..a1b80c5198 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/016.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Text input selection drag and drop: dropzone 'copy','move' and 'link'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link']; +function selectText() + {document.querySelector('input').select()} +function dropSelection(event,element) + {document.querySelectorAll('div')[element].appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[element])?' PASS ':' FAIL ')); + selectText();} +</script> +</head> +<body onload="selectText()"> +<div ondrop="dropSelection(event,0)" dropzone="copy string:text/plain"/> +<div ondrop="dropSelection(event,1)" dropzone="move string:text/plain"/> +<div ondrop="dropSelection(event,2)" dropzone="link string:text/plain"/> +<p><input value="Drag me"/></p> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/017.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/017.xhtml new file mode 100644 index 0000000000..36fdbc873f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/017.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: dropzone 'copy','move' and 'link'</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link']; +function dropSelection(event,element) + {document.querySelectorAll('div')[element].appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[element])?' PASS ':' FAIL '));} +</script> +</head> +<body> +<div ondrop="dropSelection(event,0)" dropzone="copy string:text/uri-list"/> +<div ondrop="dropSelection(event,1)" dropzone="move string:text/uri-list"/> +<div ondrop="dropSelection(event,2)" dropzone="link string:text/uri-list"/> +<p><a href="data:text/plain,1">Drag me</a></p> +<p>You should be able to drag link and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/018.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/018.xhtml new file mode 100644 index 0000000000..2a84d75e39 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/018.xhtml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: setting dropzone attribute ondragstart</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link']; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event,element) + {document.querySelectorAll('div')[element].appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[element])?' PASS ':' FAIL ')); + selectText();} +function start(event) + {for(var i = 0; i != 3; i++) + {document.querySelectorAll('div')[i].setAttribute('dropzone',effects[i] + ' string:text/plain')} + } +</script> +</head> +<body onload="selectText()"> +<div ondrop="dropSelection(event,0)"/> +<div ondrop="dropSelection(event,1)"/> +<div ondrop="dropSelection(event,2)"/> +<p ondragstart="start(event)">Drag me</p> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/019.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/019.xhtml new file mode 100644 index 0000000000..66ca95c424 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/019.xhtml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Text input selection drag and drop: setting dropzone attribute ondragstart</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link']; +function selectText() + {document.querySelector('input').select()} +function dropSelection(event,element) + {document.querySelectorAll('div')[element].appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[element])?' PASS ':' FAIL ')); + selectText();} +function start(event) + {for(var i = 0; i != 3; i++) + {document.querySelectorAll('div')[i].setAttribute('dropzone',effects[i] + ' string:text/plain')} + } +</script> +</head> +<body onload="selectText()"> +<div ondrop="dropSelection(event,0)"/> +<div ondrop="dropSelection(event,1)"/> +<div ondrop="dropSelection(event,2)"/> +<p ondragstart="start(event)"><input value="Drag me" ondragstart="start(event)"/></p> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/020.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/020.xhtml new file mode 100644 index 0000000000..a06f41968d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/020.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: setting dropzone attribute ondragstart</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link']; +function dropSelection(event,element) + {document.querySelectorAll('div')[element].appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[element])?' PASS ':' FAIL '));} +function start(event) + {for(var i = 0; i != 3; i++) + {document.querySelectorAll('div')[i].setAttribute('dropzone',effects[i] + ' string:text/uri-list')} + } +</script> +</head> +<body> +<div ondrop="dropSelection(event,0)"/> +<div ondrop="dropSelection(event,1)"/> +<div ondrop="dropSelection(event,2)"/> +<p ondragstart="start(event)"><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>You should be able to drag link and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/021.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/021.xhtml new file mode 100644 index 0000000000..441c860b73 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/021.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: removing dropzone attribute ondragstart</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:maroon; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:purple;} +div:nth-child(3) + {background-color:fuchsia;} +</style> +<script type="application/ecmascript"> +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event,element) + {document.querySelectorAll('div')[element].appendChild(document.createTextNode(' FAIL ')); + selectText();} +function start(event) + {for(var i = 0; i != 3; i++) + {document.querySelectorAll('div')[i].removeAttribute('dropzone')} + } +</script> +</head> +<body onload="selectText()"> +<div ondrop="dropSelection(event,0)" dropzone="copy string:text/plain"/> +<div ondrop="dropSelection(event,1)" dropzone="move string:text/plain"/> +<div ondrop="dropSelection(event,2)" dropzone="link string:text/plain"/> +<p ondragstart="start(event)">Drag me</p> +<p>You should not be able to drop selection onto any of the red boxes above.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/022.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/022.xhtml new file mode 100644 index 0000000000..7318d556ca --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/022.xhtml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: changing dropzone attribute ondragstart</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link']; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event,element) + {document.querySelectorAll('div')[element].appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[element])?' PASS ':' FAIL ')); + selectText();} +function start(event) + {for(var i = 0; i != 3; i++) + {document.querySelectorAll('div')[i].setAttribute('dropzone',effects[i] + ' string:text/plain')} + } +</script> +</head> +<body onload="selectText()"> +<div ondrop="dropSelection(event,0)" dropzone="link string:text/plain"/> +<div ondrop="dropSelection(event,1)" dropzone="copy string:text/plain"/> +<div ondrop="dropSelection(event,2)" dropzone="move string:text/plain"/> +<p ondragstart="start(event)">Drag me</p> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/023.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/023.xhtml new file mode 100644 index 0000000000..eb5dd04f22 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/023.xhtml @@ -0,0 +1,40 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>drofEffect after drop event is cancelled</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link'], result = false, e = 0; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event,element) + {event.preventDefault(); + e = element; + if(event.dataTransfer.dropEffect == effects[element]) + {result = true} + selectText();} +function endDrag(event) + {document.querySelectorAll('div')[e].appendChild(document.createTextNode((result && event.dataTransfer.dropEffect == effects[e])?' PASS ':' FAIL '));} +</script> +</head> +<body onload="selectText()"> +<div ondrop="dropSelection(event,0)" dropzone="copy string:text/plain"/> +<div ondrop="dropSelection(event,1)" dropzone="move string:text/plain"/> +<div ondrop="dropSelection(event,2)" dropzone="link string:text/plain"/> +<p ondragend="endDrag(event)">Drag me</p> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/024.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/024.xhtml new file mode 100644 index 0000000000..ec5acdb949 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/024.xhtml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: invalid value of effectAllowed</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link'], i = 0; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event) + {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[i] && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); + i = (i + 1)%3; + selectText();} +function start(event) + {event.dataTransfer.effectAllowed = effects[i]; + event.dataTransfer.effectAllowed = 'fail';} +</script> +</head> +<body onload="selectText()"> +<p ondragstart="start(event)">Drag me</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/025.html b/testing/web-platform/tests/html/editing/dnd/drop/025.html new file mode 100644 index 0000000000..491006b3ff --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/025.html @@ -0,0 +1,162 @@ +<!DOCTYPE html> +<title>drag & drop - writing to dropEffect</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div * { + display: none; + } + body > div + div { + background-color: navy; + left: 250px; + } + body > div + div + div { + background-color: fuchsia; + left: 500px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], fails = [], doneonce = false, seenevent = {}; + orange.ondragstart = function(e) { + e.dataTransfer.setData('Text', 'dummy text'); + e.dataTransfer.effectAllowed = 'all'; + if( seenevent[e.type] ) { return; } + seenevent[e.type] = true; + if( e.dataTransfer.dropEffect != 'none' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of none'; + } + try{ e.dataTransfer.dropEffect = 'move' } catch(err) { + fails[fails.length] = e.type + ' dropEffect threw on setting'; + } + if( e.dataTransfer.dropEffect != 'move' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move (seems to be readonly)'; + } + }; + orange.ondrag = orange.nextSibling.ondragleave = function(e) { + if( seenevent[e.type] ) { return; } + seenevent[e.type] = true; + if( e.dataTransfer.dropEffect != 'none' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of none'; + } + try{ e.dataTransfer.dropEffect = 'move' } catch(err) { + fails[fails.length] = e.type + ' dropEffect threw on setting'; + } + if( e.dataTransfer.dropEffect != 'move' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move (seems to be readonly)'; + } + }; + orange.nextSibling.ondragenter = function(e) { + e.preventDefault(); + if( seenevent[e.type] ) { return; } + seenevent[e.type] = true; + if( e.dataTransfer.dropEffect != 'copy' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of copy'; + } + try{ e.dataTransfer.dropEffect = 'move' } catch(err) { + fails[fails.length] = e.type + ' dropEffect threw on setting'; + } + if( e.dataTransfer.dropEffect != 'move' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move (seems to be readonly)'; + } + }; + orange.nextSibling.ondragover = function(e) { + e.preventDefault(); + if( seenevent[e.type] ) { + e.dataTransfer.dropEffect = 'link'; + return; + } + if( !doneonce ) { + if( e.dataTransfer.dropEffect != 'copy' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of copy'; + } + try{ e.dataTransfer.dropEffect = 'move' } catch(err) { + fails[fails.length] = e.type + ' dropEffect threw on setting'; + } + if( e.dataTransfer.dropEffect != 'move' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move (seems to be readonly)'; + } + doneonce = true; + } else { + seenevent[e.type] = true; + if( e.dataTransfer.dropEffect != 'copy' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of copy on second attempt'; + } + try{ e.dataTransfer.dropEffect = 'link' } catch(err2) { + fails[fails.length] = e.type + ' dropEffect threw on setting'; + } + if( e.dataTransfer.dropEffect != 'link' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of link on second attempt (seems to be readonly)'; + } + doneonce = true; + } + }; + orange.nextSibling.ondrop = function(e) { + e.preventDefault(); + if( seenevent[e.type] ) { return; } + seenevent[e.type] = true; + if( e.dataTransfer.dropEffect != 'link' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of link'; + } + try{ e.dataTransfer.dropEffect = 'move' } catch(err) { + fails[fails.length] = e.type + ' dropEffect threw on setting'; + } + if( e.dataTransfer.dropEffect != 'move' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move (seems to be readonly)'; + } + }; + orange.ondragend = function(e) { + if( seenevent[e.type] ) { return; } + seenevent[e.type] = true; + if( e.dataTransfer.dropEffect != 'move' ) { + //under-specified in the spec, but part of the spec related to cancelling a drag says: + //"set the current drag operation to the value of the dropEffect attribute of the DragEvent + //object's dataTransfer object as it stood after the event dispatch finished." + //this does not cover successful drags, but it makes sense to be consistent + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move'; + } + try{ e.dataTransfer.dropEffect = 'copy' } catch(err) { + fails[fails.length] = e.type + ' dropEffect threw on setting'; + } + if( e.dataTransfer.dropEffect != 'copy' ) { + fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of copy (seems to be readonly)'; + } + if( !seenevent.dragstart ) { + fails[fails.length] = 'dragstart did not fire'; + } + if( !seenevent.drag ) { + fails[fails.length] = 'drag did not fire'; + } + if( !seenevent.dragenter ) { + fails[fails.length] = 'dragenter did not fire'; + } + if( !seenevent.dragover ) { + fails[fails.length] = 'dragover did not fire enough times'; + } + if( !seenevent.dragleave ) { + fails[fails.length] = 'dragleave did not fire'; + } + if( !seenevent.drop ) { + fails[fails.length] = 'drop did not fire'; + } + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + }; +}; + +</script> + +<div draggable='true'></div><div></div><div></div> + +<p>Use your pointing device to drag the orange box to the pink box, then back to the blue box, and release it.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/026.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/026.xhtml new file mode 100644 index 0000000000..f7f838b763 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/026.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: multiple values in dropzone</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:olive; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:green;} +div:nth-child(3) + {background-color:teal;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','move','link']; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event,element) + {document.querySelectorAll('div')[element].appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[element])?' PASS ':' FAIL ')); + selectText();} +</script> +</head> +<body onload="selectText()"> +<div ondrop="dropSelection(event,0)" dropzone="copy string:text/plain string:text/x-example"/> +<div ondrop="dropSelection(event,1)" dropzone="move file:text/plain string:text/plain"/> +<div ondrop="dropSelection(event,2)" dropzone="link file:image/png string:text/plain"/> +<p>Drag me</p> +<p>You should be able to drag selection and drop it onto any of the green boxes.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/027.xhtml b/testing/web-platform/tests/html/editing/dnd/drop/027.xhtml new file mode 100644 index 0000000000..5e2b41544b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/027.xhtml @@ -0,0 +1,34 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: non matching values in dropzone</title> +<style type="text/css"> +div + {display:inline-block; + vertical-align:top; + background-color:maroon; + color:white; + padding:20px; + width:100px; + height:100px;} +div:nth-child(2) + {background-color:purple;} +div:nth-child(3) + {background-color:fuchsia;} +</style> +<script type="application/ecmascript"> +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropSelection(event,element) + {document.querySelectorAll('div')[element].appendChild(document.createTextNode(' FAIL ')); + selectText();} +</script> +</head> +<body onload="selectText()"> +<div ondrop="dropSelection(event,0)" dropzone="copy file:text/plain"/> +<div ondrop="dropSelection(event,1)" dropzone="move file:text/plain string:text/x-example"/> +<div ondrop="dropSelection(event,2)" dropzone="link string:text/x-example"/> +<p ondragstart="start(event)">Drag me</p> +<p>You should not be able to drop selection onto any of the red boxes above.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/drop/028.html b/testing/web-platform/tests/html/editing/dnd/drop/028.html new file mode 100644 index 0000000000..ab5725ad00 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/drop/028.html @@ -0,0 +1,42 @@ +<!doctype html> +<html> + <head> + <title>Dropping element with uninitialized effectAllowed</title> + <style type="text/css"> +div, p { + margin: 0.2em; + height: 70px; + width: 400px; + background: orange; + color: black; +} +p { + background: navy; + color: white; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var dragmicro = document.getElementsByTagName('div')[0]; + dragmicro.ondragstart = function (e) { + e.dataTransfer.setData('text/plain','dummy text'); + }; + var droptarget = document.getElementsByTagName('p')[0]; + droptarget.ondragenter = droptarget.ondragover = function (e) { + e.preventDefault(); + }; + droptarget.ondrop = function (e) { + e.preventDefault(); + this.innerHTML = 'PASS'; + }; +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <div draggable="true">Drag this rectangle.</div> + <p>Drop onto this rectangle. Fail if this text does not change.</p> + + </body> +</html> |