summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/editing/dnd/overlay/044.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/editing/dnd/overlay/044.html')
-rw-r--r--testing/web-platform/tests/html/editing/dnd/overlay/044.html53
1 files changed, 53 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/044.html b/testing/web-platform/tests/html/editing/dnd/overlay/044.html
new file mode 100644
index 0000000000..6632738207
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/overlay/044.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<title>drag &amp; drop - dragging selections inside draggable elements</title>
+<style>
+ body > div {
+ height: 200px;
+ width: 200px;
+ background-color: orange;
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ }
+ body > div + div {
+ background-color: fuchsia;
+ left: 250px;
+ }
+ p:first-of-type {
+ margin-top: 220px;
+ }
+</style>
+
+<script>
+
+window.onload = function() {
+ var orange = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[1];
+
+ orange.ondragstart = function(e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('extra/data', 'parent bubble');
+ };
+ fuchsia.ondragenter = fuchsia.ondragover = function(e) {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'copy';
+ };
+ fuchsia.ondrop = function(e) {
+ e.preventDefault();
+ var passed = ( e.dataTransfer.getData('text/plain') == 'text dummy' ) && ( e.dataTransfer.getData('extra/data') == 'parent bubble' );
+ document.getElementsByTagName('p')[0].innerHTML = passed ? 'PASS' : 'FAIL';
+ };
+ var range = document.createRange();
+ range.selectNodeContents(orange);
+ range.setStart(orange.firstChild,6);
+ range.setEnd(orange.firstChild,16);
+ window.getSelection().addRange(range);
+
+};
+
+</script>
+
+<div draggable='true'>Dummy text dummy text</div><div></div>
+
+<p>Use your pointing device to <strong>drag the selected text</strong> to the pink box, then release it. While dragging, the drag placeholder should show that only the selected text is being dragged.</p>
+<p>(If no text is selected, you will need to use your browser's functionality to select &quot;text dummy&quot; in the orange box.)</p>
+<noscript><p>Enable JavaScript and reload</p></noscript>