diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/html/editing | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/editing')
968 files changed, 36784 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/editing/activation/click.html b/testing/web-platform/tests/html/editing/activation/click.html new file mode 100644 index 0000000000..edbc477db6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/activation/click.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset=utf-8> +<title>HTMLElement#click</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<div id=log></div> +<script> +test(function() { + var element = document.createElement("div"); + var received = false; + element.addEventListener("click", this.step_func(function(e) { + received = true; + assert_false(e.isTrusted, "Event should not be trusted") + })); + element.click(); + assert_true(received, "click event should have been dispatched synchronously"); +}) +</script> diff --git a/testing/web-platform/tests/html/editing/activation/click_checkbox.html b/testing/web-platform/tests/html/editing/activation/click_checkbox.html new file mode 100644 index 0000000000..ab81cbf063 --- /dev/null +++ b/testing/web-platform/tests/html/editing/activation/click_checkbox.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>Interaction of UI input and the click in progress flag</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<p>When you mouse click the checkbox below it should not be checked:</p> +<p><input type=checkbox onclick=this.click() id="target"></p> +<p>Now keyboard "click" the checkbox and confirm it's still not checked.</p> +<script> +promise_test(async t => { + var target = document.getElementById("target"); + var received = false; + target.addEventListener("click", t.step_func(function(e) { + received = true; + assert_false(target.checked, "The checkbox should not be checked") + })); + + await test_driver.click(target); + assert_true(received, "click event should have been dispatched synchronously"); +}); +</script> diff --git a/testing/web-platform/tests/html/editing/dnd/README b/testing/web-platform/tests/html/editing/dnd/README new file mode 100644 index 0000000000..aeda217e29 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/README @@ -0,0 +1,23 @@ +This is a test suite for the drag and drop API described in the HTML5 +specification: + + http://dev.w3.org/html5/spec/dnd.html#dnd + +Tests in target-origin/ relate to a proposed spec extension and are not covered +by HTML5 drafts at the time of writing. Contact Opera Sofware for details, and +mention CT-1656. + +Tests in synthetic/ relate to incomplete parts of the HTML5 specification, +which allows synthetic events to be created. For compatibility with others, +the dataTransfer parameter allows null, undefined and other objects. Objects +will create a synthetic dataTransfer. To provide maximum functionality, +synthetic dataTransfer will have its own synthetic data store, detatched from +the real data store used by real drag events (actual user interaction). For +security, real dataTransfer objects will remember the real event's protection +status inside synthetic events (the spec bases their protection only on the +event type, and does not consider the difference between real and synthetic +events). + +Tests in platform/plugin are based on assumed "good" behaviour, where the +appropriate events are passed to the plugin. Platforms should determine if any +deviations from the expected results are problematic.
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/001.html b/testing/web-platform/tests/html/editing/dnd/canvas/001.html new file mode 100644 index 0000000000..2d3b4dd8ed --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/001.html @@ -0,0 +1,67 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Canvas drag and drop carrying image as dataURL</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list')); + document.querySelector('div').appendChild(c);} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png'));} +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern above to the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" +/> +<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();} +async function test() { + const canvas = document.querySelector('canvas'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + addImage(event); + const img = document.querySelector('img'); + assert_equals(img.src, canvas.toDataURL('image/png')); + return true; + } + + dragDropTest(canvas, div, onDropCallBack, 'Dragging the canvas to the bottom div should turn it green'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/002.html b/testing/web-platform/tests/html/editing/dnd/canvas/002.html new file mode 100644 index 0000000000..c9a22ed6db --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/002.html @@ -0,0 +1,56 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Drag and drop: dropping block element onto canvas</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = 'green'; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false">Canvas</canvas> +</p> +<script> +async function test(){ + const canvas = document.querySelector('canvas'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + paint(event.dataTransfer.getData('text/plain')); + let style = getComputedStyle(div); + let currentColor = "rgb(0, 128, 0)"; + assert_equals(style.getPropertyValue("background-color"), currentColor); + return true; + } + + dragDropTest(div, canvas, onDropCallBack, 'Dragging the canvas to the bottom div should turn it green'); +}; +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/003-1.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/003-1.xhtml new file mode 100644 index 0000000000..22adda8720 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/003-1.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop: helper file</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +body + /* Center the div in this iframe since we know the iframe size (it's fixed + * in the parent page to 'width:150px; height:150px;') */ + {margin-top:65px; + margin-left:65px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/003.html b/testing/web-platform/tests/html/editing/dnd/canvas/003.html new file mode 100644 index 0000000000..b479341db1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/003.html @@ -0,0 +1,59 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Drag and drop from iframe: dropping block element onto canvas</title> +<style type="text/css"> +iframe + {width:150px; + height:150px; + border-style:none;} +</style> +<script> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<p><iframe src="003-1.xhtml">Green box</iframe></p> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false">Canvas</canvas> +</p> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const iframe = document.querySelector('iframe'); + const innerDoc = iframe.contentDocument || iframe.contentWindow.document; + const div = innerDoc.querySelector('div'); + const canvas = document.querySelector('canvas'); + function onDropCallBack(event) { + paint(event.dataTransfer.getData('text/plain')); + let style = window.getComputedStyle(canvas); + let currentColor = "rgba(0, 0, 0, 0)"; + assert_equals(style.getPropertyValue("background-color"), currentColor); + return true; + } + + dragDropTest(iframe, canvas, onDropCallBack, 'Dragging the canvas to the bottom iframe should turn it green'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/004.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/004.xhtml new file mode 100644 index 0000000000..5b03ed22f5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/004.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop from object: dropping block element onto canvas</title> +<style type="text/css"> +object + {width:150px; + height:150px; + border-style:none;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<p><object type="application/xhtml+xml" data="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cstyle%20type%3D%22text/css%22%3Ediv%7Bwidth%3A20px%3Bheight%3A20px%3Bbackground-color%3Agreen%3B%7D%3C/style%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20%27green%27%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%3E%3Cdiv%20draggable%3D%22true%22%20ondragstart%3D%22start%28event%29%22/%3E%3C/body%3E%3C/html%3E">Green box</object></p> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/005.html b/testing/web-platform/tests/html/editing/dnd/canvas/005.html new file mode 100644 index 0000000000..33ed630fe0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/005.html @@ -0,0 +1,49 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Drag and drop to iframe: dropping block element onto canvas</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +iframe + {width:200px; + height:200px; + border-style:none;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p><iframe src="helper-drop-here-canvas.xhtml">Canvas</iframe></p> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const iframe = document.querySelector('iframe'); + const innerDoc = iframe.contentDocument || iframe.contentWindow.document; + const div = document.querySelector('div'); + const canvas = innerDoc.querySelector('canvas'); + function onDropCallBack(event) { + let style = window.getComputedStyle(canvas); + let currentColor = "rgba(0, 0, 0, 0)"; + assert_equals(style.getPropertyValue("background-color"), currentColor); + return true; + } + + dragDropTest(div, canvas, onDropCallBack, 'Dragging the div to the bottom iframe should turn it green', iframe); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/006.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/006.xhtml new file mode 100644 index 0000000000..39274f4213 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/006.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop to object: dropping block element onto canvas</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +object + {width:200px; + height:200px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p><object type="application/xhtml+xml" data="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20paint%28color%29%7Bvar%20canvas%20%3D%20document.querySelector%28%27canvas%27%29%2Cc%20%3D%20canvas.getContext%28%272d%27%29%3Bc.fillStyle%20%3D%20color%3Bc.beginPath%28%29%3Bc.moveTo%280%2C0%29%3Bc.lineTo%28100%2C0%29%3Bc.lineTo%28100%2C100%29%3Bc.lineTo%280%2C100%29%3Bc.closePath%28%29%3Bc.fill%28%29%3B%7Dfunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20document.querySelector%28%27input%27%29.value%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%20onload%3D%22paint%28%27gray%27%29%22%3E%3Cp%3E%3Ccanvas%20width%3D%22100%22%20height%3D%22100%22%20ondragenter%3D%22event.preventDefault%28%29%22%20ondragover%3D%22return%20false%22%20ondrop%3D%22paint%28event.dataTransfer.getData%28%27text/plain%27%29%29%22%3ECanvas%3C/canvas%3E%3C/p%3E%3C/body%3E%3C/html%3E">Canvas</object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/007.html b/testing/web-platform/tests/html/editing/dnd/canvas/007.html new file mode 100644 index 0000000000..d0ff4f64ba --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/007.html @@ -0,0 +1,42 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Drag and drop between iframes: dropping block element onto canvas</title> +<style type="text/css"> +iframe + {width:300px; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-green-box.xhtml">Green box</iframe></p> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p><iframe src="helper-drop-here-canvas.xhtml" id="iframe-2">Canvas</iframe></p> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const iframe = document.querySelector('iframe'); + const iframeTwo = document.getElementById('iframe-2'); + const innerDoc = iframe.contentDocument || iframe.contentWindow.document; + const div = innerDoc.querySelector('div'); + const innerDocTwo = iframeTwo.contentDocument || iframe.contentWindow.document; + const canvas = innerDocTwo.querySelector('canvas'); + function onDropCallBack(event) { + let style = window.getComputedStyle(canvas); + let currentColor = "rgba(0, 0, 0, 0)"; + assert_equals(style.getPropertyValue("background-color"), currentColor); + return true; + } + + dragDropTest(iframe, canvas, onDropCallBack, 'Dragging the iframe to the bottom iframe should turn it green', iframeTwo); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/008.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/008.xhtml new file mode 100644 index 0000000000..aa85769165 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/008.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop from iframe to object: dropping block element onto canvas</title> +<style type="text/css"> +iframe, object + {width:300px; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-green-box.xhtml">Green box</iframe></p> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p><object type="application/xhtml+xml" data="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20paint%28color%29%7Bvar%20canvas%20%3D%20document.querySelector%28%27canvas%27%29%2Cc%20%3D%20canvas.getContext%28%272d%27%29%3Bc.fillStyle%20%3D%20color%3Bc.beginPath%28%29%3Bc.moveTo%280%2C0%29%3Bc.lineTo%28100%2C0%29%3Bc.lineTo%28100%2C100%29%3Bc.lineTo%280%2C100%29%3Bc.closePath%28%29%3Bc.fill%28%29%3B%7Dfunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20document.querySelector%28%27input%27%29.value%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%20onload%3D%22paint%28%27gray%27%29%22%3E%3Cp%3E%3Ccanvas%20width%3D%22100%22%20height%3D%22100%22%20ondragenter%3D%22event.preventDefault%28%29%22%20ondragover%3D%22return%20false%22%20ondrop%3D%22paint%28event.dataTransfer.getData%28%27text/plain%27%29%29%22%3ECanvas%3C/canvas%3E%3C/p%3E%3C/body%3E%3C/html%3E">Canvas</object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/009.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/009.xhtml new file mode 100644 index 0000000000..94e95c6a98 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/009.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop between objects: dropping block element onto canvas</title> +<style type="text/css"> +object + {width:300px; + height:200px;} +</style> +</head> +<body> +<p><object type="application/xhtml+xml" data="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cstyle%20type%3D%22text/css%22%3Ediv%7Bwidth%3A20px%3Bheight%3A20px%3Bbackground-color%3Agreen%3B%7D%3C/style%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20%27green%27%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%3E%3Cdiv%20draggable%3D%22true%22%20ondragstart%3D%22start%28event%29%22/%3E%3C/body%3E%3C/html%3E">Green box</object></p> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p><object type="application/xhtml+xml" data="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20paint%28color%29%7Bvar%20canvas%20%3D%20document.querySelector%28%27canvas%27%29%2Cc%20%3D%20canvas.getContext%28%272d%27%29%3Bc.fillStyle%20%3D%20color%3Bc.beginPath%28%29%3Bc.moveTo%280%2C0%29%3Bc.lineTo%28100%2C0%29%3Bc.lineTo%28100%2C100%29%3Bc.lineTo%280%2C100%29%3Bc.closePath%28%29%3Bc.fill%28%29%3B%7Dfunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20document.querySelector%28%27input%27%29.value%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%20onload%3D%22paint%28%27gray%27%29%22%3E%3Cp%3E%3Ccanvas%20width%3D%22100%22%20height%3D%22100%22%20ondragenter%3D%22event.preventDefault%28%29%22%20ondragover%3D%22return%20false%22%20ondrop%3D%22paint%28event.dataTransfer.getData%28%27text/plain%27%29%29%22%3ECanvas%3C/canvas%3E%3C/p%3E%3C/body%3E%3C/html%3E">Canvas</object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/010-1.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/010-1.xhtml new file mode 100644 index 0000000000..19f43581c7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/010-1.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop: helper file</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/010.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/010.xhtml new file mode 100644 index 0000000000..0b24a3082f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/010.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop between frames: dropping block element onto canvas</title> +</head> +<frameset rows="50%, 50%"> +<frame src="010-1.xhtml"/> +<frame src="helper-drop-here-canvas.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/011.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/011.xhtml new file mode 100644 index 0000000000..40da4e9677 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/011.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop between dataURL frames: dropping block element onto canvas</title> +</head> +<frameset rows="50%, 50%"> +<frame src="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cstyle%20type%3D%22text/css%22%3Ediv%7Bwidth%3A20px%3Bheight%3A20px%3Bbackground-color%3Agreen%3B%7D%3C/style%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20%27green%27%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%3E%3Cdiv%20draggable%3D%22true%22%20ondragstart%3D%22start%28event%29%22/%3E%3Cp%3EDrag%20green%20box%20above%20to%20the%20gray%20canvas%20below.%20Canvas%20should%20turn%20green%20when%20you%20drop%20green%20box%20on%20it.%3C/p%3E%3C/body%3E%3C/html%3E"/> +<frame src="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20paint%28color%29%7Bvar%20canvas%20%3D%20document.querySelector%28%27canvas%27%29%2Cc%20%3D%20canvas.getContext%28%272d%27%29%3Bc.fillStyle%20%3D%20color%3Bc.beginPath%28%29%3Bc.moveTo%280%2C0%29%3Bc.lineTo%28100%2C0%29%3Bc.lineTo%28100%2C100%29%3Bc.lineTo%280%2C100%29%3Bc.closePath%28%29%3Bc.fill%28%29%3B%7Dfunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20document.querySelector%28%27input%27%29.value%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%20onload%3D%22paint%28%27gray%27%29%22%3E%3Cp%3E%3Ccanvas%20width%3D%22100%22%20height%3D%22100%22%20ondragenter%3D%22event.preventDefault%28%29%22%20ondragover%3D%22return%20false%22%20ondrop%3D%22paint%28event.dataTransfer.getData%28%27text/plain%27%29%29%22%3ECanvas%3C/canvas%3E%3C/p%3E%3C/body%3E%3C/html%3E"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/012.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/012.xhtml new file mode 100644 index 0000000000..b4f30c652b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/012.xhtml @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop and vertical scrolling: dropping block element onto canvas inside scrollable container</title> +<style type="text/css"> +div[draggable] + {width:20px; + height:20px; + background-color:green;} +p + div + {height:100px; + width:150px; + overflow-y:scroll;} +canvas + {display:block; + margin-top:100px;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<div draggable="true" ondragstart="start(event)"/> +<p>You should be able to drag green box above to the gray canvas at the bottom of scrollable container (dragging towards the bottom edge triggers scrolling). Canvas should be repainted to match dropped color.</p> +<div> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/013.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/013.xhtml new file mode 100644 index 0000000000..e2e3646c86 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/013.xhtml @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop and horizontal scrolling: dropping block element onto canvas inside scrollable container</title> +<style type="text/css"> +div[draggable] + {width:20px; + height:20px; + background-color:green;} +p + div + {height:150px; + width:100px; + overflow-x:scroll;} +canvas + {display:block; + margin-left:100px;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<div draggable="true" ondragstart="start(event)"/> +<p>You should be able to drag green box above to the gray canvas at the right edge of scrollable container (dragging towards the right edge triggers scrolling). Canvas should be repainted to match dropped color.</p> +<div> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/014.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/014.xhtml new file mode 100644 index 0000000000..425c97b6c4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/014.xhtml @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop and scrolling: dropping block element onto canvas inside scrollable container</title> +<style type="text/css"> +div[draggable] + {width:20px; + height:20px; + background-color:green;} +p + div + {height:100px; + width:100px; + overflow:scroll;} +canvas + {display:block; + margin:100px 0 0 100px;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<div draggable="true" ondragstart="start(event)"/> +<p>You should be able to drag green box above to the gray canvas in the right-bottom corner of the scrollable container (dragging towards the corner triggers scrolling). Canvas should be repainted to match dropped color.</p> +<div> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/cross-domain/001-manual.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/cross-domain/001-manual.xhtml new file mode 100644 index 0000000000..08512add47 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/cross-domain/001-manual.xhtml @@ -0,0 +1,59 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross-domain canvas data must not populate the dataTransfer</title> +<script src="../../resources/crossorigin.sub.js"></script> +<style type="text/css"> +div { + width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy; +} +p:first-child { + padding-left:12px; +} +#image { visibility: hidden; } +</style> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true">Canvas</canvas> +</p> +<p>Drag the navy square above to the box below.</p> +<div></div> +<p><img id="image" alt="" width="100" height="100" /></p> + +<script><![CDATA[ +document.getElementsByTagName("img")[0].src = crossOriginUrl("www", "../../resources/100x100-navy.png"); + +window.onload = function() { + var canvas = document.getElementsByTagName('canvas')[0], div = document.getElementsByTagName('div')[0], failed = []; + var context = canvas.getContext('2d'); + var image = document.getElementById('image'); + context.drawImage(image, 0, 0); + div.ondragover = div.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + div.ondrop = canvas.ondragstart = function(e) { + if( e.type == 'dragstart' ) { + e.dataTransfer.setData('Text', 'dummy text'); + e.dataTransfer.dropEffect = 'copy'; + } + for( var i = 0; i < e.dataTransfer.types.length; i++ ) { + if( e.dataTransfer.types[i].match(/image\//) ) { + failed[failed.length] = e.dataTransfer.types[i]; + } + } + if( e.type == 'drop' ) { + e.preventDefault(); + document.getElementsByTagName('p')[1].innerHTML = failed.length ? ( 'FAIL (found ' + failed.join() + ')' ) : 'PASS'; + } + }; +}; +]]></script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/helper-drag-me-green-box.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/helper-drag-me-green-box.xhtml new file mode 100644 index 0000000000..91a9fa9808 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/helper-drag-me-green-box.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop: helper file</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +body + /* Center the div in this iframe since we know the iframe size (it's fixed + * in the parent page to 'width:300px; height:200px;') */ + {margin-top:90px; + margin-left:140px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/></body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/helper-drop-here-canvas.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/helper-drop-here-canvas.xhtml new file mode 100644 index 0000000000..db305689f5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/helper-drop-here-canvas.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop: helper file</title> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<p> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/crashers/dialog-001.html b/testing/web-platform/tests/html/editing/dnd/crashers/dialog-001.html new file mode 100644 index 0000000000..9ab62787b0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/crashers/dialog-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset='utf-8'> +<title>drag & drop – crash when drag is interrupted by dialogs</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; + } + p { + margin-top: 220px; + } +</style> + +<script> +window.onload = function() { + var doneonce = false; + document.getElementsByTagName('div')[0].ondragstart = function(e) { + alert( doneonce ? 'Dismiss this dialog. PASS if the browser does not crash.' : 'Dismiss this dialog. The browser should not crash. Without re-focusing the page first, try dragging the orange square a second time. If a second alert does not appear, release the drag, and then try dragging the orange square a third time.' ); + doneonce = true; + }; +}; +</script> + +<div draggable='true' itemscope></div><div></div> + +<p>Try to drag the orange square onto the blue square.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/cross-document/001-1.html b/testing/web-platform/tests/html/editing/dnd/cross-document/001-1.html new file mode 100644 index 0000000000..1b3540b035 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/cross-document/001-1.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>drag & drop - cross-document data drop</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: blue; + } +</style> + +<script> +window.onload = function() { + var blue = document.getElementsByTagName('div')[0], fails = []; + blue.ondragover = blue.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + if( e.dataTransfer.getData('text') ) { + fails[fails.length] = '"' + e.dataTransfer.getData('text') + '" exposed during event ' + e.type; + } + }; + blue.ondrop = function(e) { + e.preventDefault(); + if( !e.dataTransfer.types.length ) { + fails[fails.length] = 'no types found during event drop'; + } + var foundtext = false; + for( var i = 0; i < e.dataTransfer.types.length; i++ ) { + if( e.dataTransfer.types[i] == 'text/plain' ) { + foundtext = true; + break; + } + } + if( !foundtext ) { + fails[fails.length] = 'text/plain type not found during event drop'; + } + if( e.dataTransfer.getData('text') != 'dummy text' ) { + fails[fails.length] = 'getData returned ' + e.dataTransfer.getData('text') + ' instead of "dummy text"'; + } + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS'; + }; +}; +</script> + +<p>Drag the orange square onto the blue square. Fail if this text does not change.</p> +<div></div> + +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/cross-document/001.html b/testing/web-platform/tests/html/editing/dnd/cross-document/001.html new file mode 100644 index 0000000000..dd9906e8c1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/cross-document/001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>drag & drop - simple cross-document data drop</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text', 'dummy text'); + }; +}; +</script> + +<div draggable="true"></div> +<p><iframe src="001-1.html" height="300" width="500"></iframe></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/cross-document/002-manual.html b/testing/web-platform/tests/html/editing/dnd/cross-document/002-manual.html new file mode 100644 index 0000000000..0a549d3804 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/cross-document/002-manual.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>drag & drop - cross-domain cross-document data drop</title> +<script src="../resources/crossorigin.sub.js"></script> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text', 'dummy text'); + }; +}; +</script> + +<div draggable="true"></div> +<p><iframe height="300" width="500"></iframe></p> +<script>document.getElementsByTagName("iframe")[0].src = crossOriginUrl("www", "001-1.html");</script> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/cross-document/003-1.html b/testing/web-platform/tests/html/editing/dnd/cross-document/003-1.html new file mode 100644 index 0000000000..2cefd83209 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/cross-document/003-1.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<title>drag & drop - cross-document data drop</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: blue; + } +</style> + +<script> +window.onload = function() { + var blue = document.getElementsByTagName('div')[0], fails = []; + blue.ondragover = blue.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + if( !parent.evs[e.type] ) { parent.evs[e.type] = {}; } + parent.evs[e.type].dataTransfer = e.dataTransfer; + parent.evs[e.type].items = e.dataTransfer.items; + parent.evs[e.type].types = e.dataTransfer.types; + parent.evs[e.type].files = e.dataTransfer.files; + if( parent.evs[e.type].dataTransfer != e.dataTransfer ) { + fails[fails.length] = '.dataTransfer is not returning the same object during '+e.type; + } + if( !e.dataTransfer.items ) { + fails[fails.length] = '.items is not returning anything during '+e.type; + } else if( parent.evs[e.type].items !== e.dataTransfer.items ) { + fails[fails.length] = '.items is not returning the same object during '+e.type; + } + if( !e.dataTransfer.types ) { + fails[fails.length] = '.types is not returning anything during '+e.type; + } else if( parent.evs[e.type].types !== e.dataTransfer.types ) { + fails[fails.length] = '.types is not returning the same object during '+e.type; + } + if( !e.dataTransfer.files ) { + fails[fails.length] = '.files is not returning anything during '+e.type; + } else if( parent.evs[e.type].files !== e.dataTransfer.files ) { + fails[fails.length] = '.files is not returning the same object during '+e.type; + } + //http://dev.w3.org/html5/spec/dnd.html#datatransfer + //"The * attribute must return a * object associated with the DataTransfer object." + //Note that it is associated with the DataTransfer object, *not* the data store + //http://dev.w3.org/html5/spec/dnd.html#dragevent + //"when a user agent is required to fire a DND event named e at an element, using a particular drag data store... + //Let dataTransfer be a newly created DataTransfer object associated with the given drag data store." + //A new DataTransfer object therefore means a new set of properties, not the same ones as last event + if( parent.evs.dragstart.dataTransfer === e.dataTransfer ) { + fails[fails.length] = '.dataTransfer is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.items && parent.evs.dragstart.items === e.dataTransfer.items ) { + fails[fails.length] = '.items is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.types && parent.evs.dragstart.types === e.dataTransfer.types ) { + fails[fails.length] = '.types is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.files && parent.evs.dragstart.files === e.dataTransfer.files ) { + fails[fails.length] = '.files is returning the same object during '+e.type+' as it did during dragstart'; + } + }; + blue.ondrop = function(e) { + parent.evs[e.type] = {}; + parent.evs[e.type].dataTransfer = e.dataTransfer; + parent.evs[e.type].items = e.dataTransfer.items; + parent.evs[e.type].types = e.dataTransfer.types; + parent.evs[e.type].files = e.dataTransfer.files; + if( parent.evs[e.type].dataTransfer !== e.dataTransfer ) { + fails[fails.length] = '.dataTransfer is not returning the same object during '+e.type; + } + if( !e.dataTransfer.items ) { + fails[fails.length] = '.items is not returning anything during '+e.type; + } else if( parent.evs[e.type].items !== e.dataTransfer.items ) { + fails[fails.length] = '.items is not returning the same object during '+e.type; + } + if( !e.dataTransfer.types ) { + fails[fails.length] = '.types is not returning anything during '+e.type; + } else if( parent.evs[e.type].types !== e.dataTransfer.types ) { + fails[fails.length] = '.types is not returning the same object during '+e.type; + } + if( !e.dataTransfer.files ) { + fails[fails.length] = '.files is not returning anything during '+e.type; + } else if( parent.evs[e.type].files !== e.dataTransfer.files ) { + fails[fails.length] = '.files is not returning the same object during '+e.type; + } + if( parent.evs.dragstart.dataTransfer === e.dataTransfer ) { + fails[fails.length] = '.dataTransfer is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.items && parent.evs.dragstart.items === e.dataTransfer.items ) { + fails[fails.length] = '.items is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.types && parent.evs.dragstart.types === e.dataTransfer.types ) { + fails[fails.length] = '.types is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.files && parent.evs.dragstart.files === e.dataTransfer.files ) { + fails[fails.length] = '.files is returning the same object during '+e.type+' as it did during dragstart'; + } + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS'; + }; +}; +</script> + +<p>Drag the orange square onto the blue square. Fail if this text does not change.</p> +<div></div> + +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/cross-document/003.html b/testing/web-platform/tests/html/editing/dnd/cross-document/003.html new file mode 100644 index 0000000000..ba44f9b770 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/cross-document/003.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>drag & drop - cross-document variable retention within event handlers</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +var evs = {}; +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text', 'dummy text'); + evs[e.type] = {}; + evs[e.type].dataTransfer = e.dataTransfer; + evs[e.type].items = e.dataTransfer.items; + evs[e.type].types = e.dataTransfer.types; + evs[e.type].files = e.dataTransfer.files; + }; +}; +</script> + +<div draggable="true"></div> +<p><iframe src="003-1.html" height="300" width="500"></iframe></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/001.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/001.xhtml new file mode 100644 index 0000000000..d46170d61b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/001.xhtml @@ -0,0 +1,71 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.setData/getData during canvas drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +<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();} +data[1] = canvas.toDataURL('image/png'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/002.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/002.xhtml new file mode 100644 index 0000000000..b9fb47d765 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/002.xhtml @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.setData/getData during PNG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['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==', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/003.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/003.xhtml new file mode 100644 index 0000000000..e7baaa37ea --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/003.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.setData/getData during SVG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['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', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/004.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/004.xhtml new file mode 100644 index 0000000000..c7f8dc8db6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/004.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.setData/getData during text input selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/005.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/005.xhtml new file mode 100644 index 0000000000..78655c82b7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/005.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.setData/getData during selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/006.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/006.xhtml new file mode 100644 index 0000000000..c6c96842a9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/006.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.setData/getData during link drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p> +<p>Drag link above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/007.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/007.xhtml new file mode 100644 index 0000000000..b6b3cdafe6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/007.xhtml @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.setData/getData during block element drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:green;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('p + div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/> +<p>Drag green box above to the gray box below and drop it. Gray box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/008.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/008.xhtml new file mode 100644 index 0000000000..2d80f751f0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/008.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Influence of reload during drag and drop on datastore</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:green;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + window.location.reload();} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('p + div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/> +<p>Drag green box above to the gray box below and drop it. Gray box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/009-1.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/009-1.xhtml new file mode 100644 index 0000000000..fd2c117524 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/009-1.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Redirect during drag and drop: helper file</title> +<style type="text/css"> +html, body + {height:100%;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('body').setAttribute('style','background-color:teal;color:white;');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"> +<p>Drop box here. Page should turn green and test results should appear below.</p> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/009.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/009.xhtml new file mode 100644 index 0000000000..9d6c321f63 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/009.xhtml @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Influence of redirect during drag and drop on datastore</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:navy;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + window.location = '009-1.xhtml'} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Try to drag box above. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/010-1.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/010-1.xhtml new file mode 100644 index 0000000000..086ae709ad --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/010-1.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>History navigation during drag and drop: helper file</title> +<style type="text/css"> +div[ondragenter] + {margin:200px 0 0 200px; + width:200px; + height:100px; + color:white; + background-color:navy;} +div[ondragenter]:before + {display:block; + content:""; + border-style:solid; + position:relative; + top:-50px; + left:-200px; + border-width:100px; + border-color:transparent navy transparent transparent;} +</style> +</head> +<body> +<p>Drag box to the blue arrow but don't drop it yet. You should be returned back to start page.</p> +<div ondragenter="event.preventDefault()" ondragover="history.go(-1)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/010.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/010.xhtml new file mode 100644 index 0000000000..5df966ba1b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/010.xhtml @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Influence of history navigation during drag and drop on datastore</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:green;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + window.location = '010-1.xhtml'} +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('p + div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag green box above. You will be redirected to new page. When you return back drop it on the gray box below. Gray box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/011.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/011.xhtml new file mode 100644 index 0000000000..96e38993f0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/011.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop datastore: dragging element to iframe</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:navy;} +iframe + {width:500px; + height:500px;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + } +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag box above to the frame below.</p> +<iframe src="helper-drop-box-here.xhtml">XHTML document</iframe> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/012.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/012.xhtml new file mode 100644 index 0000000000..42986c0b58 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/012.xhtml @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop datastore: dragging element to object</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:navy;} +object + {width:500px; + height:500px; + border:solid medium navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + } +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag box above to the frame below.</p> +<object type="application/xhtml+xml" data="helper-drop-box-here.xhtml">XHTML document</object> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/013-1.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/013-1.xhtml new file mode 100644 index 0000000000..538a964552 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/013-1.xhtml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop datastore: helper file</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + } +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag box above to the frame below.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/013.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/013.xhtml new file mode 100644 index 0000000000..312a66d1f2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/013.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop datastore: dragging element between frames</title> +</head> +<frameset rows="50%, 50%"> +<frame src="013-1.xhtml"/> +<frame src="helper-drop-box-here.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/014-1.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/014-1.xhtml new file mode 100644 index 0000000000..1163bde5af --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/014-1.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop datastore: helper file</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p> +<p>Drag link from one frame to the silver box in another frame and drop it. Silver box should turn green and test results should appear.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/014.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/014.xhtml new file mode 100644 index 0000000000..e1892c5a34 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/014.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop datastore: dragging element between two instances of document</title> +</head> +<frameset rows="50%, 50%"> +<frame src="014-1.xhtml"/> +<frame src="014-1.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/015-manual.html b/testing/web-platform/tests/html/editing/dnd/datastore/015-manual.html new file mode 100644 index 0000000000..604c1d4370 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/015-manual.html @@ -0,0 +1,63 @@ +<!doctype html> +<html> + <head> + <title>Using dataTransfer in new thread</title> + <style type="text/css"> +blockquote { height: 100px; width: 100px; background: orange; margin: 0; padding: 0; float: left; } +blockquote + blockquote { background: blue; } +blockquote + blockquote + blockquote { background: fuchsia; } +blockquote + div { clear: left; } + </style> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> + <script type="text/javascript"> +setup(function () {},{explicit_done:true,explicit_timeout:true}); +window.onload = function () { + + var orange = document.getElementsByTagName('blockquote')[0], + blue = document.getElementsByTagName('blockquote')[1], + fuchsia = document.getElementsByTagName('blockquote')[2], + evtdone = {}; + + orange.ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dragstart real data'); + var dataTransfer = e.dataTransfer; + setTimeout(function () { + test(function () { + assert_equals( dataTransfer.getData('text'), '', 'step 1' ); + dataTransfer.setData('text','new thread after dragstart'); + assert_equals( dataTransfer.getData('text'), '', 'step 2' ); + },'dragstart data store should be protected after new thread starts'); + },0); + }; + + fuchsia.ondragenter = fuchsia.ondragover = function (e) { + e.preventDefault(); + }; + + fuchsia.ondrop = function (e) { + e.preventDefault(); + var dataTransfer = e.dataTransfer; + setTimeout(function () { + test(function () { + assert_equals( dataTransfer.getData('text'), '', 'step 1' ); + dataTransfer.setData('text','new thread after dragstart'); + assert_equals( dataTransfer.getData('text'), '', 'step 2' ); + },'drop data store should be protected after new thread starts'); + done(); + },0); + }; + +}; + </script> + </head> + <body> + <p>Drag the orange square over the blue square then the fuchsia square, then release it.</p> + <blockquote draggable="true"></blockquote> + <blockquote></blockquote> + <blockquote></blockquote> + <div id="log"></div> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/016.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/016.xhtml new file mode 100644 index 0000000000..6370fe5240 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/016.xhtml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.clearData during PNG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,FAIL', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'], +l = 0; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.clearData(dataTypes[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length > l) + {say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/017.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/017.xhtml new file mode 100644 index 0000000000..ef0cf9fe11 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/017.xhtml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.clearData during SVG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['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', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'], +l = 0; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.clearData(dataTypes[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length > l) + {say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/018.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/018.xhtml new file mode 100644 index 0000000000..f68d722a99 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/018.xhtml @@ -0,0 +1,59 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.clearData during text input selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'], +l = 0; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.clearData(dataTypes[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length > l) + {say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/019.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/019.xhtml new file mode 100644 index 0000000000..0734a23164 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/019.xhtml @@ -0,0 +1,59 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.clearData during selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'], +l = 0; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.clearData(dataTypes[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length > l) + {say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/020.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/020.xhtml new file mode 100644 index 0000000000..b57ab102ad --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/020.xhtml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.clearData during link drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,FAIL', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'], +l = 0; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.clearData(dataTypes[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length > l) + {say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p> +<p>Drag link above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/021.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/021.xhtml new file mode 100644 index 0000000000..428a5cf392 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/021.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.clearData during block element drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:green;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'], +l = 0; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.clearData(dataTypes[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length > l) + {say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('p + div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/> +<p>Drag green box above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/022.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/022.xhtml new file mode 100644 index 0000000000..660a4b4435 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/022.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.clearData during canvas drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'], +l = 0; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.clearData(dataTypes[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length > l) + {say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +<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();} +data[1] = canvas.toDataURL('image/png'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/023.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/023.xhtml new file mode 100644 index 0000000000..fd236ca98a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/023.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.clearData and reload during block element drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:green;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.clearData(dataTypes[i]);} + window.location.reload();} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + } +function dataDrop(event) + {for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('p + div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/> +<p>Drag green box above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/024.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/024.xhtml new file mode 100644 index 0000000000..93a35f3160 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/024.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Clear datastore data during PNG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,FAIL', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + event.dataTransfer.clearData(); + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length != 0) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/025.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/025.xhtml new file mode 100644 index 0000000000..6b803518b7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/025.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Clear datastore data during SVG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['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', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + event.dataTransfer.clearData(); + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length != 0) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/026.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/026.xhtml new file mode 100644 index 0000000000..50523e2d90 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/026.xhtml @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Clear datastore data during text input selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + event.dataTransfer.clearData(); + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length != 0) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/027.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/027.xhtml new file mode 100644 index 0000000000..9d69ddddc9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/027.xhtml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Clear datastore data during selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'], +l = 0; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + event.dataTransfer.clearData(); + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length != 0) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/028.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/028.xhtml new file mode 100644 index 0000000000..145864fce3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/028.xhtml @@ -0,0 +1,62 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Clear datastore data during link drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,FAIL', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + event.dataTransfer.clearData(); + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length != 0) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p> +<p>Drag link above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/029.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/029.xhtml new file mode 100644 index 0000000000..f752f3c900 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/029.xhtml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Clear datastore data during block element drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:green;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + event.dataTransfer.clearData(); + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length != 0) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('p + div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/> +<p>Drag green box above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/030.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/030.xhtml new file mode 100644 index 0000000000..ad9bee4ce1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/030.xhtml @@ -0,0 +1,72 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Clear datastore data during canvas drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + l = event.dataTransfer.items.length; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + event.dataTransfer.clearData(); + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length != 0) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +<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();} +data[1] = canvas.toDataURL('image/png'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/031.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/031.xhtml new file mode 100644 index 0000000000..138142632c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/031.xhtml @@ -0,0 +1,141 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items during canvas drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = event.dataTransfer.items.length; i != 0; i--) + {if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1) + {delete event.dataTransfer.items[i-1]} + } + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +<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();} +data[1] = canvas.toDataURL('image/png'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/032.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/032.xhtml new file mode 100644 index 0000000000..130ce38821 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/032.xhtml @@ -0,0 +1,125 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items during PNG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['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==', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = event.dataTransfer.items.length; i != 0; i--) + {if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1) + {delete event.dataTransfer.items[i-1]} + } + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/033.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/033.xhtml new file mode 100644 index 0000000000..a91be79917 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/033.xhtml @@ -0,0 +1,125 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items during SVG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['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', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = event.dataTransfer.items.length; i != 0; i--) + {if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1) + {delete event.dataTransfer.items[i-1]} + } + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/034.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/034.xhtml new file mode 100644 index 0000000000..89a1a78dd3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/034.xhtml @@ -0,0 +1,126 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items during text input selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = event.dataTransfer.items.length; i != 0; i--) + {if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1) + {delete event.dataTransfer.items[i-1]} + } + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/035.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/035.xhtml new file mode 100644 index 0000000000..37b85bdb0b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/035.xhtml @@ -0,0 +1,126 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items during selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = event.dataTransfer.items.length; i != 0; i--) + {if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1) + {delete event.dataTransfer.items[i-1]} + } + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/036.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/036.xhtml new file mode 100644 index 0000000000..4799bc222e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/036.xhtml @@ -0,0 +1,125 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items during link drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = event.dataTransfer.items.length; i != 0; i--) + {if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1) + {delete event.dataTransfer.items[i-1]} + } + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p> +<p>Drag link above to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/037.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/037.xhtml new file mode 100644 index 0000000000..75ebf11ab1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/037.xhtml @@ -0,0 +1,127 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items during block element drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:green;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = event.dataTransfer.items.length; i != 0; i--) + {if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1) + {delete event.dataTransfer.items[i-1]} + } + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('p + div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/> +<p>Drag green box above to the gray box below and drop it. Gray box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/038.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/038.xhtml new file mode 100644 index 0000000000..afb6902416 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/038.xhtml @@ -0,0 +1,146 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items and getData during canvas drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.items.clear(); + event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +<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();} +data[1] = canvas.toDataURL('image/png'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/039.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/039.xhtml new file mode 100644 index 0000000000..fd73adab2a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/039.xhtml @@ -0,0 +1,131 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items and getData during PNG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['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==', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = event.dataTransfer.items.length; i != 0; i--) + {delete event.dataTransfer.items[i-1]} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/040.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/040.xhtml new file mode 100644 index 0000000000..fe545fa9ad --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/040.xhtml @@ -0,0 +1,131 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items and getData during SVG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['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', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = event.dataTransfer.items.length; i != 0; i--) + {delete event.dataTransfer.items[i-1]} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/041.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/041.xhtml new file mode 100644 index 0000000000..433dcf090f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/041.xhtml @@ -0,0 +1,132 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items and getData during text input selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = event.dataTransfer.items.length; i != 0; i--) + {delete event.dataTransfer.items[i-1]} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/042.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/042.xhtml new file mode 100644 index 0000000000..785889d981 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/042.xhtml @@ -0,0 +1,132 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items and getData during selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = event.dataTransfer.items.length; i != 0; i--) + {delete event.dataTransfer.items[i-1]} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/043.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/043.xhtml new file mode 100644 index 0000000000..76fe70a99b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/043.xhtml @@ -0,0 +1,131 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items and getData during link drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = event.dataTransfer.items.length; i != 0; i--) + {delete event.dataTransfer.items[i-1]} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p> +<p>Drag link above to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/044.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/044.xhtml new file mode 100644 index 0000000000..d3e08515df --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/044.xhtml @@ -0,0 +1,132 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.items and getData during block element drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:green;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.items.clear(); + event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('p + div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/> +<p>Drag green box above to the gray box below and drop it. Gray box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/045.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/045.xhtml new file mode 100644 index 0000000000..a98cba4ed8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/045.xhtml @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Text and url aliases</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:green;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text', 'url', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('p + div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/> +<p>Drag green box above to the gray box below and drop it. Gray box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/046.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/046.xhtml new file mode 100644 index 0000000000..a766f52ecf --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/046.xhtml @@ -0,0 +1,172 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.types during canvas drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.items.clear(); + event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +<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();} +data[1] = canvas.toDataURL('image/png'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/047.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/047.xhtml new file mode 100644 index 0000000000..c3148bff70 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/047.xhtml @@ -0,0 +1,157 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.types during PNG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['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==', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = event.dataTransfer.items.length; i != 0; i--) + {delete event.dataTransfer.items[i-1]} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/048.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/048.xhtml new file mode 100644 index 0000000000..c87793b6de --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/048.xhtml @@ -0,0 +1,157 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.types during SVG image drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['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', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = event.dataTransfer.items.length; i != 0; i--) + {delete event.dataTransfer.items[i-1]} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><img ondragstart="start(event)" ondrag="dragElement(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> +<p>Drag circle above to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/049.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/049.xhtml new file mode 100644 index 0000000000..06e2107ae4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/049.xhtml @@ -0,0 +1,158 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.types during text input selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = event.dataTransfer.items.length; i != 0; i--) + {delete event.dataTransfer.items[i-1]} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/050.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/050.xhtml new file mode 100644 index 0000000000..1cf766fed7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/050.xhtml @@ -0,0 +1,158 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.types during selection drag and drop</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = event.dataTransfer.items.length; i != 0; i--) + {delete event.dataTransfer.items[i-1]} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/051.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/051.xhtml new file mode 100644 index 0000000000..378af23f4b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/051.xhtml @@ -0,0 +1,157 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.types during link drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = event.dataTransfer.items.length; i != 0; i--) + {delete event.dataTransfer.items[i-1]} + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p> +<p>Drag link above to the silver box below and drop it. Silver box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/052.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/052.xhtml new file mode 100644 index 0000000000..597d31ac64 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/052.xhtml @@ -0,0 +1,158 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>dataTransfer.types during block element drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:green;} +p + div + {background-color:gray;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +e = 0, result = true; +function start(event) + {event.dataTransfer.items.clear(); + event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.items.add(data[i],dataTypes[i])} + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + } +function dragElement(event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function enterElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + } +function overElement(event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + } +function dataDrop(event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + if(event.dataTransfer.types.length != dataTypes.length) + {say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.types[i] != dataTypes[i]) + {say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')} + if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')} + } + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + document.querySelector('p + div').setAttribute('style','background-color:' + (result?'green':'red'));} +function say(it) + {result = false; + document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/> +<p>Drag green box above to the gray box below and drop it. Gray box should turn green.</p> +<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/053.html b/testing/web-platform/tests/html/editing/dnd/datastore/053.html new file mode 100644 index 0000000000..a893b8e489 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/053.html @@ -0,0 +1,83 @@ +<!doctype html> +<html> + <head> + <title>Adding a file to dnd data store</title> + <style type="text/css"> +span { display: inline-block; height: 100px; width: 100px; background: orange; } +span + span { background: blue; } + </style> + <script type="text/javascript"> +window.onload = function () { + var drag = document.getElementsByTagName('span')[0]; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'copy'; + var filein = document.getElementsByTagName('input')[0]; + if( !filein.files ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.'; + return; + } + if( !filein.files[0] ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.'; + return; + } + var thefile = filein.files[0]; + try { + e.dataTransfer.items.add(thefile); + } catch(err) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file'; + e.preventDefault(); + return; + } + if( e.dataTransfer.files.length != 1 ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store'; + e.preventDefault(); + return; + } + }; + var drop = document.getElementsByTagName('span')[1]; + drop.ondragenter = drop.ondragover = function (e) { + e.preventDefault(); + }; + drop.ondrop = function (e) { + e.preventDefault(); + if( document.getElementsByTagName('p')[0].innerHTML ) { return; } + if( e.dataTransfer.files.length != 1 ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store during drop'; + e.preventDefault(); + return; + } + if( !window.FileReader ) { + document.getElementsByTagName('p')[0].innerHTML = 'No FileReader constructor'; + e.preventDefault(); + return; + } + var reader = new FileReader(); + reader.onload = function () { + if( !reader.result ) { + document.getElementsByTagName('p')[0].innerHTML = 'No file data after load'; + } else if( !document.getElementsByTagName('p')[0].innerHTML ) { + document.getElementsByTagName('p')[0].innerHTML = 'PASS'; + } + }; + reader.readAsBinaryString(e.dataTransfer.files[0]); + setTimeout(function () { + if( !reader.result ) { + document.getElementsByTagName('p')[0].innerHTML = 'No file data after timeout'; + } + },1000); + }; +}; + </script> + </head> + <body> + <ol> + <li>Select a non-empty file on your computer using the following input: <input type="file"></li> + <li>Drag the orange square onto the blue square and release it:<br><span draggable="true"></span> <span></span><br> + If a prompt appears, accept it.</li> + <li>Fail if new text does not appear below.</li> + </ol> + <p></p> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/054.html b/testing/web-platform/tests/html/editing/dnd/datastore/054.html new file mode 100644 index 0000000000..cd42e63398 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/054.html @@ -0,0 +1,83 @@ +<!doctype html> +<html> + <head> + <title>Adding a file to dnd data store with drag out of window</title> + <style type="text/css"> +span { display: inline-block; height: 100px; width: 100px; background: orange; } +span + span { background: blue; } + </style> + <script type="text/javascript"> +window.onload = function () { + var drag = document.getElementsByTagName('span')[0]; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'copy'; + var filein = document.getElementsByTagName('input')[0]; + if( !filein.files ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.'; + return; + } + if( !filein.files[0] ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.'; + return; + } + var thefile = filein.files[0]; + try { + e.dataTransfer.items.add(thefile); + } catch(err) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file'; + e.preventDefault(); + return; + } + if( e.dataTransfer.files.length != 1 ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store'; + e.preventDefault(); + return; + } + }; + var drop = document.getElementsByTagName('span')[1]; + drop.ondragenter = drop.ondragover = function (e) { + e.preventDefault(); + }; + drop.ondrop = function (e) { + e.preventDefault(); + if( document.getElementsByTagName('p')[0].innerHTML ) { return; } + if( e.dataTransfer.files.length != 1 ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store during drop'; + e.preventDefault(); + return; + } + if( !window.FileReader ) { + document.getElementsByTagName('p')[0].innerHTML = 'No FileReader constructor'; + e.preventDefault(); + return; + } + var reader = new FileReader(); + reader.onload = function () { + if( !reader.result ) { + document.getElementsByTagName('p')[0].innerHTML = 'No file data after load'; + } else if( !document.getElementsByTagName('p')[0].innerHTML ) { + document.getElementsByTagName('p')[0].innerHTML = 'PASS'; + } + }; + reader.readAsBinaryString(e.dataTransfer.files[0]); + setTimeout(function () { + if( !reader.result ) { + document.getElementsByTagName('p')[0].innerHTML = 'No file data after timeout'; + } + },1000); + }; +}; + </script> + </head> + <body> + <ol> + <li>Select a non-empty file on your computer using the following input: <input type="file"></li> + <li>Drag the orange square outside the browser window (not over the taskbar), then back onto the blue square and release it:<br><span draggable="true"></span> <span></span><br> + If a prompt appears, accept it.</li> + <li>Fail if new text does not appear below.</li> + </ol> + <p></p> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/055.html b/testing/web-platform/tests/html/editing/dnd/datastore/055.html new file mode 100644 index 0000000000..ac2e64ed35 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/055.html @@ -0,0 +1,46 @@ +<!doctype html> +<html> + <head> + <title>text/uri-list conversion</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } + </style> + <script type="text/javascript"> +window.onload = function () { + var drag = document.getElementsByTagName('div')[0], fails = []; + drag.ondragstart = function (e) { + e.dataTransfer.setData('url','http://example.com/'); + if( !e.dataTransfer.getData('url') ) { + document.getElementsByTagName('p')[0].innerHTML = "FAIL - getData('url') returned nothing"; + } else if( e.dataTransfer.getData('url') != e.dataTransfer.getData('text/uri-list') ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - text/uri-list is not the same as url'; + } else { + + e.dataTransfer.setData('url','#foo\r\n http://example.com/#bar \r\n http://example.org/'); + if( e.dataTransfer.getData('url') != 'http://example.com/#bar' ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - only the first URL should be returned - "'+e.dataTransfer.getData('url')+'"'; + } else if( e.dataTransfer.getData('text/uri-list') != '#foo\r\n http://example.com/#bar \r\n http://example.org/' ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - text/uri-list should return the full data'; + } else { + + e.dataTransfer.setData('url',' '); + if( e.dataTransfer.getData('url') ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - space was not a valid URL so an empty string should have been returned'; + } else { + document.getElementsByTagName('p')[0].innerHTML = 'PASS'; + } + + } + + } + e.preventDefault(); + }; +}; + </script> + </head> + <body> + <div draggable="true"></div> + <p>Attempt to drag the orange square.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/056.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/056.xhtml new file mode 100644 index 0000000000..c9a3e700de --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/056.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Caseinsensitivity in dataTransfer.setData/getData</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData((i%2 == 0)?(dataTypes[i].toUpperCase()):(dataTypes[i].replace(/i/g,'I')), data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData((i%2 == 0)?(dataTypes[i].replace(/t/g,'T')):(dataTypes[i].toUpperCase())) == data[i])?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p> +<p>Drag link above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/057.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/057.xhtml new file mode 100644 index 0000000000..b4f5659d27 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/057.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Various data item type strings in dataTransfer.setData/getData</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'http://', '<?xml version="1.0" encoding="utf-8"?>', '<html xmlns="http://www.w3.org/1999/xhtml"/>', '<mn>1</mn>', '☺', 'type="text/html"', '[({#;:,.`~*-_=+\|/%!?&$@^})]'], +data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + } +function dragElement(event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + } +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(string' + i + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('div').setAttribute('style','background-color:green');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p> +<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p> +<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/058.html b/testing/web-platform/tests/html/editing/dnd/datastore/058.html new file mode 100644 index 0000000000..c1e7ad95b6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/058.html @@ -0,0 +1,79 @@ +<!doctype html> +<html> + <head> + <title>Dropping file into dropzone</title> + <style type="text/css"> +span { display: inline-block; height: 100px; width: 100px; background: orange; } +span + span { background: blue; } + </style> + <script type="text/javascript"> +window.onload = function () { + var drag = document.getElementsByTagName('span')[0]; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'copy'; + var filein = document.getElementsByTagName('input')[0]; + if( !filein.files ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.'; + return; + } + if( !filein.files[0] ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.'; + return; + } + var thefile = filein.files[0]; + try { + e.dataTransfer.items.add(thefile); + } catch(err) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file'; + e.preventDefault(); + return; + } + if( e.dataTransfer.files.length != 1 ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store'; + e.preventDefault(); + return; + } + }; + document.getElementsByTagName('span')[1].ondrop = function (e) { + e.preventDefault(); + if( document.getElementsByTagName('p')[0].innerHTML ) { return; } + if( e.dataTransfer.files.length != 1 ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store during drop'; + e.preventDefault(); + return; + } + if( !window.FileReader ) { + document.getElementsByTagName('p')[0].innerHTML = 'No FileReader constructor'; + e.preventDefault(); + return; + } + var reader = new FileReader(); + reader.onload = function () { + if( !reader.result ) { + document.getElementsByTagName('p')[0].innerHTML = 'No file data after load'; + } else if( !document.getElementsByTagName('p')[0].innerHTML ) { + document.getElementsByTagName('p')[0].innerHTML = 'PASS'; + } + }; + reader.readAsBinaryString(e.dataTransfer.files[0]); + setTimeout(function () { + if( !reader.result ) { + document.getElementsByTagName('p')[0].innerHTML = 'No file data after timeout'; + } + },1000); + }; +}; + </script> + </head> + <body> + <ol> + <li>Select a non-empty plain text file on your computer using the following input: <input type="file"></li> + <li>Drag the orange square onto the blue square and release it:<br><span draggable="true"></span> <span dropzone="copy file:text/plain"></span><br> + If a prompt appears, accept it.</li> + <li>Fail if new text does not appear below.</li> + </ol> + <p></p> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/datatransfer-constructor-001.html b/testing/web-platform/tests/html/editing/dnd/datastore/datatransfer-constructor-001.html new file mode 100644 index 0000000000..26f7421b65 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/datatransfer-constructor-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>DataTransfer constructor test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +test(function() { + var dt = new DataTransfer(); + assert_equals(dt.dropEffect, "none"); + assert_equals(dt.effectAllowed, "none"); + assert_equals(dt.items.length, 0); + assert_equals(dt.types.length, 0); +}, "Verify DataTransfer constructor") +</script> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/datatransfer-types.html b/testing/web-platform/tests/html/editing/dnd/datastore/datatransfer-types.html new file mode 100644 index 0000000000..cd9568987e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/datatransfer-types.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>DataTransfer types attribute test</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#the-datatransfer-interface"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +test(() => { + const dt = new DataTransfer(); + assert_true(Object.isFrozen(dt.types), "types must be a FrozenArray<>"); + assert_true(Array.isArray(dt.types), "A FrozenArray<> must be an Array"); + assert_equals(dt.types.length, 0, "types must be originally empty"); + assert_equals(dt.types, dt.types, + "types must return the same object when the data store item list has not changed"); + + const dt2 = new DataTransfer(); + assert_not_equals(dt2.types, dt.types, + "Different DataTransfer objects must return different FrozenArrays"); +}, "type's state on DataTransfer creation"); + +test(() => { + const dt = new DataTransfer(); + dt.setData("text/plain", "foo"); + + let old_types = dt.types; + assert_equals(old_types, dt.types); + + // Clearing the data store via DataTransferItemList changes + // DataTransfer's data store, so types will return a new FrozenArray. + dt.items.clear(); + assert_not_equals(old_types, dt.types); + + // Clearing an empty list does not change it. + old_types = dt.types; + dt.items.clear(); + assert_equals(old_types, dt.types); + + // Removing a non-existent item from the data store does not change it. + dt.setData("text/plain", "foo"); + old_types = dt.types; + dt.items.remove(42); + assert_equals(old_types, dt.types); + + // Removing a valid item from the data store changes it. + dt.items.remove(0); + assert_equals(dt.items.length, 0); + assert_not_equals(old_types, dt.types); + + // Adding a new item to the list changes it, types will return a new + // FrozenArray. + old_types = dt.types; + dt.items.add("foo", "text/plain"); + assert_equals(dt.items.length, 1); + assert_not_equals(old_types, dt.types); + + // Failing to add a new item via DataTransferItemList does not + // change the underlying data store. + old_types = dt.types; + assert_throws_dom("NotSupportedError", () => { + dt.items.add("bar", "text/plain"); + }, "Adding an item whose type is already present throws an exception"); + assert_equals(dt.items.length, 1); + assert_equals(old_types, dt.types); +}, "Relationship between types and items"); + +test(() => { + const dt = new DataTransfer(); + dt.setData("text/plain", "foo"); + + let old_types = dt.types; + assert_equals(old_types, dt.types); + + // Replacing the text/plain item causes the underlying data store item list + // to change, so types will return a new FrozenArray. + dt.setData("text/plain", "bar"); + assert_equals(dt.types.length, 1); + assert_not_equals(old_types, dt.types); + old_types = dt.types; + + // Adding a new item causes the underlying data store item list to change, so + // types will return a new FrozenArray. + dt.setData("text/uri-list", "baz quux"); + assert_equals(dt.types.length, 2); + assert_not_equals(old_types, dt.types); + + // Removing the text/uri-list item causes the underlying data store item list + // to change, so even though the item list only has a text/plain item, types + // will return a new FrozenArray that does not match |old_types|. + dt.clearData("text/uri-list"); + assert_equals(dt.types.length, 1); + assert_not_equals(old_types, dt.types); + old_types = dt.types; + + // This clearData() call did not change the underlying item list, so types is + // still the same as |old_types|. + dt.clearData("text/uri-list"); + assert_equals(dt.types.length, 1); + assert_equals(old_types, dt.types); + + dt.clearData(); + old_types = dt.types; + + // Clearing an already empty list does not change the underlying item list, + // so types is stil the same as |old_types|. + dt.clearData(); + assert_equals(old_types, dt.types); +}, "type's identity"); + +test(() => { + const dt = new DataTransfer(); + const types = dt.types; + dt.types = 42; + assert_equals(dt.types, types); +}, "Verify type is a read-only attribute"); + +test(() => { + const dt = new DataTransfer(); + assert_array_equals(dt.types, []); + + // The added File is respected + dt.items.add(new File(["abc"], "test.txt")); + assert_array_equals(dt.types, ["Files"]); + + // "Files" is always last even after setting data + dt.setData("text/plain", "test"); + assert_array_equals(dt.types, ["text/plain", "Files"]); + + // Removing the File changes types + dt.items.remove(0); + assert_array_equals(dt.types, ["text/plain"]); + + // Adding back a File as the second item works correctly. + dt.items.add(new File(["abc"], "test.txt")); + assert_array_equals(dt.types, ["text/plain", "Files"]); +}, "DataTransfer containing files"); +</script> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/datatransferitemlist-remove.html b/testing/web-platform/tests/html/editing/dnd/datastore/datatransferitemlist-remove.html new file mode 100644 index 0000000000..19316181c5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/datatransferitemlist-remove.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>DataTransferItemList remove() method</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<script> +"use strict"; + +// https://github.com/whatwg/html/issues/2925 +test(() => { + const dt = new DataTransfer(); + + // Must not throw + dt.items.remove(0); + dt.items.remove(1); + + dt.items.add("data", "text/plain"); + + // Must not throw + dt.items.remove(1); +}, "remove()ing an out-of-bounds index does nothing"); +</script> diff --git a/testing/web-platform/tests/html/editing/dnd/datastore/helper-drop-box-here.xhtml b/testing/web-platform/tests/html/editing/dnd/datastore/helper-drop-box-here.xhtml new file mode 100644 index 0000000000..d6b9d6fcef --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/datastore/helper-drop-box-here.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop datastore: helper file</title> +<style type="text/css"> +html, body + {height:100%;} +</style> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS']; +function enterElement(event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));} +function dataDrop(event) + {say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL')); + for(var i = 0; i != dataTypes.length; i++) + {say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));} + document.querySelector('body').setAttribute('style','background-color:teal;color:white;');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +]]> +</script> +</head> +<body ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"> +<p>Drop box here. Frame should turn green and test results should appear below.</p> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dom/draggable.html b/testing/web-platform/tests/html/editing/dnd/dom/draggable.html new file mode 100644 index 0000000000..600b0ee350 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dom/draggable.html @@ -0,0 +1,207 @@ +<!DOCTYPE html> +<meta charset='utf-8'> +<title>drag & drop – draggable attribute</title> +<style>div#test_elements { display: none; }</style> + +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> + +<noscript><p>Enable JavaScript and reload.</p></noscript> + +<div id='log'></div> + +<div id='test_elements'> + + <div id='defaults'> + <a href='#'>.</a> + <div></div> + <img src='../resources/1x1-transparent.gif'> + </div> + + <div id='draggable'> + <a draggable='true' href='#'>.</a> + <div draggable='true'></div> + <img draggable='true' src='../resources/1x1-transparent.gif'> + </div> + + <div id='draggable_false'> + <a draggable='false' href='#'>.</a> + <div draggable='false'></div> + <img draggable='false' src='../resources/1x1-transparent.gif'> + </div> + + <div id='draggable_auto'> + <a draggable='auto' href='#'>.</a> + <div draggable='auto'></div> + <img draggable='auto' src='../resources/1x1-transparent.gif'> + </div> + + <div id='draggable_foo'> + <a draggable='foo' href='#'>.</a> + <div draggable='foo'></div> + <img draggable='foo' src='../resources/1x1-transparent.gif'> + </div> + + <div id='changable_true'> + <a href='#'>.</a> + <div></div> + <img src='../resources/1x1-transparent.gif'> + </div> + + <div id='changable_false'> + <a href='#'>.</a> + <div></div> + <img src='../resources/1x1-transparent.gif'> + </div> + + <div id='changable_foo'> + <a href='#'>.</a> + <div></div> + <img src='../resources/1x1-transparent.gif'> + </div> + + +</div> + +<script> +var foo = document.getElementById('foo'); + +/* Does the .draggable property exist? */ +test(function () { + assert_idl_attribute(document.querySelector('#defaults a'), 'draggable'); +}, 'an <a> element should have a draggable property'); + +test(function () { + assert_idl_attribute(document.querySelector('#defaults div'), 'draggable'); +}, 'a <div> element should have a draggable property'); + +test(function () { + assert_idl_attribute(document.querySelector('#defaults img'), 'draggable'); +}, 'an <img> element should have a draggable property'); + + +/* Check the default values on different types of elements */ +test(function () { + assert_true(document.querySelector('#defaults a').draggable); +}, 'an <a> element should be draggable by default'); + +test(function () { + assert_false(document.querySelector('#defaults div').draggable); +}, 'a <div> element should not be draggable by default'); + +test(function () { + assert_true(document.querySelector('#defaults img').draggable); +}, 'an <img> element should be draggable by default'); + + +/* If draggable="true" is set, all the elements should be draggable */ +test(function () { + assert_true(document.querySelector('#draggable a').draggable); +}, 'an <a> element with draggable="true" should be draggable'); + +test(function () { + assert_true(document.querySelector('#draggable div').draggable); +}, 'a <div> element with draggable="true" should be draggable'); + +test(function () { + assert_true(document.querySelector('#draggable img').draggable); +}, 'an <img> element with draggable="true" should be draggable'); + + +/* If draggable="false" is set, none of the elements should be draggable */ +test(function () { + assert_false(document.querySelector('#draggable_false a').draggable); +}, 'an <a> element with draggable="false" should not be draggable'); + +test(function () { + assert_false(document.querySelector('#draggable_false div').draggable); +}, 'a <div> element with draggable="false" should not be draggable'); + +test(function () { + assert_false(document.querySelector('#draggable_false img').draggable); +}, 'an <img> element with draggable="false" should not be draggable'); + + +/* If draggable="auto" is set, fall back to the defaults */ +test(function () { + assert_true(document.querySelector('#draggable_auto a').draggable); +}, 'an <a> element with draggable="auto" should be draggable'); + +test(function () { + assert_false(document.querySelector('#draggable_auto div').draggable); +}, 'a <div> element with draggable="auto" should not be draggable'); + +test(function () { + assert_true(document.querySelector('#draggable_auto img').draggable); +}, 'an <img> element with draggable="auto" should be draggable'); + + +/* If draggable="foo" is set, fall back to the defaults */ +test(function () { + assert_true(document.querySelector('#draggable_foo a').draggable); +}, 'an <a> element with draggable="foo" should be draggable'); + +test(function () { + assert_false(document.querySelector('#draggable_foo div').draggable); +}, 'a <div> element with draggable="foo" should not be draggable'); + +test(function () { + assert_true(document.querySelector('#draggable_foo img').draggable); +}, 'an <img> element with draggable="foo" should be draggable'); + + +/* Setting the element.droppable attribute to true for all elements */ +test(function () { + document.querySelector('#changable_true a').draggable = true; + assert_true(document.querySelector('#changable_true a').draggable); +}, 'an <a> element with the draggable property set to true through a script should be draggable'); + +test(function () { + document.querySelector('#changable_true div').draggable = true; + assert_true(document.querySelector('#changable_true div').draggable); +}, 'a <div> element with the draggable property set to true through a script should be draggable'); + +test(function () { + document.querySelector('#changable_true img').draggable = true; + assert_true(document.querySelector('#changable_true img').draggable); +}, 'an <img> element with the draggable property set to true through a script should be draggable'); + + +/* Setting the element.droppable attribute to false for all elements */ +test(function () { + document.querySelector('#changable_false a').draggable = false; + assert_false(document.querySelector('#changable_false a').draggable); +}, 'an <a> element with the draggable property set to false through a script should not be draggable'); + +test(function () { + document.querySelector('#changable_false div').draggable = false; + assert_false(document.querySelector('#changable_false div').draggable); +}, 'a <div> element with the draggable property set to false through a script should not be draggable'); + +test(function () { + document.querySelector('#changable_false img').draggable = false; + assert_false(document.querySelector('#changable_false img').draggable); +}, 'an <img> element with the draggable property set to false through a script should not be draggable'); + + +/* Setting the element.droppable attribute to "foo" for all elements */ +test(function () { + document.querySelector('#changable_foo a').draggable = 'foo'; + assert_true(document.querySelector('#changable_foo a').draggable); +}, 'an <a> element with the draggable property set to "foo" through a script should be draggable'); + +test(function () { + document.querySelector('#changable_foo div').draggable = 'auto'; + assert_true(document.querySelector('#changable_foo div').draggable); +}, 'a <div> element with the draggable property set to "foo" through a script should be draggable'); + +test(function () { + document.querySelector('#changable_foo img').draggable = 'foo'; + assert_true(document.querySelector('#changable_foo img').draggable); +}, 'an <img> element with the draggable property set to "foo" through a script should be draggable'); +</script> + + + +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dom/events.html b/testing/web-platform/tests/html/editing/dnd/dom/events.html new file mode 100644 index 0000000000..e2b521f270 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dom/events.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset='utf-8'> +<title>drag & drop – events</title> + +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> + + +<noscript><p>Enable JavaScript and reload.</p></noscript> + +<div id='log'></div> + +<script> + +var element = document.createElement('div'); + +test(function () { + assert_equals(element.ondragstart, null); +}, 'element.ondragstart initial value'); + +test(function () { + assert_equals(element.ondrag, null); +}, 'element.ondrag must initial value'); + +test(function () { + assert_equals(element.ondragenter, null); +}, 'element.ondragenter initial value'); + +test(function () { + assert_equals(element.ondragleave, null); +}, 'element.ondragleave initial value'); + +test(function () { + assert_equals(element.ondragover, null); +}, 'element.ondragover initial value'); + +test(function () { + assert_equals(element.ondrop, null); +}, 'element.ondrop initial value'); + +test(function () { + assert_equals(element.ondragend, null); +}, 'element.ondragend initial value'); + +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dom/specials.html b/testing/web-platform/tests/html/editing/dnd/dom/specials.html new file mode 100644 index 0000000000..4327eac872 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dom/specials.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Exposing drag & drop events on document and window</title> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> + </head> + <body> + + <div id="log">Enable script and reload</div> + <script type="text/javascript"> +var allEvents = ['ondragstart','ondrag','ondragover','ondragenter','ondragleave','ondrop','ondragend']; +var allObjects = [['window',window],['document',document],['HTMLElement',document.createElement('div')]]; +var fails = []; +for( var i = 0; i < allObjects.length; i++ ) { + for( var j = 0; j < allEvents.length; j++ ) { + test(function () { + assert_true(allEvents[j] in allObjects[i][1]); + }, allEvents[j] + ' in ' + allObjects[i][0]); + } +} + </script> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/draggable-areas/border-radius.html b/testing/web-platform/tests/html/editing/dnd/draggable-areas/border-radius.html new file mode 100644 index 0000000000..f767850f9e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/draggable-areas/border-radius.html @@ -0,0 +1,25 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – draggable area boundaries, border-radius</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + border-radius: 100px; +} +div { + border: 1px solid black; + height: 200px; + width: 200px; +} +</style> + +<ol> + <li>Try dragging the white area within the black square, outside the blue + circle. It should <em>not</em> be draggable.</li> + <li>Drag the blue circle below. It should be draggable.</li> +</ol> + +<div><a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a></div> diff --git a/testing/web-platform/tests/html/editing/dnd/draggable-areas/border.html b/testing/web-platform/tests/html/editing/dnd/draggable-areas/border.html new file mode 100644 index 0000000000..1b6f8e9557 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/draggable-areas/border.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – draggable areas – border</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + border: 10px solid orange; +} +</style> + +<p>Try dragging the orange border of the blue box below, in a downwards direction. It should be draggable.</p> + +<a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/draggable-areas/box-shadow.html b/testing/web-platform/tests/html/editing/dnd/draggable-areas/box-shadow.html new file mode 100644 index 0000000000..4fc40cb0f8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/draggable-areas/box-shadow.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – draggable areas – box-shadow</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + box-shadow: 10px 10px 0 orange; +} +</style> + +<p>Try dragging the orange area along the sides of the blue box below. It should <em>not</em> be draggable.</p> + +<a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/draggable-areas/outline.html b/testing/web-platform/tests/html/editing/dnd/draggable-areas/outline.html new file mode 100644 index 0000000000..8872997fc0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/draggable-areas/outline.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – draggable areas – outline</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + outline: 10px solid orange; +} +</style> + +<p>Try dragging the orange border of the blue box below. It should <em>not</em> be draggable.</p> + +<a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/draggable-areas/transform.html b/testing/web-platform/tests/html/editing/dnd/draggable-areas/transform.html new file mode 100644 index 0000000000..6800c64ad4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/draggable-areas/transform.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – draggable area boundaries – transformed elements</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + margin-left: 100px; + -moz-transform: rotate(-45deg) skew(15deg, 15deg); + -o-transform: rotate(-45deg) skew(15deg, 15deg); + -webkit-transform: rotate(-45deg) skew(15deg, 15deg); + transform: rotate(-45deg) skew(15deg, 15deg); +} +</style> +<ol> + <li>Try dragging the blue box below by clicking and holding <em>just</em> + outside its skewed edges. It should <em>not</em> be draggable.</li> + <li><p>Drag the blue box below. It should be draggable.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a> diff --git a/testing/web-platform/tests/html/editing/dnd/draggable-areas/z-index.html b/testing/web-platform/tests/html/editing/dnd/draggable-areas/z-index.html new file mode 100644 index 0000000000..b1f08cb789 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/draggable-areas/z-index.html @@ -0,0 +1,35 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 008</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 100px; + left: 10px; + z-index: 1; +} + +div { + background-color: orange; + position: absolute; + height: 200px; + width: 200px; + top: 150px; + left: 20px; + z-index: 2; + opacity: 0.9; +} + + +</style> + +<p>Click and hold the part of the orange box that overlaps the blue box. Then +move your pointing device. The blue box should <em>not</em> be dragged. + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a> + +<div></div> 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> diff --git a/testing/web-platform/tests/html/editing/dnd/dropzone/001.xhtml b/testing/web-platform/tests/html/editing/dnd/dropzone/001.xhtml new file mode 100644 index 0000000000..aa929f5724 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dropzone/001.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropzone attribute: copy</title> +<style type="text/css"> +div + {background-color:navy; + width:40px; + height:40px; + padding:40px; + color:white;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<div dropzone="copy string:text/plain" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'))"/> +<p>You should be able to drag selection to navy box below. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dropzone/002.xhtml b/testing/web-platform/tests/html/editing/dnd/dropzone/002.xhtml new file mode 100644 index 0000000000..1c4f483716 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dropzone/002.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropzone attribute: move</title> +<style type="text/css"> +div + {background-color:navy; + width:40px; + height:40px; + padding:40px; + color:white;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me"/></p> +<div dropzone="move string:text/plain" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'))"/> +<p>You should be able to drag selection to navy box below. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dropzone/003.xhtml b/testing/web-platform/tests/html/editing/dnd/dropzone/003.xhtml new file mode 100644 index 0000000000..baf359bc52 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dropzone/003.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropzone attribute: link</title> +<style type="text/css"> +div + {background-color:navy; + width:40px; + height:40px; + padding:40px; + color:white;} +</style> +</head> +<body> +<p><a href="data:text/plain,1">Drag me</a></p> +<div dropzone="link string:text/plain" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'))"/> +<p>You should be able to drag link to navy box below. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dropzone/004.xhtml b/testing/web-platform/tests/html/editing/dnd/dropzone/004.xhtml new file mode 100644 index 0000000000..b367435e1c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dropzone/004.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropzone and link drag and drop: allowed effects 'link','copyLink','linkMove' and 'all'</title> +<style type="text/css"> +div + {background-color:gray; + width:200px; + height:200px;} +</style> +<script type="application/ecmascript"> +var effects = ['link','copyLink','linkMove','all']; +function start(event) + {var e = parseInt(event.target.href.substring(16)); + event.dataTransfer.effectAllowed = effects[e];} +function finish(event) + {var e = parseInt(event.dataTransfer.getData('text/uri-list').substring(16,17)); + document.querySelectorAll('a')[e].firstChild.nodeValue = (event.dataTransfer.dropEffect == 'link' && event.dataTransfer.effectAllowed == effects[e])?'PASS':'FAIL';} +</script> +</head> +<body> +<p>Drag links one by one and drop them into gray box below, link text should be updated as you drop them.</p> +<p ondragstart="start(event)"> + <a href="data:text/plain,0">Link</a> + <a href="data:text/plain,1">Link</a> + <a href="data:text/plain,2">Link</a> + <a href="data:text/plain,3">Link</a> +</p> +<div dropzone="link string:text/uri-list" ondrop="finish(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dropzone/005.xhtml b/testing/web-platform/tests/html/editing/dnd/dropzone/005.xhtml new file mode 100644 index 0000000000..bdc61fde7c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dropzone/005.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropzone and link drag and drop: allowed effects 'copy','copyMove','copyLink' and 'all'</title> +<style type="text/css"> +div + {background-color:gray; + width:200px; + height:200px;} +</style> +<script type="application/ecmascript"> +var effects = ['copy','copyMove','copyLink','all']; +function start(event) + {var e = parseInt(event.target.href.substring(16)); + event.dataTransfer.effectAllowed = effects[e];} +function finish(event) + {var e = parseInt(event.dataTransfer.getData('text/uri-list').substring(16,17)); + document.querySelectorAll('a')[e].firstChild.nodeValue = (event.dataTransfer.dropEffect == 'copy' && event.dataTransfer.effectAllowed == effects[e])?'PASS':'FAIL';} +</script> +</head> +<body> +<p>Drag links one by one and drop them into gray box below, link text should be updated as you drop them.</p> +<p ondragstart="start(event)"> + <a href="data:text/plain,0">Link</a> + <a href="data:text/plain,1">Link</a> + <a href="data:text/plain,2">Link</a> + <a href="data:text/plain,3">Link</a> +</p> +<div dropzone="copy string:text/uri-list" ondrop="finish(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dropzone/006.xhtml b/testing/web-platform/tests/html/editing/dnd/dropzone/006.xhtml new file mode 100644 index 0000000000..a0bca3312d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dropzone/006.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropzone and link drag and drop: allowed effects 'move','copyMove','linkMove' and 'all'</title> +<style type="text/css"> +div + {background-color:gray; + width:200px; + height:200px;} +</style> +<script type="application/ecmascript"> +var effects = ['move','copyMove','linkMove','all']; +function start(event) + {var e = parseInt(event.target.href.substring(16)); + event.dataTransfer.effectAllowed = effects[e];} +function finish(event) + {var e = parseInt(event.dataTransfer.getData('text/uri-list').substring(16,17)); + document.querySelectorAll('a')[e].firstChild.nodeValue = (event.dataTransfer.dropEffect == 'move' && event.dataTransfer.effectAllowed == effects[e])?'PASS':'FAIL';} +</script> +</head> +<body> +<p>Drag links one by one and drop them into gray box below, link text should be updated as you drop them.</p> +<p ondragstart="start(event)"> + <a href="data:text/plain,0">Link</a> + <a href="data:text/plain,1">Link</a> + <a href="data:text/plain,2">Link</a> + <a href="data:text/plain,3">Link</a> +</p> +<div dropzone="move string:text/uri-list" ondrop="finish(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dropzone/007.html b/testing/web-platform/tests/html/editing/dnd/dropzone/007.html new file mode 100644 index 0000000000..ef0627a1e4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dropzone/007.html @@ -0,0 +1,54 @@ +<!doctype html> +<html> + <head> + <title>Dropzone should not affect the dropEffect seen by dragenter and dragover</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var drag = document.getElementsByTagName('div')[0]; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'all'; + }; + var drop = document.getElementsByTagName('div')[1], dragenter, dragover; + drop.ondragenter = function (e) { + dragenter = e.dataTransfer.dropEffect; + }; + drop.ondragover = function (e) { + dragover = e.dataTransfer.dropEffect; + }; + drop.ondrop = function (e) { + var sequence = ([dragenter,dragover,e.dataTransfer.dropEffect]).join('=>') + var desiredsequence = (['copy','copy','link']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[2].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div dropzone="link string:text/plain"></div> + <div> </div> + <p>Drag the orange square onto the blue square and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dropzone/008.html b/testing/web-platform/tests/html/editing/dnd/dropzone/008.html new file mode 100644 index 0000000000..4213e9f557 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dropzone/008.html @@ -0,0 +1,56 @@ +<!doctype html> +<html> + <head> + <title>Dropzone should not affect the dropEffect if dragover is cancelled</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var drag = document.getElementsByTagName('div')[0]; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'all'; + }; + var drop = document.getElementsByTagName('div')[1], dragenter, dragover; + drop.ondragenter = function (e) { + dragenter = e.dataTransfer.dropEffect; + e.preventDefault(); + }; + drop.ondragover = function (e) { + dragover = e.dataTransfer.dropEffect; + e.preventDefault(); + }; + drop.ondrop = function (e) { + var sequence = ([dragenter,dragover,e.dataTransfer.dropEffect]).join('=>') + var desiredsequence = (['copy','copy','copy']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[2].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div dropzone="link string:text/plain"></div> + <div> </div> + <p>Drag the orange square onto the blue square and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dropzone/009.html b/testing/web-platform/tests/html/editing/dnd/dropzone/009.html new file mode 100644 index 0000000000..c5ae10739a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dropzone/009.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> + <head> + <title>Dropping selection onto dropzone with JS disabled</title> + </head> + <body> + + <ol> + <li>Disable JavaScript</li> + <li>Select some text in this sentence.</li> + <li dropzone="copy string:text/plain">Drag the selection over this text.</li> + <li>If supported by the platform, the mouse cursor should show the drop-allowed cursor.</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/dropzone/010.html b/testing/web-platform/tests/html/editing/dnd/dropzone/010.html new file mode 100644 index 0000000000..44e112b2ba --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/dropzone/010.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> + <head> + <title>Dropping selection onto dropzone with no padding</title> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Select some text in this sentence.</li> + <li dropzone="copy string:text/plain" ondrop="this.parentNode.getElementsByTagName('li')[2].textContent='PASS';">Drag the selection over this text and release it.</li> + <li>This text should change.</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/001-1.xhtml b/testing/web-platform/tests/html/editing/dnd/events/001-1.xhtml new file mode 100644 index 0000000000..001d0b5c90 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/001-1.xhtml @@ -0,0 +1,51 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame drag and drop: helper file</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))" ondragleave="leavePage(event)"> +<p ondragstart="start(event)" ondragend="endDrag(event)">Drag me</p> +<p>Drag selected text to the frame below and drop it there. Both circles should turn green once text is dropped into lower frame.</p> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/001.xhtml b/testing/web-platform/tests/html/editing/dnd/events/001.xhtml new file mode 100644 index 0000000000..4c8e7d563e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/001.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of selection between frames</title> +</head> +<frameset rows="50%, 50%"> +<frame src="001-1.xhtml"/> +<frame src="helper-drop-here-body-circle.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/002-1.xhtml b/testing/web-platform/tests/html/editing/dnd/events/002-1.xhtml new file mode 100644 index 0000000000..7e575b2eb6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/002-1.xhtml @@ -0,0 +1,51 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame drag and drop: helper file</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body onload="document.querySelector('input').select()" ondragleave="leavePage(event)"> +<p ondragstart="start(event)" ondragend="endDrag(event)"><input value="Drag me"/></p> +<p>Drag selected text to the frame below and drop it there. Both circles should turn green once text is dropped into lower frame.</p> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/002.xhtml b/testing/web-platform/tests/html/editing/dnd/events/002.xhtml new file mode 100644 index 0000000000..9bd76db260 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/002.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of text input selection between frames</title> +</head> +<frameset rows="50%, 50%"> +<frame src="002-1.xhtml"/> +<frame src="helper-drop-here-body-circle.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/003-1.xhtml b/testing/web-platform/tests/html/editing/dnd/events/003-1.xhtml new file mode 100644 index 0000000000..2c7d3b9191 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/003-1.xhtml @@ -0,0 +1,51 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame drag and drop: helper file</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragleave="leavePage(event)"> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondragend="endDrag(event)">Drag me</a></p> +<p>Drag link to the frame below and drop it there. Both circles should turn green once link is dropped into lower frame.</p> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/003.xhtml b/testing/web-platform/tests/html/editing/dnd/events/003.xhtml new file mode 100644 index 0000000000..c853e931d5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/003.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of link between frames</title> +</head> +<frameset rows="50%, 50%"> +<frame src="003-1.xhtml"/> +<frame src="helper-drop-here-body-circle.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/004.xhtml b/testing/web-platform/tests/html/editing/dnd/events/004.xhtml new file mode 100644 index 0000000000..85753621bb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/004.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of selection to iframe</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +iframe + {width:100%; + height:500px;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))" ondragleave="leavePage(event)"> +<p ondragstart="start(event)" ondragend="endDrag(event)">Drag me</p> +<p>Drag selected text to the frame below and drop it there. Both circles should turn green once text is dropped into lower frame.</p> +<div/> +<pre/> +<iframe src="helper-drop-here-body-circle.xhtml">XHTML document</iframe> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/005.xhtml b/testing/web-platform/tests/html/editing/dnd/events/005.xhtml new file mode 100644 index 0000000000..4ea0a9058d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/005.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of text input selection to iframe</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +iframe + {width:100%; + height:500px;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body onload="document.querySelector('input').select()" ondragleave="leavePage(event)"> +<p ondragstart="start(event)" ondragend="endDrag(event)"><input value="Drag me"/></p> +<p>Drag selected text to the frame below and drop it there. Both circles should turn green once text is dropped into lower frame.</p> +<div/> +<pre/> +<iframe src="helper-drop-here-body-circle.xhtml">XHTML document</iframe> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/006.xhtml b/testing/web-platform/tests/html/editing/dnd/events/006.xhtml new file mode 100644 index 0000000000..f9d659f31a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/006.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of link to iframe</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +iframe + {width:100%; + height:500px;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragleave="leavePage(event)"> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondragend="endDrag(event)">Drag me</a></p> +<p>Drag link to the frame below and drop it there. Both circles should turn green once link is dropped into lower frame.</p> +<div/> +<pre/> +<iframe src="helper-drop-here-body-circle.xhtml">XHTML document</iframe> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/007.xhtml b/testing/web-platform/tests/html/editing/dnd/events/007.xhtml new file mode 100644 index 0000000000..3c1c217a89 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/007.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of selection to object</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +object + {width:100%; + height:500px; + border:solid medium navy;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))" ondragleave="leavePage(event)"> +<p ondragstart="start(event)" ondragend="endDrag(event)">Drag me</p> +<p>Drag selected text to the frame below and drop it there. Both circles should turn green once text is dropped into lower frame.</p> +<div/> +<pre/> +<object type="application/xhtml+xml" data="helper-drop-here-body-circle.xhtml">XHTML document</object> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/008.xhtml b/testing/web-platform/tests/html/editing/dnd/events/008.xhtml new file mode 100644 index 0000000000..e22695a692 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/008.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of text input selection to object</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +object + {width:100%; + height:500px; + border:solid medium navy;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body onload="document.querySelector('input').select()" ondragleave="leavePage(event)"> +<p ondragstart="start(event)" ondragend="endDrag(event)"><input value="Drag me"/></p> +<p>Drag selected text to the frame below and drop it there. Both circles should turn green once text is dropped into lower frame.</p> +<div/> +<pre/> +<object type="application/xhtml+xml" data="helper-drop-here-body-circle.xhtml">XHTML document</object> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/009.xhtml b/testing/web-platform/tests/html/editing/dnd/events/009.xhtml new file mode 100644 index 0000000000..d2ddd32bdc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/009.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of link to object</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +object + {width:100%; + height:500px; + border:solid medium navy;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragleave="leavePage(event)"> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondragend="endDrag(event)">Drag me</a></p> +<p>Drag link to the frame below and drop it there. Both circles should turn green once link is dropped into lower frame.</p> +<div/> +<pre/> +<object type="application/xhtml+xml" data="helper-drop-here-body-circle.xhtml">XHTML document</object> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/010.xhtml b/testing/web-platform/tests/html/editing/dnd/events/010.xhtml new file mode 100644 index 0000000000..bbc2254282 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/010.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of selection from iframe</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +iframe + {width:100%; + height:300px;} +</style> +<script type="application/ecmascript"> +var step = 1; +function enterPage(event) + {event.preventDefault(); + if(step++ > 0) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragenter should fire before dragover and drop');} + } +function overPage(event) + {event.preventDefault(); + if(step++ > 1) + {setColor('green green silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function dropIt(event) + {if(step++ > 1) + {setColor('green');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> +<iframe src="helper-drag-me-p-with-circle.xhtml">XHTML document</iframe> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/011.xhtml b/testing/web-platform/tests/html/editing/dnd/events/011.xhtml new file mode 100644 index 0000000000..3ec4e5c40b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/011.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of text input selection from iframe</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +iframe + {width:100%; + height:300px;} +</style> +<script type="application/ecmascript"> +var step = 1; +function enterPage(event) + {event.preventDefault(); + if(step++ > 0) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragenter should fire before dragover and drop');} + } +function overPage(event) + {event.preventDefault(); + if(step++ > 1) + {setColor('green green silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function dropIt(event) + {if(step++ > 1) + {setColor('green');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> +<iframe src="helper-drag-me-input-with-circle.xhtml">XHTML document</iframe> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/012.xhtml b/testing/web-platform/tests/html/editing/dnd/events/012.xhtml new file mode 100644 index 0000000000..0cebe5d895 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/012.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of link from iframe</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +iframe + {width:100%; + height:300px;} +</style> +<script type="application/ecmascript"> +var step = 1; +function enterPage(event) + {event.preventDefault(); + if(step++ > 0) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragenter should fire before dragover and drop');} + } +function overPage(event) + {event.preventDefault(); + if(step++ > 1) + {setColor('green green silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function dropIt(event) + {if(step++ > 1) + {setColor('green');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> +<iframe src="helper-drag-me-link-with-circle.xhtml">XHTML document</iframe> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/013.xhtml b/testing/web-platform/tests/html/editing/dnd/events/013.xhtml new file mode 100644 index 0000000000..3e6c19c402 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/013.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of selection from object</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +object + {width:100%; + height:300px; + border:solid medium navy;} +</style> +<script type="application/ecmascript"> +var step = 1; +function enterPage(event) + {event.preventDefault(); + if(step++ > 0) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragenter should fire before dragover and drop');} + } +function overPage(event) + {event.preventDefault(); + if(step++ > 1) + {setColor('green green silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function dropIt(event) + {if(step++ > 1) + {setColor('green');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> +<object type="application/xhtml+xml" data="helper-drag-me-p-with-circle.xhtml">XHTML document</object> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/014.xhtml b/testing/web-platform/tests/html/editing/dnd/events/014.xhtml new file mode 100644 index 0000000000..09abedd1f1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/014.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of text input selection from object</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +object + {width:100%; + height:300px; + border:solid medium navy;} +</style> +<script type="application/ecmascript"> +var step = 1; +function enterPage(event) + {event.preventDefault(); + if(step++ > 0) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragenter should fire before dragover and drop');} + } +function overPage(event) + {event.preventDefault(); + if(step++ > 1) + {setColor('green green silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function dropIt(event) + {if(step++ > 1) + {setColor('green');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> +<object type="application/xhtml+xml" data="helper-drag-me-input-with-circle.xhtml">XHTML document</object> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/015.xhtml b/testing/web-platform/tests/html/editing/dnd/events/015.xhtml new file mode 100644 index 0000000000..7baf086b77 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/015.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of link from object</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +object + {width:100%; + height:300px; + border:solid medium navy;} +</style> +<script type="application/ecmascript"> +var step = 1; +function enterPage(event) + {event.preventDefault(); + if(step++ > 0) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragenter should fire before dragover and drop');} + } +function overPage(event) + {event.preventDefault(); + if(step++ > 1) + {setColor('green green silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function dropIt(event) + {if(step++ > 1) + {setColor('green');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> +<object type="application/xhtml+xml" data="helper-drag-me-link-with-circle.xhtml">XHTML document</object> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/016.xhtml b/testing/web-platform/tests/html/editing/dnd/events/016.xhtml new file mode 100644 index 0000000000..e6f9972a4d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/016.xhtml @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: events after dragenter is cancelled</title> +<script type="application/ecmascript"> +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function start(event) + {event.preventDefault();} +function dragMe(event) + {say('FAIL (drag event should not fire if dragstart is cancelled)');} +function enterBody(event) + {event.preventDefault(); + say('FAIL (dragover event should not fire if dragstart is cancelled)');} +function overBody(event) + {event.preventDefault(); + say('FAIL (dragover event should not fire if dragstart is cancelled)');} +function dropIt(event) + {say('FAIL (drop event should not fire if dragstart is cancelled)');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +</script> +</head> +<body onload="selectText()" ondragenter="enterBody(event)" ondragover="overBody(event)" ondrop="dropIt(event)"> +<p ondragstart="start(event)" ondrag="dragMe(event)">Try to drag me</p> +<p>You should not be able to drag text selection above.</p> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/017.xhtml b/testing/web-platform/tests/html/editing/dnd/events/017.xhtml new file mode 100644 index 0000000000..0a372b5337 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/017.xhtml @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Text input selection drag and drop: events after dragenter is cancelled</title> +<script type="application/ecmascript"> +function selectText() + {document.querySelector('input').select()} +function start(event) + {event.preventDefault();} +function dragMe(event) + {say('FAIL (drag event should not fire if dragstart is cancelled)');} +function enterBody(event) + {event.preventDefault(); + say('FAIL (dragover event should not fire if dragstart is cancelled)');} +function overBody(event) + {event.preventDefault(); + say('FAIL (dragover event should not fire if dragstart is cancelled)');} +function dropIt(event) + {say('FAIL (drop event should not fire if dragstart is cancelled)');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +</script> +</head> +<body onload="selectText()" ondragenter="enterBody(event)" ondragover="overBody(event)" ondrop="dropIt(event)"> +<p ondragstart="start(event)"><input value="Try to drag me" ondrag="dragMe(event)"/></p> +<p>You should not be able to drag text selection above.</p> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/018.xhtml b/testing/web-platform/tests/html/editing/dnd/events/018.xhtml new file mode 100644 index 0000000000..4aa8ba0997 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/018.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: events after dragenter is cancelled</title> +<script type="application/ecmascript"> +function start(event) + {event.preventDefault();} +function dragMe(event) + {say('FAIL (drag event should not fire if dragstart is cancelled)');} +function enterBody(event) + {event.preventDefault(); + say('FAIL (dragover event should not fire if dragstart is cancelled)');} +function overBody(event) + {event.preventDefault(); + say('FAIL (dragover event should not fire if dragstart is cancelled)');} +function dropIt(event) + {say('FAIL (drop event should not fire if dragstart is cancelled)');} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +</script> +</head> +<body ondragenter="enterBody(event)" ondragover="overBody(event)" ondrop="dropIt(event)"> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragMe(event)">Try to drag me</a></p> +<p>You should not be able to drag link above.</p> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/019.xhtml b/testing/web-platform/tests/html/editing/dnd/events/019.xhtml new file mode 100644 index 0000000000..4e718dda27 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/019.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: events after drag is cancelled</title> +<script type="application/ecmascript"> +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dragMe(event) + {event.preventDefault();} +function dropIt(event) + {say('FAIL (no drop should occur after drag is cancelled)')} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +</script> +</head> +<body onload="selectText()" dropzone="copy string:text/plain" ondrop="dropIt(event)"> +<p ondrag="dragMe(event)">Try to drag me</p> +<p>You should not be able to drop text selection above.</p> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/020.xhtml b/testing/web-platform/tests/html/editing/dnd/events/020.xhtml new file mode 100644 index 0000000000..4a1d60a647 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/020.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Text input selection drag and drop: events after drag is cancelled</title> +<script type="application/ecmascript"> +function selectText() + {document.querySelector('input').select()} +function dragMe(event) + {event.preventDefault();} +function dropIt(event) + {say('FAIL (no drop should occur after drag is cancelled)')} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +</script> +</head> +<body onload="selectText()" dropzone="copy string:text/plain" ondrop="dropIt(event)"> +<p><input value="Try to drag me" ondrag="dragMe(event)"/></p> +<p>You should not be able to drop text selection above.</p> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/021.xhtml b/testing/web-platform/tests/html/editing/dnd/events/021.xhtml new file mode 100644 index 0000000000..6cca911f1d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/021.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: events after drag is cancelled</title> +<script type="application/ecmascript"> +function dragMe(event) + {event.preventDefault();} +function dropIt(event) + {say('FAIL (no drop should occur after drag is cancelled)')} +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +</script> +</head> +<body dropzone="copy string:text/uri-list" ondrop="dropIt(event)"> +<p><a href="data:text/plain,1" ondrag="dragMe(event)">Try to drag me</a></p> +<p>You should not be able to drag link above.</p> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/022.xhtml b/testing/web-platform/tests/html/editing/dnd/events/022.xhtml new file mode 100644 index 0000000000..98773f2cb6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/022.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: events after drag and drop is cancelled</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px;} +</style> +<script type="application/ecmascript"> +var result = true; +function selectText() + {window.getSelection().selectAllChildren(document.querySelector('p'))} +function dropIt(event) + {result = false; + setColor('maroon'); + say('drop event : FAIL (no drop should occur once drag and drop is cancelled)')} +function endDrag(event) + {if(result) + {setColor('teal')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body onload="selectText()" dropzone="copy string:text/plain" ondrop="dropIt(event)"> +<p ondragstart="setColor('teal silver silver silver')" ondragend="endDrag(event)">Drag me</p> +<p>Drag selected text and press Esc before you drop it. Circle below should turn green once drag and drop is cancelled.</p> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/023.xhtml b/testing/web-platform/tests/html/editing/dnd/events/023.xhtml new file mode 100644 index 0000000000..fadf76bf27 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/023.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: events after drag and drop is cancelled</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px;} +</style> +<script type="application/ecmascript"> +var result = true; +function selectText() + {document.querySelector('input').select()} +function dropIt(event) + {result = false; + setColor('maroon'); + say('drop event : FAIL (no drop should occur once drag and drop is cancelled)')} +function endDrag(event) + {if(result) + {setColor('teal')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body onload="selectText()" dropzone="copy string:text/plain" ondrop="dropIt(event)"> +<p><input value="Drag me" ondragstart="setColor('teal silver silver silver')" ondragend="endDrag(event)"/></p> +<p>Drag selected text and press Esc before you drop it. Circle below should turn green once drag and drop is cancelled.</p> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/024.xhtml b/testing/web-platform/tests/html/editing/dnd/events/024.xhtml new file mode 100644 index 0000000000..9afa8f709a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/024.xhtml @@ -0,0 +1,34 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: events after drag and drop is cancelled</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px;} +</style> +<script type="application/ecmascript"> +var result = true; +function dropIt(event) + {result = false; + setColor('maroon'); + say('drop event : FAIL (no drop should occur once drag and drop is cancelled)')} +function endDrag(event) + {if(result) + {setColor('teal')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body dropzone="copy string:text/uri-list" ondrop="dropIt(event)"> +<p><a href="data:text/plain,1" ondragstart="setColor('teal silver silver silver')" ondragend="endDrag(event)">Drag me</a></p> +<p>Drag link and press Esc before you drop it. Circle below should turn green once drag and drop is cancelled.</p> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/025.html b/testing/web-platform/tests/html/editing/dnd/events/025.html new file mode 100644 index 0000000000..b4bbbc547e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/025.html @@ -0,0 +1,69 @@ +<!doctype html> +<html> + <head> + <title>Dragover repeating</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var numsecs = 5, maxpolltime = 0.550, minpolltime = 0.150; + var blue = document.getElementsByTagName('div')[1], p = document.getElementsByTagName('p')[0]; + var numfired = 0, readytocount = false; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'all'; + e.dataTransfer.setData('text','dummy text'); + }; + blue.ondrop = function (e) { + e.preventDefault(); + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( readytocount ) { numfired++; } + }; + blue.ondragenter = function (e) { + e.preventDefault(); + p.innerHTML = 'Keep the mouse perfectly still...'; + //give the tester a second to get ready + setTimeout(function () { + readytocount = true; + numfired = 0; + p.innerHTML = 'Keep the mouse perfectly still for '+numsecs+' seconds'; + var countsecs = numsecs; + var intr = setInterval(function () { + countsecs--; + if( countsecs ) { + p.innerHTML = 'Keep the mouse perfectly still for '+countsecs+' seconds'; + } else { + clearInterval(intr); + var passed = numfired >= Math.floor( numsecs / maxpolltime ) && numfired <= Math.floor( numsecs / minpolltime ); + document.getElementsByTagName('p')[0].innerHTML = ( passed ? 'PASS' : 'FAIL' ) + + '<br><br>(Fired ' + numfired + ' times in ' + numsecs + ' seconds, must be between ' + + Math.floor( numsecs / maxpolltime ) + ' and ' + Math.floor( numsecs / minpolltime ) + ')<br>You can release the drag now'; + } + },1000); + },1000); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <p>Drag the orange square over the blue square, then keep the mouse perfectly still until the result appears.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/026.html b/testing/web-platform/tests/html/editing/dnd/events/026.html new file mode 100644 index 0000000000..816155a09d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/026.html @@ -0,0 +1,61 @@ +<!doctype html> +<html> + <head> + <title>Drag repeating</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var numsecs = 5, maxpolltime = 0.550, minpolltime = 0.150; + var orange = document.getElementsByTagName('div')[0], p = document.getElementsByTagName('p')[0]; + var numfired = 0, readytocount = false; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'all'; + e.dataTransfer.setData('text','dummy text'); + p.innerHTML = 'Keep the mouse perfectly still...'; + //give the tester a second to get ready + setTimeout(function () { + readytocount = true; + numfired = 0; + p.innerHTML = 'Keep the mouse perfectly still for '+numsecs+' seconds'; + var countsecs = numsecs; + var intr = setInterval(function () { + countsecs--; + if( countsecs ) { + p.innerHTML = 'Keep the mouse perfectly still for '+countsecs+' seconds'; + } else { + clearInterval(intr); + var passed = numfired >= Math.floor( numsecs / maxpolltime ) && numfired <= Math.floor( numsecs / minpolltime ); + document.getElementsByTagName('p')[0].innerHTML = ( passed ? 'PASS' : 'FAIL' ) + + '<br><br>(Fired ' + numfired + ' times in ' + numsecs + ' seconds, must be between ' + + Math.floor( numsecs / maxpolltime ) + ' and ' + Math.floor( numsecs / minpolltime ) + ')<br>You can release the drag now'; + } + },1000); + },1000); + }; + orange.ondrag = function (e) { + if( readytocount ) { numfired++; } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <p>Drag the orange square sideways until the drag placeholder appears, then keep the mouse perfectly still until the result appears.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/027.xhtml b/testing/web-platform/tests/html/editing/dnd/events/027.xhtml new file mode 100644 index 0000000000..983bcd298b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/027.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>PNG image drag and drop: 'return false' should not cancel event</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body onload="document.querySelector('img').addEventListener('drag',function (){return false},false)"> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy'" 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> +<p>Drag green circle to the silver box below and drop it. It should be copied to the box once you drop it there.</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="addImage(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/028.xhtml b/testing/web-platform/tests/html/editing/dnd/events/028.xhtml new file mode 100644 index 0000000000..35c69766f6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/028.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: 'return false' should not cancel event</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('a').addEventListener('drag',function (){return false},false)"> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy'">Drag me</a></p> +<p>Drag link above to the navy box below and drop it. You should see word PASS once you drop it in the box.</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'))"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/029.html b/testing/web-platform/tests/html/editing/dnd/events/029.html new file mode 100644 index 0000000000..70c243d993 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/029.html @@ -0,0 +1,79 @@ +<!doctype html> +<html> + <head> + <title>Drag and drop without cancelling dragenter</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> + +window.onload = function () { + var drag = document.getElementsByTagName('div')[0], sequence = []; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'copy'; + }; + drag.ondragenter = drag.ondragover = function (e) { + e.preventDefault(); + }; + var drop = document.getElementsByTagName('div')[1], dragoverhasfired = false; + drop.ondragenter = function (e) { + dragoverhasfired = true; //events targeting body will be ignored until this event has fired + sequence[sequence.length] = 'drop.dragenter'; + }; + drop.ondragover = function (e) { + e.preventDefault(); + if( sequence[sequence.length-1] != 'drop.dragover' ) { + sequence[sequence.length] = 'drop.dragover'; + } + }; + drop.ondrop = function (e) { + e.preventDefault(); + sequence[sequence.length] = 'drop.ondrop'; + }; + document.body.ondragenter = function (e) { + if( e.target != this ) { return; } + if( dragoverhasfired ) { + sequence[sequence.length] = 'body.dragenter'; + } + }; + document.body.ondragover = function (e) { + if( e.target != this ) { return; } + if( dragoverhasfired ) { + if( sequence[sequence.length-1] != 'body.dragover' ) { + sequence[sequence.length] = 'body.dragover'; + } + } + }; + drag.ondragend = function (e) { + sequence = sequence.join('=>') + var desiredsequence = (['drop.dragenter','body.dragenter','body.dragover']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[2].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div><div></div> + <div> </div> + <p>Drag the orange square onto the blue square and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/030.html b/testing/web-platform/tests/html/editing/dnd/events/030.html new file mode 100644 index 0000000000..8dc573474d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/030.html @@ -0,0 +1,61 @@ +<!doctype html> +<html> + <head> + <title>Drag and drop without cancelling dragenter on body</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + margin-left: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> +//If dragenter is cancelled the body should then become the target element, receiving both a dragenter and a dragover event. +//When the body is the actual immediate user selection (first time over the body), that means it gets *2* dragenter events +//Then when a div becomes immediate user selection (blue) but does not cancel the dragenter event, dragenter does not need +//to fire on body because body is already the current target element +//Then when the body is the actual immediate user selection again (second time over the body), it is already the current +//target element, so does not get a dragenter event +window.onload = function () { + var drag = document.getElementsByTagName('div')[0], beforecount = 0, aftercount = 0, switchcount = false; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'copy'; + }; + drag.ondragenter = drag.ondrop = drag.ondragover = function (e) { + e.preventDefault(); + }; + var drop = document.getElementsByTagName('div')[1]; + drop.ondragenter = function (e) { + switchcount = true; + }; + drop.ondragover = function (e) { + e.preventDefault(); + }; + document.body.ondragenter = function (e) { + if( e.target != this ) { return; } + if( switchcount ) { aftercount++; } else { beforecount++; } + }; + drag.ondragend = function (e) { + document.getElementsByTagName('div')[2].innerHTML = ( beforecount == 2 && aftercount == 0 ) ? 'PASS' : ( 'FAIL, dragenter fired on body '+beforecount+' time(s) before blue.ondragenter and '+aftercount+' time(s) afterwards, instead of 2 and 0 times respectively' ); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div><div></div> + <div> </div> + <p>Drag the orange square onto the blue square, then back to the orange square, and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/031-1.html b/testing/web-platform/tests/html/editing/dnd/events/031-1.html new file mode 100644 index 0000000000..b70082ba21 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/031-1.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Non-rendered body should still become current target element</title> + <style type="text/css"> +html { background: blue; } + </style> + </head> + <body> + + <script type="text/javascript"> +var seentypes = {}; +document.body.ondragenter = document.body.ondragover = document.body.ondrop = function (e) { + e.preventDefault(); + //document.body.innerHTML += e.type; + if( e.type == 'drop' ) { + document.body.innerHTML = ( seentypes.dragenter && seentypes.dragover ) ? 'PASS' : 'FAIL'; + } else { + seentypes[e.type] = true; + } +} + </script> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/031.html b/testing/web-platform/tests/html/editing/dnd/events/031.html new file mode 100644 index 0000000000..92220e30e1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/031.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Non-rendered body should still become current target element</title> + <style type="text/css"> +span { background: orange; display: inline-block; height: 200px; width: 200px; } +iframe { border: none; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('span')[0].ondragstart = function (e) { + e.dataTransfer.setData('text','dummy text'); + e.dataTransfer.effectAllowed = 'copy'; + }; +}; + </script> + </head> + <body> + + <p>Drag the orange square onto the blue square and release it. Fail if text does not appear in the blue square.</p> + <p><span draggable="true"></span> <iframe height="200" width="200" src="031-1.html"></iframe></p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/032.html b/testing/web-platform/tests/html/editing/dnd/events/032.html new file mode 100644 index 0000000000..a928a3c425 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/032.html @@ -0,0 +1,81 @@ +<!doctype html> +<html> + <head> + <title>Drag and drop passing over body without cancelling dragenter</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + margin-left: 200px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> +//this test enforces the following spec statement: +//"if this immediate user selection is not the same as the current target element" +window.onload = function () { + var drag = document.getElementsByTagName('div')[0], sequence = []; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'copy'; + }; + drag.ondragenter = function (e) { + sequence[sequence.length] = 'drag.dragenter'; + }; + drag.ondragover = function (e) { + if( sequence[sequence.length-1] != 'drag.dragover' ) { + sequence[sequence.length] = 'drag.dragover'; + } + }; + var drop = document.getElementsByTagName('div')[1]; + drop.ondragenter = function (e) { + e.preventDefault(); + sequence[sequence.length] = 'drop.dragenter'; + }; + drop.ondragover = function (e) { + e.preventDefault(); + if( sequence[sequence.length-1] != 'drop.dragover' ) { + sequence[sequence.length] = 'drop.dragover'; + } + }; + drop.ondrop = function (e) { + e.preventDefault(); + sequence[sequence.length] = 'drop.ondrop'; + }; + document.body.ondragenter = function (e) { + sequence[sequence.length] = ( e.target == this ) ? 'body.dragenter' : 'bubble.dragenter'; + }; + document.body.ondragover = function (e) { + if( e.target != this ) { return; } + if( sequence[sequence.length-1] != 'body.dragover' ) { + sequence[sequence.length] = 'body.dragover'; + } + }; + drag.ondragend = function (e) { + sequence = sequence.join('=>') + var desiredsequence = (['drag.dragenter','bubble.dragenter','body.dragenter','body.dragover','drop.dragenter','bubble.dragenter','drop.dragover','drop.ondrop']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[2].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div><div></div> + <div> </div> + <p>Drag the orange square onto the blue square and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/033.html b/testing/web-platform/tests/html/editing/dnd/events/033.html new file mode 100644 index 0000000000..d06bee3d8d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/033.html @@ -0,0 +1,79 @@ +<!doctype html> +<html> + <head> + <title>Drag and drop without cancelling dragenter from non-target to non-target</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var drag = document.getElementsByTagName('div')[0], sequence = []; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'copy'; + }; + drag.ondragenter = function (e) { + sequence[sequence.length] = 'drag.dragenter'; + }; + drag.ondragover = function (e) { + if( sequence[sequence.length-1] != 'drag.dragover' ) { + sequence[sequence.length] = 'drag.dragover'; + } + }; + drag.ondragleave = function (e) { + sequence[sequence.length] = 'drag.dragleave'; + }; + var drop = document.getElementsByTagName('div')[1]; + drop.ondragenter = function (e) { + sequence[sequence.length] = 'drop.dragenter'; + }; + drop.ondragover = function (e) { + if( sequence[sequence.length-1] != 'drop.dragover' ) { + sequence[sequence.length] = 'drop.dragover'; + } + }; + drop.ondrop = function (e) { + e.preventDefault(); + sequence[sequence.length] = 'drop.ondrop'; + }; + document.body.ondragenter = function (e) { + sequence[sequence.length] = ( e.target == this ) ? 'body.dragenter' : 'bubble.dragenter'; + }; + document.body.ondragover = function (e) { + if( e.target != this ) { return; } + if( sequence[sequence.length-1] != 'body.dragover' ) { + sequence[sequence.length] = 'body.dragover'; + } + }; + drag.ondragend = function (e) { + sequence = sequence.join('=>') + var desiredsequence = (['drag.dragenter','bubble.dragenter','body.dragenter','body.dragover','drop.dragenter','bubble.dragenter','body.dragover']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[2].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div><div></div> + <div> </div> + <p>Drag the orange square onto the blue square and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/034.html b/testing/web-platform/tests/html/editing/dnd/events/034.html new file mode 100644 index 0000000000..ea8867ba2c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/034.html @@ -0,0 +1,56 @@ +<!doctype html> +<html> + <head> + <title>Drag and drop with cancelling dragenter on body</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + margin-left: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var drag = document.getElementsByTagName('div')[0], beforecount = 0, aftercount = 0, switchcount = false; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'copy'; + }; + drag.ondragenter = drag.ondrop = drag.ondragover = function (e) { + e.preventDefault(); + }; + var drop = document.getElementsByTagName('div')[1]; + drop.ondragenter = function (e) { + switchcount = true; + }; + drop.ondragover = function (e) { + e.preventDefault(); + }; + document.body.ondragenter = function (e) { + if( e.target != this ) { return; } + e.preventDefault(); //don't cancel when it bubbles from the child elements + if( switchcount ) { aftercount++; } else { beforecount++; } + }; + drag.ondragend = function (e) { + document.getElementsByTagName('div')[2].innerHTML = ( beforecount == 1 && aftercount == 0 ) ? 'PASS' : ( 'FAIL, dragenter fired on body '+beforecount+' time(s) before blue.ondragenter and '+aftercount+' time(s) afterwards, instead of 1 and 0 times respectively' ); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div><div></div> + <div> </div> + <p>Drag the orange square onto the blue square, then back to the orange square, and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/035.html b/testing/web-platform/tests/html/editing/dnd/events/035.html new file mode 100644 index 0000000000..8a7cb17491 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/035.html @@ -0,0 +1,83 @@ +<!doctype html> +<html> + <head> + <title>Drag and drop passing over body with cancelling dragenter</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + margin-left: 200px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> +//this test enforces the following spec statement: +//"if this immediate user selection is not the same as the current target element" +window.onload = function () { + var drag = document.getElementsByTagName('div')[0], sequence = []; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'copy'; + }; + drag.ondragenter = function (e) { + sequence[sequence.length] = 'drag.dragenter'; + }; + drag.ondragover = function (e) { + if( sequence[sequence.length-1] != 'drag.dragover' ) { + sequence[sequence.length] = 'drag.dragover'; + } + }; + var drop = document.getElementsByTagName('div')[1]; + drop.ondragenter = function (e) { + e.preventDefault(); + sequence[sequence.length] = 'drop.dragenter'; + }; + drop.ondragover = function (e) { + e.preventDefault(); + if( sequence[sequence.length-1] != 'drop.dragover' ) { + sequence[sequence.length] = 'drop.dragover'; + } + }; + drop.ondrop = function (e) { + e.preventDefault(); + sequence[sequence.length] = 'drop.ondrop'; + }; + document.body.ondragenter = function (e) { + sequence[sequence.length] = ( e.target == this ) ? 'body.dragenter' : 'bubble.dragenter'; + if( e.target != this ) { return; } + e.preventDefault(); //don't cancel when it bubbles from the child elements + }; + document.body.ondragover = function (e) { + if( e.target != this ) { return; } + if( sequence[sequence.length-1] != 'body.dragover' ) { + sequence[sequence.length] = 'body.dragover'; + } + }; + drag.ondragend = function (e) { + sequence = sequence.join('=>') + var desiredsequence = (['drag.dragenter','bubble.dragenter','body.dragenter','body.dragover','drop.dragenter','bubble.dragenter','drop.dragover','drop.ondrop']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[2].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div><div></div> + <div> </div> + <p>Drag the orange square onto the blue square and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/036.html b/testing/web-platform/tests/html/editing/dnd/events/036.html new file mode 100644 index 0000000000..1c66f18483 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/036.html @@ -0,0 +1,70 @@ +<!doctype html> +<html> + <head> + <title>Drag and drop passing over body with all events handled at body</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + margin-left: 200px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var drag = document.getElementsByTagName('div')[0], drop = document.getElementsByTagName('div')[1], sequence = []; + function targ(el) { + if( el == drag ) { return 'drag'; } + else if( el == drop ) { return 'drop'; } + else if( el == document.body ) { return 'body'; } + else { return el; } + } + document.body.ondragstart = function (e) { + e.dataTransfer.setData('text','data'); + e.dataTransfer.effectAllowed = 'copy'; + }; + document.body.ondragenter = function (e) { + e.preventDefault(); + sequence[sequence.length] = targ(e.target)+'.ondragenter'; + }; + document.body.ondragover = function (e) { + e.preventDefault(); + var seqname = targ(e.target)+'.ondragover'; + if( sequence[sequence.length-1] != seqname ) { + sequence[sequence.length] = seqname; + } + }; + document.body.ondrop = function (e) { + e.preventDefault(); + sequence[sequence.length] = targ(e.target)+'.ondrop'; + sequence[sequence.length] = e.dataTransfer.getData('text'); + }; + document.body.ondragend = function (e) { + sequence[sequence.length] = targ(e.target)+'.ondragend'; + sequence = sequence.join('=>') + var desiredsequence = (['drag.ondragenter','drag.ondragover','body.ondragenter','body.ondragover','drop.ondragenter','drop.ondragover','drop.ondrop','data','drag.ondragend']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[2].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div><div></div> + <div> </div> + <p>Drag the orange square onto the blue square and release it. For the entire duration of the drag, if supported by the platform, the mouse cursor should show as a drop-allowed or drop-copy-allowed cursor.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/037-proposed.xhtml b/testing/web-platform/tests/html/editing/dnd/events/037-proposed.xhtml new file mode 100644 index 0000000000..3c94177f02 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/037-proposed.xhtml @@ -0,0 +1,86 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Drag and drop without cancelling dragenter and without body</title> + <style type="text/css"> +html { + padding:20px; +} +head + div { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +head + div + div { + height: 100px; + width: 100px; + margin-left: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"><![CDATA[ +//Drag passes from orange to root element. Dragenter fires at root element. +//Dragenter is not cancelled. Body does not exist. Dragenter fires at root element again. +//Drag passes from root element to blue. Dragenter fires at blue. +//Dragenter is not cancelled. Body does not exist. Current target element is root element. +//Drag passes from blue to root element. Current target element is already root element. +//Drag passes from root element to orange. Dragenter fires at orange, and is cancelled. +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], sequence = []; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'copy'; + }; + orange.ondragenter = orange.ondrop = function (e) { + sequence[sequence.length] = 'orange.'+e.type; + e.preventDefault(); + }; + orange.ondragleave = function (e) { + sequence[sequence.length] = 'orange.dragleave'; + }; + orange.ondragover = function (e) { + if( sequence[sequence.length-1] != 'orange.dragover' ) { + sequence[sequence.length] = 'orange.dragover'; + } + e.preventDefault(); + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = blue.ondragover = blue.ondragleave = function (e) { + sequence[sequence.length] = 'blue.'+e.type; + }; + document.documentElement.ondragenter = document.documentElement.ondragleave = function (e) { + if( e.target != this ) { return; } + sequence[sequence.length] = 'html.'+e.type; + }; + document.documentElement.ondragover = function (e) { + if( e.target != this ) { return; } + if( sequence[sequence.length-1] != 'html.dragover' ) { + sequence[sequence.length] = 'html.dragover'; + } + }; + document.ondragenter = document.ondragleave = document.ondragover = document.ondragleave = function (e) { + if( e.target != this ) { return; } + sequence[sequence.length] = 'document.'+e.type; + }; + orange.ondragend = function (e) { + sequence = sequence.join('=>') + var desiredsequence = (['orange.dragenter','orange.dragover','html.dragenter','html.dragenter','orange.dragleave','html.dragover','blue.dragenter','html.dragover','orange.dragenter','html.dragleave','orange.dragover','orange.drop']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[2].textContent = 'PASS'; + } else { + document.getElementsByTagName('div')[2].textContent = 'FAIL, got: '+sequence+' instead of: '+desiredsequence; + } + }; +}; + ]]></script> + </head> + <!--body--> + + <div draggable="true"></div><div></div> + <div> </div> + <p>Drag the orange square onto the blue square, then back to the orange square, and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + <!--/body--> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/037-spec.xhtml b/testing/web-platform/tests/html/editing/dnd/events/037-spec.xhtml new file mode 100644 index 0000000000..c4c76fe806 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/037-spec.xhtml @@ -0,0 +1,88 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Drag and drop without cancelling dragenter and without body (spec compliant)</title> + <style type="text/css"> +head + div { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +head + div + div { + height: 100px; + width: 100px; + margin-left: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"><![CDATA[ +//Drag passes from orange to root element. Dragenter fires at root element. +//Dragenter is not cancelled. Body does not exist. Dragenter fires at document. +//Spec says the body (which does not exist) becomes current target element => null. +//Drag passes from root element to blue. Dragenter fires at blue. +//Dragenter is not cancelled. Body does not exist. Current target element is null. +//Dragenter fires at document. Current target is set to null again. +//Drag passes from blue to root element. Dragenter fires at root element. +//Dragenter is not cancelled. Body does not exist. Current target element is null. +//Dragenter is not cancelled. Body does not exist. Dragenter fires at document. +//Current target is set to null. Yet again. +//Drag passes from root element to orange. Dragenter fires at orange, and is cancelled. +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], sequence = []; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'copy'; + }; + orange.ondragenter = orange.ondrop = function (e) { + sequence[sequence.length] = 'orange.'+e.type; + e.preventDefault(); + }; + orange.ondragleave = function (e) { + sequence[sequence.length] = 'orange.dragleave'; + }; + orange.ondragover = function (e) { + if( sequence[sequence.length-1] != 'orange.dragover' ) { + sequence[sequence.length] = 'orange.dragover'; + } + e.preventDefault(); + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = blue.ondragover = blue.ondragleave = function (e) { + sequence[sequence.length] = 'blue.'+e.type; + }; + document.documentElement.ondragenter = document.documentElement.ondragleave = function (e) { + if( e.target != this ) { return; } + sequence[sequence.length] = 'html.'+e.type; + }; + document.documentElement.ondragover = function (e) { + if( e.target != this ) { return; } + if( sequence[sequence.length-1] != 'html.dragover' ) { + sequence[sequence.length] = 'html.dragover'; + } + }; + document.ondragenter = document.ondragleave = document.ondragover = document.ondragleave = function (e) { + if( e.target != this ) { return; } + sequence[sequence.length] = 'document.'+e.type; + }; + orange.ondragend = function (e) { + sequence = sequence.join('=>') + var desiredsequence = (['orange.dragenter','orange.dragover','html.dragenter','document.dragenter','orange.dragleave','blue.dragenter','document.dragenter','document.dragenter','orange.dragenter','orange.dragover','orange.drop']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[2].textContent = 'PASS'; + } else { + document.getElementsByTagName('div')[2].textContent = 'FAIL, got: '+sequence+' instead of: '+desiredsequence; + } + }; +}; + ]]></script> + </head> + <!--body--> + + <div draggable="true"></div><div></div> + <div> </div> + <p>Drag the orange square onto the blue square, then back to the orange square, and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + <!--/body--> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/038-proposed.html b/testing/web-platform/tests/html/editing/dnd/events/038-proposed.html new file mode 100644 index 0000000000..ee1cc8ed0e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/038-proposed.html @@ -0,0 +1,84 @@ +<!doctype html> +<html> + <head> + <title>Drag and drop without cancelling dragenter and without body or html</title> + <style type="text/css"> +body > div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +iframe { + height: 100px; + width: 100px; + margin-left: 100px; + display: inline-block; + border: none; +} + </style> + <script type="text/javascript"> +//Drag passes from parent to blue. Dragenter fires at blue. Root element is deleted. +//Dragenter is not cancelled. Body does not exist. Root element does not exist. +//Current target element is set to null. Drag now points at unrendered document - null. +//Current target element remains null. +//Drag passes over parent to orange. Dragenter fires at orange, and is cancelled. +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], sequence = []; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'copy'; + }; + orange.ondragenter = orange.ondrop = function (e) { + sequence[sequence.length] = 'orange.'+e.type; + e.preventDefault(); + }; + orange.ondragleave = function (e) { + sequence[sequence.length] = 'orange.dragleave'; + }; + orange.ondragover = function (e) { + if( sequence[sequence.length-1] != 'orange.dragover' ) { + sequence[sequence.length] = 'orange.dragover'; + } + e.preventDefault(); + }; + var blue = document.getElementsByTagName('iframe')[0].contentDocument; + if( !blue.documentElement ) { blue.appendChild(blue.createElement('html')); } + blue.documentElement.style.margin = '0'; + blue.documentElement.style.padding = '0'; + if( !blue.body ) { blue.documentElement.appendChild(blue.createElement('body')); } + blue.body.style.margin = '0'; + blue.body.style.padding = '0'; + var bluediv = blue.body.appendChild(blue.createElement('div')); + bluediv.style.height = '100px'; + bluediv.style.width = '100px'; + bluediv.style.background = 'blue'; + bluediv.ondragenter = bluediv.ondragover = function (e) { + sequence[sequence.length] = 'blue.'+e.type; + if( blue.documentElement ) { blue.removeChild(blue.documentElement); } + }; + blue.ondragenter = blue.ondragover = blue.ondragleave = function (e) { + if( e.target != this ) { return; } + sequence[sequence.length] = 'bluedocument.'+e.type; + }; + orange.ondragend = function (e) { + sequence = sequence.join('=>') + var desiredsequence = (['orange.dragenter','orange.dragover','orange.dragleave','blue.dragenter','orange.dragenter','orange.dragover','orange.drop']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[1].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[1].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div><iframe src="about:blank"></iframe> + <div> </div> + <p>Drag the orange square onto the blue square, then back to the orange square, and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/drag-event-div-manual.html b/testing/web-platform/tests/html/editing/dnd/events/drag-event-div-manual.html new file mode 100644 index 0000000000..79c0c4332d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/drag-event-div-manual.html @@ -0,0 +1,62 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Fire drag event when dragging a div element</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/> + <meta name="assert" content="Fire drag event when dragging a div element"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DragEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + + EVENT = "drag"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DragEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: Fire drag event when dragging a div element</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Click and drag the red box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model + </p> + <p> + If the user agent is still performing the previous iteration of the sequence (if any) when the next iteration becomes due, abort these steps for this iteration (effectively "skipping missed frames" of the drag-and-drop operation). + Fire a DND event named drag event at the source node. If this event is canceled, the user agent must set the current drag operation to "none" (no drag operation). + </p> + <div id="target" style="border:2px red solid; width:200px; height:50px" draggable="true"></div> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/drag-event-manual.html b/testing/web-platform/tests/html/editing/dnd/events/drag-event-manual.html new file mode 100644 index 0000000000..d278b864bb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/drag-event-manual.html @@ -0,0 +1,62 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Fire drag event during the drag and drop processing</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/> + <meta name="assert" content="Fire drag event during the drag and drop processing"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DragEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + + EVENT = "drag"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DragEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: Fire drag event during the drag and drop processing</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Click and drag the blue image + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model + </p> + <p> + If the user agent is still performing the previous iteration of the sequence (if any) when the next iteration becomes due, abort these steps for this iteration (effectively "skipping missed frames" of the drag-and-drop operation). + Fire a DND event named drag event at the source node. If this event is canceled, the user agent must set the current drag operation to "none" (no drag operation). + </p> + <img src="/images/blue.png" style="width:200px; height:100px" draggable="true" id="target"/> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/dragend-event-manual.html b/testing/web-platform/tests/html/editing/dnd/events/dragend-event-manual.html new file mode 100644 index 0000000000..8bfb1fb7b6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/dragend-event-manual.html @@ -0,0 +1,64 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Fire dragend event during the drag and drop processing</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/> + <meta name="assert" content="Fire dragend event during the drag and drop processing"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DragendEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + + EVENT = "dragend"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DragendEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: Fire dragend event during the drag and drop processing</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Drag the blue image + <li> Drop it on the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model + </p> + <p> + If the drag operation failed or succeeded, fire a DND event named dragend at the source node. + </p> + <img src="/images/blue.png" style="width:200px; height:100px" draggable="true" id="target"/> + <br /><br /> + <input type="text" style="border:2px green solid; width:200px; height:50px"></input> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/dragenter-event-manual.html b/testing/web-platform/tests/html/editing/dnd/events/dragenter-event-manual.html new file mode 100644 index 0000000000..e81b32949c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/dragenter-event-manual.html @@ -0,0 +1,67 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Fire dragenter event during the drag and drop processing</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/> + <meta name="assert" content="Fire dragenter event during the drag and drop processing"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DragenterEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + + EVENT = "dragenter"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DragenterEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: Fire dragenter event during the drag and drop processing</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Select the text inside the red box + <li> Drag it and enter the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model + </p> + <p> + If the user is indicating a different immediate user selection than during the last iteration (or if this is the first iteration), and if this immediate user selection is not the same as the current target element, then update the current target element as follows: + - If the new immediate user selection is null, Set the current target element to null also. + - If the new immediate user selection is in a non-DOM document or application, Set the current target element to the immediate user selection. + - Otherwise, Fire a DND event named dragenter at the immediate user selection. + </p> + <div style="border:2px red solid; width:200px; height:50px">SampleText</div> + <br /><br /> + <input type="text" id="target" style="border:2px green solid; width:200px; height:50px"></input> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/dragleave-event-manual.html b/testing/web-platform/tests/html/editing/dnd/events/dragleave-event-manual.html new file mode 100644 index 0000000000..f6a405915f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/dragleave-event-manual.html @@ -0,0 +1,66 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Fire dragleave event during the drag and drop processing</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/> + <meta name="assert" content="Fire dragleave event during the drag and drop processing"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DragleaveEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + + EVENT = "dragleave"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DragleaveEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: Fire dragleave event during the drag and drop processing</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Select the text inside the red box + <li> Drag it over the blue box and drop it on the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model + </p> + <p> + If there is a change in the current target element, and if the previous target element was not null or a part of a non-DOM document, then fire a DND event named dragleave at the previous target element. + </p> + <div style="border:2px red solid; width:100px">SampleText</div> + <br /> + <div id="target" style="border:2px blue solid; width:200px; height:50px"></div> + <br /> + <input type="text" style="border:2px green solid; width:200px; height:50px"></input> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/dragover-event-manual.html b/testing/web-platform/tests/html/editing/dnd/events/dragover-event-manual.html new file mode 100644 index 0000000000..f8d99241d5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/dragover-event-manual.html @@ -0,0 +1,64 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Fire dragover event during the drag and drop processing</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/> + <meta name="assert" content="Fire dragover event during the drag and drop processing"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DragoverEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + + EVENT = "dragover"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DragoverEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: Fire dragover event during the drag and drop processing</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Select the text inside the red box. + <li> Drag it, hover over the green box and then release the mouse + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model + </p> + <p> + If the current target element is a DOM element, then fire a DND event named dragover at this current target element + </p> + <div style="border:2px red solid; width:100px">SampleText</div> + <br /><br /> + <div id="target" style="border:2px green solid; width:200px; height:100px"></div> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/dragstart-event-manual.html b/testing/web-platform/tests/html/editing/dnd/events/dragstart-event-manual.html new file mode 100644 index 0000000000..20786648da --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/dragstart-event-manual.html @@ -0,0 +1,62 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Fire dragstart event during the drag and drop processing</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/> + <meta name="assert" content="Fire dragstart event during the drag and drop processing"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DragstartEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + + EVENT = "dragstart"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DragstartEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: Fire dragstart event during the drag and drop processing</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Click and drag the red box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model + </p> + <p> + If it is an element that is being dragged, then set the drag data store elements list to contain just the source node. + Fire a DND event named dragstart at the source node. + </p> + <div id="target" style="border:2px red solid; width:200px; height:50px" draggable="true"></div> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/drop-event-manual.html b/testing/web-platform/tests/html/editing/dnd/events/drop-event-manual.html new file mode 100644 index 0000000000..2897bd5713 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/drop-event-manual.html @@ -0,0 +1,64 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Fire drop event during the drag and drop processing</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/> + <meta name="assert" content="Fire drop event during the drag and drop processing"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DropEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + + EVENT = "drop"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DropEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: Fire drop event during the drag and drop processing</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Select the text inside the red box + <li> Drag it and drop it on the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model + </p> + <p> + If the drag operation was a success, if the current target element is a DOM element, fire a DND event named drop at it. + </p> + <div style="border:2px red solid; width:100px">SampleText</div> + <br /><br /> + <input type="text" id="target" style="border:2px green solid; width:200px; height:50px"></input> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/events-cross-document-suite-HELPER-1.html b/testing/web-platform/tests/html/editing/dnd/events/events-cross-document-suite-HELPER-1.html new file mode 100644 index 0000000000..4019610533 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/events-cross-document-suite-HELPER-1.html @@ -0,0 +1,205 @@ +<!DOCTYPE html> +<title>drag & drop - event sequence for cross-document drag</title> +<style type="text/css"> + /* use margins instead of padding to make sure the body begins at the top of the page */ + html, body { + margin: 0; + } + body { + padding: 116px 8px 8px; + } + #testhere div { + height: 100px; + width: 100px; + position: absolute; + top: 8px; + } + #orange { + background-color: orange; + left: 8px; + } + #fuchsia { + background-color: fuchsia; + left: 158px; + } +</style> + +<script> +parent.setup(function () {},{explicit_done:true,explicit_timeout:true}); +window.onload = function () { + var orange = document.querySelector('#orange') + var fuchsia = document.querySelector('#fuchsia') + var body = document.body; + + orange.ondragstart = function (e) { + parent.events.push('doc1.orange.ondragstart'); + e.dataTransfer.effectAllowed = 'all'; + e.dataTransfer.setData('Text', 'foo'); + }; + orange.ondrag = function () { parent.events.push('doc1.orange.ondrag'); }; + orange.ondragenter = function () { parent.events.push('doc1.orange.ondragenter'); }; + orange.ondragover = function () { parent.events.push('doc1.orange.ondragover'); }; + orange.ondrop = function () { parent.events.push('doc1.orange.ondrop'); return false; }; + orange.ondragend = function () { parent.events.push('doc1.orange.ondragend'); setTimeout(finish,100); }; + orange.onmousedown = function () { parent.events.push('doc1.orange.onmousedown'); }; + orange.onmouseup = function () { parent.events.push('doc1.orange.onmouseup'); }; + + /* Events for the fuchsia box */ + fuchsia.ondragstart = function () { parent.events.push('doc1.pink.ondragstart'); }; + fuchsia.ondrag = function () { parent.events.push('doc1.pink.ondrag'); }; + fuchsia.ondragenter = function () { parent.events.push('doc1.pink.ondragenter'); }; + fuchsia.ondragover = function () { parent.events.push('doc1.pink.ondragover'); }; + fuchsia.ondrop = function () { parent.events.push('doc1.pink.ondrop'); return false; }; + fuchsia.ondragend = function () { parent.events.push('doc1.pink.ondragend'); }; + fuchsia.onmousedown = function () { parent.events.push('doc1.pink.onmousedown'); }; + fuchsia.onmouseup = function () { parent.events.push('doc1.pink.onmouseup'); }; + + /* Events for the page body */ + body.ondragstart = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragstart': 'doc1.bubble.ondragstart' ); }; + body.ondrag = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondrag': 'doc1.bubble.ondrag' ); }; + body.ondragenter = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragenter': 'doc1.bubble.ondragenter' ); }; + body.ondragover = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragover': 'doc1.bubble.ondragover' ); }; + body.ondrop = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondrop': 'doc1.bubble.ondrop' ); }; + body.ondragend = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragend': 'doc1.bubble.ondragend' ); }; + body.onmousedown = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.onmousedown': 'doc1.bubble.onmousedown' ); }; + body.onmouseup = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.onmouseup': 'doc1.bubble.onmouseup' ); }; + + function finish(e) { + var i, evindex; + var events = parent.events.join('-'); + /* + Normalise; reduce repeating event sequences to only 2 occurrences. + This makes the final event sequence predictable, no matter how many times the drag->dragover sequences repeat. + Two occurrances are kept in each case to allow testing to make sure the sequence really is repeating. + */ + //spec compliant - div dragenter is not cancelled, so body dragenter fires and body becomes current target + //repeats while drag is over orange or fuchsia or the body + events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.body\.ondragover){3,}/g,'$1$1'); + events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.body\.ondragover){3,}/g,'$1$1'); + //repeats while dragging over yellow + events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.yellow\.ondragover-doc2\.bubble\.ondragover){3,}/g,'$1$1'); + //repeats while dragging over blue + events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.blue\.ondragover-doc2\.bubble\.ondragover){3,}/g,'$1$1'); + //non-spec-compliant repeats while dragging over orange + events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.orange\.ondragover-doc1\.bubble\.ondragover){3,}/g,'$1$1'); + //non-spec-compliant repeats while dragging over fuchsia + events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.pink\.ondragover-doc1\.bubble\.ondragover){3,}/g,'$1$1'); + events = events.split(/-/g); + + parent.test(function () { + parent.assert_array_equals(events, + + ['doc1.orange.onmousedown', //mouse down + 'doc1.bubble.onmousedown', + + 'doc1.orange.ondragstart', //dragging begins + 'doc1.bubble.ondragstart', + + 'doc1.orange.ondrag', //mouse is over orange + 'doc1.bubble.ondrag', + 'doc1.orange.ondragenter', //not cancelled + 'doc1.bubble.ondragenter', + 'doc1.body.ondragenter', //so body becomes current target, and the event fires there as well + 'doc1.body.ondragover', + + 'doc1.orange.ondrag', //start repeating (some over orange, some over body) + 'doc1.bubble.ondrag', + 'doc1.body.ondragover', + 'doc1.orange.ondrag', //...twice to make sure it actually repeats + 'doc1.bubble.ondrag', + 'doc1.body.ondragover', //end repeating + + 'doc1.orange.ondrag', //mouse moves over pink + 'doc1.bubble.ondrag', + 'doc1.pink.ondragenter', //not cancelled + 'doc1.bubble.ondragenter', + 'doc1.body.ondragover', //so body becomes current target, but since it was already the target, dragenter does not need to fire again + + 'doc1.orange.ondrag', //start repeating (some over pink, some over body) + 'doc1.bubble.ondrag', + 'doc1.body.ondragover', + 'doc1.orange.ondrag', //...twice to make sure it actually repeats + 'doc1.bubble.ondrag', + 'doc1.body.ondragover', //end repeating + + 'doc1.orange.ondrag', //mouse moves over second frame + 'doc1.bubble.ondrag', + 'doc2.body.ondragenter', //not cancelled + 'doc2.body.ondragenter', //so it fires again and sets body as current target + 'doc2.body.ondragover', + + 'doc1.orange.ondrag', //start repeating (over second body) + 'doc1.bubble.ondrag', + 'doc2.body.ondragover', + 'doc1.orange.ondrag', //...twice to make sure it actually repeats + 'doc1.bubble.ondrag', + 'doc2.body.ondragover', //end repeating + + 'doc1.orange.ondrag', //mouse moves over yellow + 'doc1.bubble.ondrag', + 'doc2.yellow.ondragenter', + 'doc2.bubble.ondragenter', + 'doc2.yellow.ondragover', + 'doc2.bubble.ondragover', + + 'doc1.orange.ondrag', //start repeating (over yellow) + 'doc1.bubble.ondrag', + 'doc2.yellow.ondragover', + 'doc2.bubble.ondragover', + 'doc1.orange.ondrag', //...twice to make sure it actually repeats + 'doc1.bubble.ondrag', + 'doc2.yellow.ondragover', + 'doc2.bubble.ondragover', //end repeating + + 'doc1.orange.ondrag', //mouse moves over body + 'doc1.bubble.ondrag', + 'doc2.body.ondragenter', //not cancelled + 'doc2.body.ondragenter', //so it fires again and sets body as current target + 'doc2.body.ondragover', + + 'doc1.orange.ondrag', //start repeating (over body) + 'doc1.bubble.ondrag', + 'doc2.body.ondragover', + 'doc1.orange.ondrag', //...twice to make sure it actually repeats + 'doc1.bubble.ondrag', + 'doc2.body.ondragover', //end repeating + + 'doc1.orange.ondrag', //mouse moves over blue + 'doc1.bubble.ondrag', + 'doc2.blue.ondragenter', + 'doc2.bubble.ondragenter', + 'doc2.blue.ondragover', + 'doc2.bubble.ondragover', + + 'doc1.orange.ondrag', //start repeating (over blue) + 'doc1.bubble.ondrag', + 'doc2.blue.ondragover', + 'doc2.bubble.ondragover', + 'doc1.orange.ondrag', //...twice to make sure it actually repeats + 'doc1.bubble.ondrag', + 'doc2.blue.ondragover', + 'doc2.bubble.ondragover', //end repeating + + 'doc2.blue.ondrop', //release + 'doc2.bubble.ondrop', + 'doc1.orange.ondragend', + 'doc1.bubble.ondragend'] + + ); + }, 'Overall sequence'); + var div = parent.document.createElement("div"); + div.setAttribute("id", "log"); + parent.document.documentElement.appendChild(div); + parent.done(); + document.body.appendChild(parent.document.querySelector("div")); + } +}; +</script> + +<div id="testhere"> +<div draggable='true' id='orange'></div> +<div id='fuchsia'></div> +</div> + +<p>If you have already clicked on this page, reload it.</p> +<p>Use your pointing device to slowly drag the orange square over the pink square, then the grey square, then the yellow square, then the blue square, and release it over the blue square (make sure the mouse remains over each square for at least 1 second, and over the gaps between squares for at least 1 second). Fail if no new text appears below.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/events/events-cross-document-suite-HELPER-2.html b/testing/web-platform/tests/html/editing/dnd/events/events-cross-document-suite-HELPER-2.html new file mode 100644 index 0000000000..343fc09543 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/events-cross-document-suite-HELPER-2.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<title>drag & drop - event sequence for cross-document drag</title> +<style type="text/css"> + /* use margins instead of padding to make sure the body begins at the top of the page */ + html, body { + margin: 0; + padding: 0; + height: 100%; + } + #testhere div { + height: 100px; + width: 100px; + position: absolute; + top: 8px; + } + body::before { + height: 100px; + width: 100px; + position: absolute; + top: 8px; + left: 0px; + content: ""; + background-color: silver; + } + #yellow { + background-color: yellow; + left: 150px; + } + #blue { + background-color: navy; + left: 300px; + } +</style> + +<script> +window.onload = function () { + var yellow = document.querySelector('#yellow') + var blue = document.querySelector('#blue') + var body = document.body; + + /* Events for the fuchsia box */ + yellow.ondragstart = function () { parent.events.push('doc2.yellow.ondragstart'); }; + yellow.ondrag = function () { parent.events.push('doc2.yellow.ondrag'); }; + yellow.ondragenter = function () { parent.events.push('doc2.yellow.ondragenter'); return false; }; + yellow.ondragover = function () { parent.events.push('doc2.yellow.ondragover'); return false; }; + yellow.ondrop = function () { parent.events.push('doc2.yellow.ondrop'); return false; }; + yellow.ondragend = function () { parent.events.push('doc2.yellow.ondragend'); }; + yellow.onmousedown = function () { parent.events.push('doc2.yellow.onmousedown'); }; + yellow.onmouseup = function () { parent.events.push('doc2.yellow.onmouseup'); }; + + /* Events for the blue box (droppable) */ + blue.ondragstart = function () { parent.events.push('doc2.blue.ondragstart'); }; + blue.ondrag = function () { parent.events.push('doc2.blue.ondrag'); }; + blue.ondragenter = function () { parent.events.push('doc2.blue.ondragenter'); return false; }; + blue.ondragover = function () { parent.events.push('doc2.blue.ondragover'); return false; }; + blue.ondrop = function () { parent.events.push('doc2.blue.ondrop'); return false; }; + blue.ondragend = function () { parent.events.push('doc2.blue.ondragend'); }; + blue.onmousedown = function () { parent.events.push('doc2.blue.onmousedown'); }; + blue.onmouseup = function () { parent.events.push('doc2.blue.onmouseup'); }; + + /* Events for the page body */ + body.ondragstart = function (e) { parent.events.push( ( e.target == body ) ? 'doc2.body.ondragstart': 'doc2.bubble.ondragstart' ); }; + body.ondrag = function (e) { parent.events.push( ( e.target == body ) ? 'doc2.body.ondrag': 'doc2.bubble.ondrag' ); }; + body.ondragenter = function (e) { parent.events.push( ( e.target == body ) ? 'doc2.body.ondragenter': 'doc2.bubble.ondragenter' ); }; + body.ondragover = function (e) { parent.events.push( ( e.target == body ) ? 'doc2.body.ondragover': 'doc2.bubble.ondragover' ); }; + body.ondrop = function (e) { parent.events.push( ( e.target == body ) ? 'doc2.body.ondrop': 'doc2.bubble.ondrop' ); }; + body.ondragend = function (e) { parent.events.push( ( e.target == body ) ? 'doc2.body.ondragend': 'doc2.bubble.ondragend' ); }; + body.onmousedown = function (e) { parent.events.push( ( e.target == body ) ? 'doc2.body.onmousedown': 'doc2.bubble.onmousedown' ); }; + body.onmouseup = function (e) { parent.events.push( ( e.target == body ) ? 'doc2.body.onmouseup': 'doc2.bubble.onmouseup' ); }; + +}; +</script> + +<div id="testhere"> +<div id='yellow'></div> +<div id='blue'></div> +</div> diff --git a/testing/web-platform/tests/html/editing/dnd/events/events-cross-document-suite-manual.html b/testing/web-platform/tests/html/editing/dnd/events/events-cross-document-suite-manual.html new file mode 100644 index 0000000000..9428a87760 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/events-cross-document-suite-manual.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>drag & drop - event sequence for cross-document drag</title> +<script type="text/javascript" src="/resources/testharness.js"></script> +<script type="text/javascript" src="/resources/testharnessreport.js"></script> +<script> +var events = new Array(); +</script> + +<frameset cols="308,*" frameborder="no" border="0"> + <frame src="events-cross-document-suite-HELPER-1.html"> + <frame src="events-cross-document-suite-HELPER-2.html"> +</frameset> diff --git a/testing/web-platform/tests/html/editing/dnd/events/events-file-suite-manual.html b/testing/web-platform/tests/html/editing/dnd/events/events-file-suite-manual.html new file mode 100644 index 0000000000..22a66f5e9a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/events-file-suite-manual.html @@ -0,0 +1,176 @@ +<!DOCTYPE html> +<title>drag & drop - event sequence for file drops</title> +<script type="text/javascript" src="/resources/testharness.js"></script> +<script type="text/javascript" src="/resources/testharnessreport.js"></script> +<style type="text/css"> + /* use margins instead of padding to make sure the body begins at the top of the page */ + html, body { + margin: 0; + } + body { + padding: 116px 8px 8px; + } + body::before { + height: 108px; + width: 108px; + position: absolute; + top: 0px; + left: 0px; + content: ""; + background-color: orange; + } + #testhere div { + height: 100px; + width: 100px; + position: absolute; + top: 8px; + } + #fuchsia { + background-color: fuchsia; + left: 158px; + } + #yellow { + background-color: yellow; + left: 308px; + } + #blue { + background-color: navy; + left: 458px; + } +</style> + +<script> +setup(function () {},{explicit_done:true,explicit_timeout:true}); +window.onload = function () { + var fuchsia = document.querySelector('#fuchsia') + var yellow = document.querySelector('#yellow') + var blue = document.querySelector('#blue') + var body = document.body; + + var events = new Array + + /* Events for the fuchsia box */ + fuchsia.ondragstart = function () { events.push('pink.ondragstart'); }; + fuchsia.ondrag = function () { events.push('pink.ondrag'); }; + fuchsia.ondragenter = function () { events.push('pink.ondragenter'); }; + fuchsia.ondragover = function () { events.push('pink.ondragover'); }; + fuchsia.ondragleave = function () { events.push('pink.ondragleave'); }; + fuchsia.ondrop = function () { events.push('pink.ondrop'); return false; }; + fuchsia.ondragend = function () { events.push('pink.ondragend'); }; + fuchsia.onmousedown = function () { events.push('pink.onmousedown'); }; + fuchsia.onmouseup = function () { events.push('pink.onmouseup'); }; + + /* Events for the fuchsia box */ + yellow.ondragstart = function () { events.push('yellow.ondragstart'); }; + yellow.ondrag = function () { events.push('yellow.ondrag'); }; + yellow.ondragenter = function () { events.push('yellow.ondragenter'); return false; }; + yellow.ondragover = function () { events.push('yellow.ondragover'); return false; }; + yellow.ondragleave = function () { events.push('yellow.ondragleave'); }; + yellow.ondrop = function () { events.push('yellow.ondrop'); return false; }; + yellow.ondragend = function () { events.push('yellow.ondragend'); }; + yellow.onmousedown = function () { events.push('yellow.onmousedown'); }; + yellow.onmouseup = function () { events.push('yellow.onmouseup'); }; + + /* Events for the blue box (droppable) */ + blue.ondragstart = function () { events.push('blue.ondragstart'); }; + blue.ondrag = function () { events.push('blue.ondrag'); }; + blue.ondragenter = function () { events.push('blue.ondragenter'); return false; }; + blue.ondragover = function () { events.push('blue.ondragover'); return false; }; + blue.ondragleave = function () { events.push('blue.ondragleave'); }; + blue.ondrop = function () { events.push('blue.ondrop'); return false; }; + blue.ondragend = function () { events.push('blue.ondragend'); }; + blue.onmousedown = function () { events.push('blue.onmousedown'); }; + blue.onmouseup = function () { events.push('blue.onmouseup'); }; + + /* Events for the page body */ + body.ondragstart = function (e) { events.push( ( e.target == body ) ? 'body.ondragstart': 'bubble.ondragstart' ); }; + body.ondrag = function (e) { events.push( ( e.target == body ) ? 'body.ondrag': 'bubble.ondrag' ); }; + body.ondragenter = function (e) { events.push( ( e.target == body ) ? 'body.ondragenter': 'bubble.ondragenter' ); }; + body.ondragover = function (e) { events.push( ( e.target == body ) ? 'body.ondragover': 'bubble.ondragover' ); }; + body.ondragleave = function (e) { events.push( ( e.target == body ) ? 'body.ondragleave': 'bubble.ondragleave' ); }; + body.ondrop = function (e) { events.push( ( e.target == body ) ? 'body.ondrop': 'bubble.ondrop' ); setTimeout(finish,200); }; + body.ondragend = function (e) { events.push( ( e.target == body ) ? 'body.ondragend': 'bubble.ondragend' ); }; + body.onmousedown = function (e) { events.push( ( e.target == body ) ? 'body.onmousedown': 'bubble.onmousedown' ); }; + body.onmouseup = function (e) { events.push( ( e.target == body ) ? 'body.onmouseup': 'bubble.onmouseup' ); }; + + function finish(e) { + var i, evindex; + events = events.join('-'); + /* + Normalise; reduce repeating event sequences to only 2 occurrences. + This makes the final event sequence predictable, no matter how many times the drag->dragover sequences repeat. + Two occurrances are kept in each case to allow testing to make sure the sequence really is repeating. + */ + //spec compliant - div dragenter is not cancelled, so body dragenter fires and body becomes current target + //repeats while drag is over fuchsia or the body + events = events.replace(/(-body\.ondragover){3,}/g,'$1$1'); + //repeats while dragging over yellow + events = events.replace(/(-yellow\.ondragover-bubble\.ondragover){3,}/g,'$1$1'); + //repeats while dragging over blue + events = events.replace(/(-blue\.ondragover-bubble\.ondragover){3,}/g,'$1$1'); + //non-spec-compliant repeats while dragging over fuchsia + events = events.replace(/(-pink\.ondragover-bubble\.ondragover){3,}/g,'$1$1'); + events = events.split(/-/g); + + test(function () { + assert_array_equals(events, + + [/* 1 */ 'body.ondragenter', //mouse moves over body, which does not cancel event + /* 2 */ 'body.ondragenter', //so it fires again and sets body as current target + + /* 3 */ 'body.ondragover', //start repeating over body + /* 4 */ 'body.ondragover', //...twice to make sure it actually repeats + + /* 5 */ 'pink.ondragenter', //mouse moves over pink - not cancelled + /* 6 */ 'bubble.ondragenter', + + /* 7 */ 'body.ondragover', //so body becomes current target, but since it was already the target, dragenter does not need to fire again + /* 8 */ 'body.ondragover', //...twice to make sure it actually repeats + + /* 9 */ 'yellow.ondragenter', //mouse moves over yellow + /* 10 */ 'bubble.ondragenter', + /* 11 */ 'body.ondragleave', + + /* 12 */ 'yellow.ondragover', //start repeating (over yellow) + /* 13 */ 'bubble.ondragover', + /* 14 */ 'yellow.ondragover', //...twice to make sure it actually repeats + /* 15 */ 'bubble.ondragover', //end repeating + + /* 16 */ 'body.ondragenter', //mouse moves over body, not cancelled + /* 17 */ 'body.ondragenter', //so it fires again and sets body as current target + /* 18 */ 'yellow.ondragleave', + /* 19 */ 'bubble.ondragleave', + + /* 20 */ 'body.ondragover', //start repeating (over body) + /* 21 */ 'body.ondragover', //...twice to make sure it actually repeats + + /* 22 */ 'blue.ondragenter', //mouse moves over blue + /* 23 */ 'bubble.ondragenter', + /* 24 */ 'body.ondragleave', + + /* 25 */ 'blue.ondragover', //start repeating (over blue) + /* 26 */ 'bubble.ondragover', + /* 27 */ 'blue.ondragover', //...twice to make sure it actually repeats + /* 28 */ 'bubble.ondragover', + + /* 29 */ 'blue.ondrop', //release + /* 30 */ 'bubble.ondrop'] + + ); + }, 'Overall sequence'); + + done(); + } +}; +</script> + +<div id="testhere"> +<div id='fuchsia'></div> +<div id='yellow'></div> +<div id='blue'></div> +</div> + +<p>If you have already clicked on this page, reload it.</p> +<p>Use your pointing device to slowly drag a file from your system's file manager, over the orange square (ensure that this is the first part of the page that you drag the file over, not an otherwise blank part of the page), then the pink square, then the yellow square, then the blue square, and release it over the blue square (make sure the mouse remains over each square for at least 1 second, and over the gaps between squares for at least 1 second). If a prompt appears, accept it. Fail if no new text appears below.</p> + +<div id="log"></div> diff --git a/testing/web-platform/tests/html/editing/dnd/events/events-non-draggable-001-manual.html b/testing/web-platform/tests/html/editing/dnd/events/events-non-draggable-001-manual.html new file mode 100644 index 0000000000..0315ccdc86 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/events-non-draggable-001-manual.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset='utf-8'> +<title>drag & drop – events should not fire with non-draggable elements – 001</title> +<style type="text/css"> + div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + div + p { + margin-top: 220px; + } +</style> + +<script> +window.onload = function() { + + var elem = document.getElementsByTagName('div')[0]; + var pass = true; + + function fail() { + pass = false; + } + + elem.addEventListener('drag',fail,false); + elem.addEventListener('dragend',fail,false); + elem.addEventListener('dragenter',fail,false); + elem.addEventListener('dragleave',fail,false); + elem.addEventListener('dragover',fail,false); + elem.addEventListener('dragstart',fail,false); + elem.addEventListener('drop',fail,false); + + elem.ondrag = fail; + elem.ondragend = fail; + elem.ondragenter = fail; + elem.ondragleave = fail; + elem.ondragover = fail; + elem.ondragstart = fail; + elem.ondrop = fail; + + elem.onmouseup = function () { + setTimeout(function () { + if (pass == true) { + document.body.innerHTML = 'PASS'; + } else { + document.body.innerHTML = 'FAIL'; + } + }, 100 ); + }; + +} +</script> + +<div></div> + +<p>Click once on the orange box above, without moving the mouse while +clicking. The word "PASS" should appear.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/events/events-non-draggable-002-manual.html b/testing/web-platform/tests/html/editing/dnd/events/events-non-draggable-002-manual.html new file mode 100644 index 0000000000..c890cb482e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/events-non-draggable-002-manual.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<meta charset='utf-8'> +<title>drag & drop – events should not fire with non-draggable elements – 002</title> +<style type="text/css"> + div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + div + div { + background-color: navy; + left: 250px; + } + + div + p { + margin-top: 220px; + } +</style> + +<script> +window.onload = function() { + + var orange = document.getElementsByTagName('div')[0]; + var blue = document.getElementsByTagName('div')[1]; + var body = document.body; + + var pass = true; + + function fail() { + pass = false; + } + + body.addEventListener('drag',fail,false); + body.addEventListener('dragend',fail,false); + body.addEventListener('dragenter',fail,false); + body.addEventListener('dragleave',fail,false); + body.addEventListener('dragover',fail,false); + body.addEventListener('dragstart',fail,false); + body.addEventListener('drop',fail,false); + + body.ondrag = fail; + body.ondragend = fail; + body.ondragenter = fail; + body.ondragleave = fail; + body.ondragover = fail; + body.ondragstart = fail; + body.ondrop = fail; + + orange.addEventListener('drag',fail,false); + orange.addEventListener('dragend',fail,false); + orange.addEventListener('dragenter',fail,false); + orange.addEventListener('dragleave',fail,false); + orange.addEventListener('dragover',fail,false); + orange.addEventListener('dragstart',fail,false); + orange.addEventListener('drop',fail,false); + + orange.ondrag = fail; + orange.ondragend = fail; + orange.ondragenter = fail; + orange.ondragleave = fail; + orange.ondragover = fail; + orange.ondragstart = fail; + orange.ondrop = fail; + + blue.addEventListener('drag',fail,false); + blue.addEventListener('dragend',fail,false); + blue.addEventListener('dragenter',fail,false); + blue.addEventListener('dragleave',fail,false); + blue.addEventListener('dragover',fail,false); + blue.addEventListener('dragstart',fail,false); + blue.addEventListener('drop',fail,false); + + blue.ondrag = fail; + blue.ondragend = fail; + blue.ondragenter = fail; + blue.ondragleave = fail; + blue.ondragover = fail; + blue.ondragstart = fail; + blue.ondrop = fail; + + body.onmouseup = function () { + setTimeout(function () { + if (pass == true) { + document.body.innerHTML = 'PASS'; + } else { + document.body.innerHTML = 'FAIL'; + } + }, 100 ); + }; + +} +</script> + +<div></div> +<div></div> + +<p>Use your pointing device to drag from the orange box to the blue box. The +word "PASS" should appear. diff --git a/testing/web-platform/tests/html/editing/dnd/events/events-suite-manual.html b/testing/web-platform/tests/html/editing/dnd/events/events-suite-manual.html new file mode 100644 index 0000000000..16c6583dc8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/events-suite-manual.html @@ -0,0 +1,371 @@ +<!DOCTYPE html> +<title>drag & drop - event sequence for draggable elements</title> +<script type="text/javascript" src="/resources/testharness.js"></script> +<script type="text/javascript" src="/resources/testharnessreport.js"></script> +<style type="text/css"> + /* use margins instead of padding to make sure the body begins at the top of the page */ + html, body { + margin: 0; + } + body { + padding: 116px 8px 8px; + } + #testhere div { + height: 100px; + width: 100px; + position: absolute; + top: 8px; + } + #orange { + background-color: orange; + left: 8px; + } + #fuchsia { + background-color: fuchsia; + left: 158px; + } + #yellow { + background-color: yellow; + left: 308px; + } + #blue { + background-color: navy; + left: 458px; + } +</style> + +<script> +setup(function () {},{explicit_done:true,explicit_timeout:true}); +window.onload = function () { + var orange = document.querySelector('#orange') + var fuchsia = document.querySelector('#fuchsia') + var yellow = document.querySelector('#yellow') + var blue = document.querySelector('#blue') + var body = document.body; + + var events = new Array + + orange.ondragstart = function (e) { + events.push('orange.ondragstart'); + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'foo'); + }; + orange.ondrag = function () { events.push('orange.ondrag'); }; + orange.ondragenter = function () { events.push('orange.ondragenter'); }; + orange.ondragover = function () { events.push('orange.ondragover'); }; + orange.ondragleave = function () { events.push('orange.ondragleave'); }; + orange.ondrop = function () { events.push('orange.ondrop'); return false; }; + orange.ondragend = function () { events.push('orange.ondragend'); }; + orange.onmousedown = function () { events.push('orange.onmousedown'); }; + orange.onmouseup = function () { events.push('orange.onmouseup'); }; + + /* Events for the fuchsia box */ + fuchsia.ondragstart = function () { events.push('pink.ondragstart'); }; + fuchsia.ondrag = function () { events.push('pink.ondrag'); }; + fuchsia.ondragenter = function () { events.push('pink.ondragenter'); }; + fuchsia.ondragover = function () { events.push('pink.ondragover'); }; + fuchsia.ondragleave = function () { events.push('pink.ondragleave'); }; + fuchsia.ondrop = function () { events.push('pink.ondrop'); return false; }; + fuchsia.ondragend = function () { events.push('pink.ondragend'); }; + fuchsia.onmousedown = function () { events.push('pink.onmousedown'); }; + fuchsia.onmouseup = function () { events.push('pink.onmouseup'); }; + + /* Events for the fuchsia box */ + yellow.ondragstart = function () { events.push('yellow.ondragstart'); }; + yellow.ondrag = function () { events.push('yellow.ondrag'); }; + yellow.ondragenter = function () { events.push('yellow.ondragenter'); return false; }; + yellow.ondragover = function () { events.push('yellow.ondragover'); return false; }; + yellow.ondragleave = function () { events.push('yellow.ondragleave'); }; + yellow.ondrop = function () { events.push('yellow.ondrop'); return false; }; + yellow.ondragend = function () { events.push('yellow.ondragend'); }; + yellow.onmousedown = function () { events.push('yellow.onmousedown'); }; + yellow.onmouseup = function () { events.push('yellow.onmouseup'); }; + + /* Events for the blue box (droppable) */ + blue.ondragstart = function () { events.push('blue.ondragstart'); }; + blue.ondrag = function () { events.push('blue.ondrag'); }; + blue.ondragenter = function () { events.push('blue.ondragenter'); return false; }; + blue.ondragover = function () { events.push('blue.ondragover'); return false; }; + blue.ondragleave = function () { events.push('blue.ondragleave'); }; + blue.ondrop = function () { events.push('blue.ondrop'); return false; }; + blue.ondragend = function () { events.push('blue.ondragend'); }; + blue.onmousedown = function () { events.push('blue.onmousedown'); }; + blue.onmouseup = function () { events.push('blue.onmouseup'); }; + + /* Events for the page body */ + body.ondragstart = function (e) { events.push( ( e.target == body ) ? 'body.ondragstart': 'bubble.ondragstart' ); }; + body.ondrag = function (e) { events.push( ( e.target == body ) ? 'body.ondrag': 'bubble.ondrag' ); }; + body.ondragenter = function (e) { events.push( ( e.target == body ) ? 'body.ondragenter': 'bubble.ondragenter' ); }; + body.ondragover = function (e) { events.push( ( e.target == body ) ? 'body.ondragover': 'bubble.ondragover' ); }; + body.ondragleave = function (e) { events.push( ( e.target == body ) ? 'body.ondragleave': 'bubble.ondragleave' ); }; + body.ondrop = function (e) { events.push( ( e.target == body ) ? 'body.ondrop': 'bubble.ondrop' ); }; + body.ondragend = function (e) { events.push( ( e.target == body ) ? 'body.ondragend': 'bubble.ondragend' ); setTimeout(finish,100); }; + body.onmousedown = function (e) { events.push( ( e.target == body ) ? 'body.onmousedown': 'bubble.onmousedown' ); }; + body.onmouseup = function (e) { events.push( ( e.target == body ) ? 'body.onmouseup': 'bubble.onmouseup' ); }; + + function finish(e) { + var i, evindex; + events = events.join('-'); + /* + Normalise; reduce repeating event sequences to only 2 occurrences. + This makes the final event sequence predictable, no matter how many times the drag->dragover sequences repeat. + Two occurrances are kept in each case to allow testing to make sure the sequence really is repeating. + */ + //spec compliant - div dragenter is not cancelled, so body dragenter fires and body becomes current target + //repeats while drag is over orange or fuchsia or the body + events = events.replace(/(-orange\.ondrag-bubble\.ondrag-body\.ondragover){3,}/g,'$1$1'); + //repeats while dragging over yellow + events = events.replace(/(-orange\.ondrag-bubble\.ondrag-yellow\.ondragover-bubble\.ondragover){3,}/g,'$1$1'); + //repeats while dragging over blue + events = events.replace(/(-orange\.ondrag-bubble\.ondrag-blue\.ondragover-bubble\.ondragover){3,}/g,'$1$1'); + //non-spec-compliant repeats while dragging over orange + events = events.replace(/(-orange\.ondrag-bubble\.ondrag-orange\.ondragover-bubble\.ondragover){3,}/g,'$1$1'); + //non-spec-compliant repeats while dragging over fuchsia + events = events.replace(/(-orange\.ondrag-bubble\.ondrag-pink\.ondragover-bubble\.ondragover){3,}/g,'$1$1'); + events = events.split(/-/g); + + test(function () { + assert_array_equals(events, + + [/* 1 */ 'orange.onmousedown', //mouse down + /* 2 */ 'bubble.onmousedown', + + /* 3 */ 'orange.ondragstart', //dragging begins + /* 4 */ 'bubble.ondragstart', + + /* 5 */ 'orange.ondrag', //mouse is over orange + /* 6 */ 'bubble.ondrag', + /* 7 */ 'orange.ondragenter', //not cancelled + /* 8 */ 'bubble.ondragenter', + /* 9 */ 'body.ondragenter', //so body becomes current target, and the event fires there as well + /* 10 */ 'body.ondragover', + + /* 11 */ 'orange.ondrag', //start repeating (some over orange, some over body) + /* 12 */ 'bubble.ondrag', + /* 13 */ 'body.ondragover', + /* 14 */ 'orange.ondrag', //...twice to make sure it actually repeats + /* 15 */ 'bubble.ondrag', + /* 16 */ 'body.ondragover', //end repeating + + /* 17 */ 'orange.ondrag', //mouse moves over pink + /* 18 */ 'bubble.ondrag', + /* 19 */ 'pink.ondragenter', //not cancelled + /* 20 */ 'bubble.ondragenter', + /* 21 */ 'body.ondragover', //so body becomes current target, but since it was already the target, dragenter does not need to fire again + + /* 22 */ 'orange.ondrag', //start repeating (some over pink, some over body) + /* 23 */ 'bubble.ondrag', + /* 24 */ 'body.ondragover', + /* 25 */ 'orange.ondrag', //...twice to make sure it actually repeats + /* 26 */ 'bubble.ondrag', + /* 27 */ 'body.ondragover', //end repeating + + /* 28 */ 'orange.ondrag', //mouse moves over yellow + /* 29 */ 'bubble.ondrag', + /* 30 */ 'yellow.ondragenter', + /* 31 */ 'bubble.ondragenter', + /* 32 */ 'body.ondragleave', + /* 33 */ 'yellow.ondragover', + /* 34 */ 'bubble.ondragover', + + /* 35 */ 'orange.ondrag', //start repeating (over yellow) + /* 36 */ 'bubble.ondrag', + /* 37 */ 'yellow.ondragover', + /* 38 */ 'bubble.ondragover', + /* 39 */ 'orange.ondrag', //...twice to make sure it actually repeats + /* 40 */ 'bubble.ondrag', + /* 41 */ 'yellow.ondragover', + /* 42 */ 'bubble.ondragover', //end repeating + + /* 43 */ 'orange.ondrag', //mouse moves over body + /* 44 */ 'bubble.ondrag', + /* 45 */ 'body.ondragenter', //not cancelled + /* 46 */ 'body.ondragenter', //so it fires again and sets body as current target + /* 47 */ 'yellow.ondragleave', + /* 48 */ 'bubble.ondragleave', + /* 49 */ 'body.ondragover', + + /* 50 */ 'orange.ondrag', //start repeating (over body) + /* 51 */ 'bubble.ondrag', + /* 52 */ 'body.ondragover', + /* 53 */ 'orange.ondrag', //...twice to make sure it actually repeats + /* 54 */ 'bubble.ondrag', + /* 55 */ 'body.ondragover', //end repeating + + /* 56 */ 'orange.ondrag', //mouse moves over blue + /* 57 */ 'bubble.ondrag', + /* 58 */ 'blue.ondragenter', + /* 59 */ 'bubble.ondragenter', + /* 60 */ 'body.ondragleave', + /* 61 */ 'blue.ondragover', + /* 62 */ 'bubble.ondragover', + + /* 63 */ 'orange.ondrag', //start repeating (over blue) + /* 64 */ 'bubble.ondrag', + /* 65 */ 'blue.ondragover', + /* 66 */ 'bubble.ondragover', + /* 67 */ 'orange.ondrag', //...twice to make sure it actually repeats + /* 68 */ 'bubble.ondrag', + /* 69 */ 'blue.ondragover', + /* 70 */ 'bubble.ondragover', //end repeating + + /* 71 */ 'blue.ondrop', //release + /* 72 */ 'bubble.ondrop', + /* 73 */ 'orange.ondragend', + /* 74 */ 'bubble.ondragend'] + + ); + }, 'Overall sequence'); + + /* ondragstart */ + test(function () { assert_true( events.indexOf('orange.ondragstart') != -1 ); }, "orange.ondragstart should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'orange.ondragstart') return e; }).length, 1); }, "orange.ondragstart should fire 1 time"); + test(function () { assert_equals( events[2], 'orange.ondragstart' ); }, "orange.ondragstart should be event handler #3"); + test(function () { assert_equals( events.indexOf('pink.ondragstart'), -1 ); }, "pink.ondragstart should not fire"); + test(function () { assert_equals( events.indexOf('yellow.ondragstart'), -1 ); }, "yellow.ondragstart should not fire"); + test(function () { assert_equals( events.indexOf('blue.ondragstart'), -1 ); }, "blue.ondragstart should not fire"); + test(function () { assert_equals( events.indexOf('body.ondragstart'), -1 ); }, "ondragstart should not fire at the body"); + test(function () { assert_true( events.indexOf('bubble.ondragstart') != -1 ); }, "ondragstart should bubble to body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'bubble.ondragstart') return e; }).length, 1); }, "ondragstart should only bubble to body 1 time"); + test(function () { assert_equals( events[3], 'bubble.ondragstart' ); }, "ondragstart should bubble to body as event handler #4"); + + /* ondrag */ + test(function () { assert_true( events.indexOf('orange.ondrag') != -1 ); }, "orange.ondrag should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'orange.ondrag') return e; }).length, 15); }, "orange.ondrag should fire 15 times"); + for( var i = 0, evindex = [4,10,13,16,21,24,27,34,38,42,49,52,55,62,66]; i < evindex.length; i++ ) { + test(function () { assert_equals( events[evindex[i]], 'orange.ondrag' ); }, "orange.ondrag should be event handler #"+(evindex[i]+1)); + } + test(function () { assert_equals( events.indexOf('pink.ondrag'), -1 ); }, "pink.ondrag should not fire"); + test(function () { assert_equals( events.indexOf('yellow.ondrag'), -1 ); }, "yellow.ondrag should not fire"); + test(function () { assert_equals( events.indexOf('blue.ondrag'), -1 ); }, "blue.ondrag should not fire"); + test(function () { assert_equals( events.indexOf('body.ondrag'), -1 ); }, "ondrag should not fire at the body"); + test(function () { assert_true( events.indexOf('bubble.ondrag') != -1 ); }, "ondrag should bubble to body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'bubble.ondrag') return e; }).length, 15); }, "ondrag should bubble to body 15 times"); + for( var i = 0, evindex = [5,11,14,17,22,25,28,35,39,43,50,53,56,63,67]; i < evindex.length; i++ ) { + test(function () { assert_equals( events[evindex[i]], 'bubble.ondrag' ); }, "ondrag should bubble to body as event handler #"+(evindex[i]+1)); + } + + /* ondragenter */ + test(function () { assert_true( events.indexOf('orange.ondragenter') != -1 ); }, "orange.ondragenter should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'orange.ondragenter') return e; }).length, 1); }, "orange.ondragenter should fire 1 time"); + test(function () { assert_equals( events[6], 'orange.ondragenter' ); }, "orange.ondragenter should be event handler #7"); + test(function () { assert_true( events.indexOf('pink.ondragenter') != -1 ); }, "pink.ondragenter should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'pink.ondragenter') return e; }).length, 1); }, "pink.ondragenter should fire 1 time"); + test(function () { assert_equals( events[18], 'pink.ondragenter' ); }, "pink.ondragenter should be event handler #19"); + test(function () { assert_true( events.indexOf('yellow.ondragenter') != -1 ); }, "yellow.ondragenter should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'yellow.ondragenter') return e; }).length, 1); }, "yellow.ondragenter should fire 1 time"); + test(function () { assert_equals( events[29], 'yellow.ondragenter' ); }, "yellow.ondragenter should be event handler #30"); + test(function () { assert_true( events.indexOf('blue.ondragenter') != -1 ); }, "blue.ondragenter should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'blue.ondragenter') return e; }).length, 1); }, "blue.ondragenter should fire 1 time"); + test(function () { assert_equals( events[57], 'blue.ondragenter' ); }, "blue.ondragenter should be event handler #58"); + test(function () { assert_true( events.indexOf('body.ondragenter') != -1 ); }, "ondragenter should fire at body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'body.ondragenter') return e; }).length, 3); }, "ondragenter should fire at body 2 times"); + for( var i = 0, evindex = [8,44,45]; i < evindex.length; i++ ) { + test(function () { assert_equals( events[evindex[i]], 'body.ondragenter' ); }, "ondragenter should fire at body as event handler #"+(evindex[i]+1)); + } + test(function () { assert_true( events.indexOf('bubble.ondragenter') != -1 ); }, "ondragenter should bubble to body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'bubble.ondragenter') return e; }).length, 4); }, "ondragenter should bubble to body 4 times"); + for( var i = 0, evindex = [7,19,30,58]; i < evindex.length; i++ ) { + test(function () { assert_equals( events[evindex[i]], 'bubble.ondragenter' ); }, "ondragenter should bubble to body as event handler #"+(evindex[i]+1)); + } + + /* ondragover */ + test(function () { assert_equals( events.indexOf('orange.ondragover'), -1 ); }, "orange.ondragover should not fire"); + test(function () { assert_equals( events.indexOf('pink.ondragover'), -1 ); }, "pink.ondragover should not fire"); + test(function () { assert_true( events.indexOf('yellow.ondragover') != -1 ); }, "yellow.ondragover should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'yellow.ondragover') return e; }).length, 3); }, "yellow.ondragover should fire 3 times"); + for( var i = 0, evindex = [32,36,40]; i < evindex.length; i++ ) { + test(function () { assert_equals( events[evindex[i]], 'yellow.ondragover' ); }, "yellow.ondragover should be event handler #"+(evindex[i]+1)); + } + test(function () { assert_true( events.indexOf('blue.ondragover') != -1 ); }, "blue.ondragover should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'blue.ondragover') return e; }).length, 3); }, "blue.ondragover should fire 9 times"); + for( var i = 0, evindex = [60,64,68]; i < evindex.length; i++ ) { + test(function () { assert_equals( events[evindex[i]], 'blue.ondragover' ); }, "blue.ondragover should be event handler #"+(evindex[i]+1)); + } + test(function () { assert_true( events.indexOf('body.ondragover') != -1 ); }, "ondragover should fire at body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'body.ondragover') return e; }).length, 9); }, "ondragover should fire at body 2 times"); + for( var i = 0, evindex = [9,12,15,20,23,26,48,51,54]; i < evindex.length; i++ ) { + test(function () { assert_equals( events[evindex[i]], 'body.ondragover' ); }, "ondragover should fire at body as event handler #"+(evindex[i]+1)); + } + test(function () { assert_true( events.indexOf('bubble.ondragover') != -1 ); }, "ondragover should bubble to body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'bubble.ondragover') return e; }).length, 6); }, "ondragover should bubble to body 6 times"); + for( var i = 0, evindex = [33,37,41,61,65,69]; i < evindex.length; i++ ) { + test(function () { assert_equals( events[evindex[i]], 'bubble.ondragover' ); }, "ondragover should bubble to body as event handler #"+(evindex[i]+1)); + } + + /* ondragleave */ + test(function () { assert_equals( events.indexOf('orange.ondragleave'), -1 ); }, "orange.ondragleave should not fire"); + test(function () { assert_equals( events.indexOf('pink.ondragleave'), -1 ); }, "pink.ondragleave should not fire"); + test(function () { assert_true( events.indexOf('yellow.ondragleave') != -1 ); }, "yellow.ondragleave should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'yellow.ondragleave') return e; }).length, 1); }, "yellow.ondragleave should fire 1 time"); + test(function () { assert_equals( events[46], 'yellow.ondragleave' ); }, "yellow.ondragleave should be event handler #47"); + test(function () { assert_equals( events.indexOf('blue.ondragleave'), -1 ); }, "blue.ondragleave should not fire"); + test(function () { assert_true( events.indexOf('body.ondragleave') != -1 ); }, "ondragleave should fire at body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'body.ondragleave') return e; }).length, 2); }, "ondragleave should fire at body 2 times"); + for( var i = 0, evindex = [31,59]; i < evindex.length; i++ ) { + test(function () { assert_equals( events[evindex[i]], 'body.ondragleave' ); }, "ondragleave should fire at body as event handler #"+(evindex[i]+1)); + } + test(function () { assert_true( events.indexOf('bubble.ondragleave') != -1 ); }, "ondragleave should bubble to body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'bubble.ondragleave') return e; }).length, 1); }, "ondragleave should bubble to body 1 time"); + test(function () { assert_equals( events[47], 'bubble.ondragleave' ); }, "ondragleave should bubble to body as event handler #48"); + + /* ondrop */ + test(function () { assert_equals( events.indexOf('orange.ondrop'), -1 ); }, "orange.ondrop should not fire"); + test(function () { assert_equals( events.indexOf('pink.ondrop'), -1 ); }, "pink.ondrop should not fire"); + test(function () { assert_equals( events.indexOf('yellow.ondrop'), -1 ); }, "yellow.ondrop should not fire"); + test(function () { assert_true( events.indexOf('blue.ondrop') != -1 ); }, "blue.ondrop should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'blue.ondrop') return e; }).length, 1); }, "blue.ondrop should fire 1 time"); + test(function () { assert_equals( events[70], 'blue.ondrop' ); }, "blue.ondrop should be event handler #71"); + test(function () { assert_equals( events.indexOf('body.ondrop'), -1 ); }, "ondrop should not fire at body"); + test(function () { assert_true( events.indexOf('bubble.ondrop') != -1 ); }, "ondrop should bubble to body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'bubble.ondrop') return e; }).length, 1); }, "ondrop should bubble to body 1 time"); + test(function () { assert_equals( events[71], 'bubble.ondrop' ); }, "ondrop should bubble to body as event handler #72"); + + /* ondragend */ + test(function () { assert_true( events.indexOf('orange.ondragend') != -1 ); }, "orange.ondragend should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'orange.ondragend') return e; }).length, 1); }, "orange.ondragend should fire 1 time"); + test(function () { assert_equals( events[72], 'orange.ondragend' ); }, "orange.ondragend should be event handler #73"); + test(function () { assert_equals( events.indexOf('pink.ondragend'), -1 ); }, "pink.ondragend should not fire"); + test(function () { assert_equals( events.indexOf('yellow.ondragend'), -1 ); }, "yellow.ondragend should not fire"); + test(function () { assert_equals( events.indexOf('blue.ondragend'), -1 ); }, "blue.ondragend should not fire"); + test(function () { assert_equals( events.indexOf('body.ondragend'), -1 ); }, "ondragend should not fire at body"); + test(function () { assert_true( events.indexOf('bubble.ondragend') != -1 ); }, "ondragend should bubble to body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'bubble.ondragend') return e; }).length, 1); }, "ondragend should bubble to body 1 time"); + test(function () { assert_equals( events[73], 'bubble.ondragend' ); }, "ondragend should bubble to body as event handler #74"); + + /* onmousedown */ + test(function () { assert_true( events.indexOf('orange.onmousedown') != -1 ); }, "orange.onmousedown should fire"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'orange.onmousedown') return e; }).length, 1); }, "orange.onmousedown should fire 1 time"); + test(function () { assert_equals( events[0], 'orange.onmousedown' ); }, "orange.onmousedown should be event handler #1"); + test(function () { assert_equals( events.indexOf('pink.onmousedown'), -1 ); }, "pink.onmousedown should not fire"); + test(function () { assert_equals( events.indexOf('yellow.onmousedown'), -1 ); }, "yellow.onmousedown should not fire"); + test(function () { assert_equals( events.indexOf('blue.onmousedown'), -1 ); }, "blue.onmousedown should not fire"); + test(function () { assert_equals( events.indexOf('body.onmousedown'), -1 ); }, "onmousedown should not fire at body"); + test(function () { assert_true( events.indexOf('bubble.onmousedown') != -1 ); }, "onmousedown should bubble to body"); + test(function () { assert_equals( events.filter(function (e) { if (e == 'bubble.onmousedown') return e; }).length, 1); }, "onmousedown should bubble to body 1 time"); + test(function () { assert_equals( events[1], 'bubble.onmousedown' ); }, "onmousedown should bubble to body as event handler #1"); + + /* onmouseup */ + test(function () { assert_equals( events.indexOf('orange.onmouseup'), -1 ); }, "orange.onmouseup should not fire"); + test(function () { assert_equals( events.indexOf('pink.onmouseup'), -1 ); }, "pink.onmouseup should not fire"); + test(function () { assert_equals( events.indexOf('yellow.onmouseup'), -1 ); }, "yellow.onmouseup should not fire"); + test(function () { assert_equals( events.indexOf('blue.onmouseup'), -1 ); }, "blue.onmouseup should not fire"); + test(function () { assert_equals( events.indexOf('body.onmouseup'), -1 ); }, "onmouseup should not fire at body"); + test(function () { assert_equals( events.indexOf('bubble.onmouseup'), -1 ); }, "onmouseup should not bubble to body"); + + done(); + } +}; +</script> + +<div id="testhere"> +<div draggable='true' id='orange'></div> +<div id='fuchsia'></div> +<div id='yellow'></div> +<div id='blue'></div> +</div> + +<p>If you have already clicked on this page, reload it.</p> +<p>Use your pointing device to slowly drag the orange square over the pink square then the yellow square, then the blue square, and release it over the blue square (make sure the mouse remains over each square for at least 1 second, and over the gaps between squares for at least 1 second). Fail if no new text appears below.</p> + +<div id="log"></div> diff --git a/testing/web-platform/tests/html/editing/dnd/events/helper-drag-me-input-with-circle.xhtml b/testing/web-platform/tests/html/editing/dnd/events/helper-drag-me-input-with-circle.xhtml new file mode 100644 index 0000000000..966afe4400 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/helper-drag-me-input-with-circle.xhtml @@ -0,0 +1,51 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame drag and drop: helper file</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body onload="document.querySelector('input').select()" ondragleave="leavePage(event)"> +<p ondragstart="start(event)" ondragend="endDrag(event)"><input value="Drag me"/></p> +<p>Drag selected text out of frame and drop it somewhere on the page. Both circles should turn green once text is dropped.</p> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/helper-drag-me-link-with-circle.xhtml b/testing/web-platform/tests/html/editing/dnd/events/helper-drag-me-link-with-circle.xhtml new file mode 100644 index 0000000000..c85f228619 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/helper-drag-me-link-with-circle.xhtml @@ -0,0 +1,51 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame drag and drop: helper file</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragleave="leavePage(event)"> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondragend="endDrag(event)">Drag me</a></p> +<p>Drag link out of frame and drop it somewhere on the page. Both circles should turn green once link is dropped.</p> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/helper-drag-me-p-with-circle.xhtml b/testing/web-platform/tests/html/editing/dnd/events/helper-drag-me-p-with-circle.xhtml new file mode 100644 index 0000000000..efbd4b7614 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/helper-drag-me-p-with-circle.xhtml @@ -0,0 +1,51 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame drag and drop: helper file</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +</style> +<script type="application/ecmascript"> +var step = 1; +function start(event) + {if(step++ == 1) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragstart should be first event to fire.')} + } +function leavePage(event) + {if(step++ > 1) + {setColor('green green silver silver')} + else + {step = 0; + setColor('maroon'); + say('Dragleave should fire after dragstart.')} + } +function endDrag(event) + {if(step++ > 2) + {setColor('green')} + else + {step = 0; + setColor('maroon'); + say('Dragend should fire after dragstart and dragleave.')} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))" ondragleave="leavePage(event)"> +<p ondragstart="start(event)" ondragend="endDrag(event)">Drag me</p> +<p>Drag selected text out of frame and drop it somewhere on the page. Both circles should turn green once text is dropped.</p> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/helper-drop-here-body-circle.xhtml b/testing/web-platform/tests/html/editing/dnd/events/helper-drop-here-body-circle.xhtml new file mode 100644 index 0000000000..bb8c0e36f0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/helper-drop-here-body-circle.xhtml @@ -0,0 +1,51 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame drag and drop: helper file</title> +<style type="text/css"> +div + {width:0; + height:0; + border:solid 50px silver; + border-radius:50px; + margin-left:auto;} +</style> +<script type="application/ecmascript"> +var step = 1; +function enterPage(event) + {event.preventDefault(); + if(step++ > 0) + {setColor('green silver silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragenter should fire before dragover and drop');} + } +function overPage(event) + {event.preventDefault(); + if(step++ > 1) + {setColor('green green silver silver');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function dropIt(event) + {if(step++ > 1) + {setColor('green');} + else + {step = 0; + setColor('maroon'); + say('Dragover should fire after dragenter');} + } +function say(it) + {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} +function setColor(c) + {document.querySelector('div').setAttribute('style','border-color:' + c)} +</script> +</head> +<body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> +<div/> +<pre/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/events/historical-manual.html b/testing/web-platform/tests/html/editing/dnd/events/historical-manual.html new file mode 100644 index 0000000000..0e2147222d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/historical-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>Historical drag-and-drop features</title> +<meta charset="utf-8"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +.test-square { + width: 100px; + height: 100px; +} + +#draggable { + background: orange; +} + +#dropzone { + background: blue; +} +</style> + +<p>Drag the orange square onto the blue square and release it.</p> + +<div draggable="true" id="draggable" class="test-square" ondragstart="event.dataTransfer.setData('text/plain', null)"></div> +<div id="dropzone" class="test-square"></div> + +<script> +"use strict"; + +async_test(t => { + let dragexitCount = 0; + document.addEventListener("dragexit", () => { + ++dragexitCount; + }); + + // Prevent the event to allow drop + document.addEventListener("dragover", e => { + e.preventDefault(); + }); + + document.addEventListener("drop", t.step_func_done(() => { + assert_equals(dragexitCount, 0); + })); +}, `dragexit must not fire during drag-and-drop`); +</script> diff --git a/testing/web-platform/tests/html/editing/dnd/events/relatedTarget-attribute-manual.html b/testing/web-platform/tests/html/editing/dnd/events/relatedTarget-attribute-manual.html new file mode 100644 index 0000000000..c5a897d68e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/relatedTarget-attribute-manual.html @@ -0,0 +1,65 @@ +<!doctype html> +<html> + <head> + <title>relatedTarget attribute for dragenter and dragleave events</title> + <meta name="viewport" content="width=device-width"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + #outerdiv { + padding: 50px; + background: blue; + } + #innerdiv { + width:200px; + height:100px; + background: green; + } + </style> + <script> + var drag_test = async_test("dragenter and dragleave are correctly fired."); + var got_dragenter = false; + var got_dragleave = false; + function run() { + var draggable = document.getElementById("draggable"); + var innerdiv = document.getElementById("innerdiv"); + draggable.addEventListener("dragstart", (e) => { + e.dataTransfer.setData("text", draggable.innerHTML); + }); + innerdiv.addEventListener("dragenter", (e) => { + if (!got_dragenter) { + test(function() { + assert_equals(e.relatedTarget.id, "outerdiv", "dragenter event should have the correct relatedTarget."); + }, "dragenter event should have the correct relatedTarget."); + got_dragenter = true; + } + }); + innerdiv.addEventListener("dragleave", (e) => { + if (!got_dragleave) { + test(function() { + assert_equals(e.relatedTarget.id, "outerdiv", "dragleave event should have the correct relatedTarget."); + }, "dragleave event should have the correct relatedTarget."); + got_dragleave = true; + if (got_dragenter) + drag_test.done(); + } + }); + } + </script> + </head> + <body onload="run()"> + <h1>Drag & Drop: relatedTarget attribute for dragenter and dragleave events</h1> + <h2 id="pointerTypeDescription"></h2> + <h4>Test Description: + <ol> + <li>Drag the text into the green box.</li> + <li>Without releasing the drag, drag the text out of the green box.</li> + </ol> + </h4> + <br> + <div id="draggable" draggable="true">Drag this text</br>over the green box</div> + <div id="outerdiv"> + <div id="innerdiv"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/file/001.html b/testing/web-platform/tests/html/editing/dnd/file/001.html new file mode 100644 index 0000000000..b911920041 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/001.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<title>drag & drop - simple file drop</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +var filename = 'fail.png', filesize = '759', filetype = 'image/png'; +var fails = [], finished = false; +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } + if( e.dataTransfer.files.length ) { + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 0 for '+e.type; + } + }; + orange.ondrop = function(e) { + e.preventDefault(); + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + finish(); + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } + if( e.dataTransfer.files.length != 1 ) { + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 1 for '+e.type; + } + if( !e.dataTransfer.files[0] ) { + fails[fails.length] = 'no dataTransfer.files[0] for drop'; + finish(); + return; + } + if( e.dataTransfer.files[0].size != filesize ) { + fails[fails.length] = 'dataTransfer.files[0].size '+e.dataTransfer.files[0].size+' instead of '+filesize; + } + /* + if( !e.dataTransfer.files[0].lastModified ) { + fails[fails.length] = 'no dataTransfer.files[0].lastModified'; + } + */ + if( e.dataTransfer.files[0].name != filename ) { + fails[fails.length] = 'dataTransfer.files[0].name '+e.dataTransfer.files[0].name+' instead of '+filename; + } + if( e.dataTransfer.files[0].type != filetype ) { + fails[fails.length] = 'dataTransfer.files[0].type '+e.dataTransfer.files[0].type+' instead of '+filetype; + } + if( !window.FileReader ) { + fails[fails.length] = 'No FileReader constructor'; + finish(); + return; + } + var reader = new FileReader(); + reader.onload = function () { + if( !reader.result ) { + fails[fails.length] = 'No file data after load'; + } + if( reader.result.length != filesize ) { + fails[fails.length] = 'File data length '+reader.result.length+' instead of '+filesize; + } + finish(); + }; + reader.readAsBinaryString(e.dataTransfer.files[0]); + setTimeout(function () { + if( !reader.result ) { + fails[fails.length] = 'No file data after timeout'; + } + finish(); + },1000); + }; + +}; +function finish() { + if( finished ) { return; } + finished = true; + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; +} +</script> + +<div></div> + +<p>Save <a href="../resources/fail.png">this image</a> to your desktop. Use your pointing device to drag the saved file from your desktop onto the orange box, and release it. If a confirmation dialog appears, accept it. Fail if nothing happens, or if the browser simply displays the image.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/002.html b/testing/web-platform/tests/html/editing/dnd/file/002.html new file mode 100644 index 0000000000..c8d633d6d2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/002.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<title>drag & drop - multiple file drop</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +var filename1 = 'fail.png', filesize1 = '759', filetype1 = 'image/png', filename2 = 'fail.txt', filesize2 = '4', filetype2 = 'text/plain'; +var fails = [], finished = false, donecount = 0; +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } + if( e.dataTransfer.files.length ) { + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 0 for '+e.type; + } + }; + orange.ondrop = function(e) { + e.preventDefault(); + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + finish(); + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } + if( e.dataTransfer.files.length != 2 ) { + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 2 for '+e.type; + } + if( !e.dataTransfer.files[0] ) { + fails[fails.length] = 'no dataTransfer.files[0] for drop'; + finish(); + return; + } + if( !e.dataTransfer.files[1] ) { + fails[fails.length] = 'no dataTransfer.files[1] for drop'; + finish(); + return; + } + //allow files to be dropped in any order, since this will be determined by the OS + var i0 = 0, i1 = 1; + if( e.dataTransfer.files[0].name == filename2 ) { + i0 = 1; + i1 = 0; + } + if( e.dataTransfer.files[i0].size != filesize1 ) { + fails[fails.length] = 'dataTransfer.files['+i0+'].size '+e.dataTransfer.files[i0].size+' instead of '+filesize1; + } + /* + if( !e.dataTransfer.files[i0].lastModified ) { + fails[fails.length] = 'no dataTransfer.files['+i0+'].lastModified'; + } + */ + if( e.dataTransfer.files[i0].name != filename1 ) { + fails[fails.length] = 'dataTransfer.files['+i0+'].name '+e.dataTransfer.files[i0].name+' instead of '+filename1; + } + if( e.dataTransfer.files[i0].type != filetype1 ) { + fails[fails.length] = 'dataTransfer.files['+i0+'].type '+e.dataTransfer.files[i0].type+' instead of '+filetype1; + } + if( e.dataTransfer.files[i1].size != filesize2 ) { + fails[fails.length] = 'dataTransfer.files['+i1+'].size '+e.dataTransfer.files[i1].size+' instead of '+filesize2; + } + /* + if( !e.dataTransfer.files[i1].lastModified ) { + fails[fails.length] = 'no dataTransfer.files['+i1+'].lastModified'; + } + */ + if( e.dataTransfer.files[i1].name != filename2 ) { + fails[fails.length] = 'dataTransfer.files['+i1+'].name '+e.dataTransfer.files[i1].name+' instead of '+filename2; + } + if( e.dataTransfer.files[i1].type != filetype2 ) { + fails[fails.length] = 'dataTransfer.files['+i1+'].type '+e.dataTransfer.files[i1].type+' instead of '+filetype2; + } + if( !window.FileReader ) { + fails[fails.length] = 'No FileReader constructor'; + finish(); + return; + } + var reader1 = new FileReader(); + reader1.readAsBinaryString(e.dataTransfer.files[i0]); + reader1.onload = function () { + if( !reader1.result ) { + fails[fails.length] = 'No files['+i0+'] data after load'; + } + if( reader1.result.length != filesize1 ) { + fails[fails.length] = 'files['+i0+'] file data length '+reader1.result.length+' instead of '+filesize1; + } + if( donecount++ ) { + finish(); + } + }; + var reader2 = new FileReader(); + reader2.onload = function () { + if( !reader2.result ) { + fails[fails.length] = 'No files['+i1+'] data after load'; + } + if( reader2.result.length != filesize2 ) { + fails[fails.length] = 'files['+i1+'] file data length '+reader2.result.length+' instead of '+filesize2; + } + if( donecount++ ) { + finish(); + } + }; + reader2.readAsBinaryString(e.dataTransfer.files[i1]); + setTimeout(function () { + if( !reader1.result ) { + fails[fails.length] = 'No files['+i0+'] data after timeout'; + } + if( !reader2.result ) { + fails[fails.length] = 'No files['+i1+'] data after timeout'; + } + finish(); + },1000); + }; + +}; +function finish() { + if( finished ) { return; } + finished = true; + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; +} +</script> + +<div></div> + +<p>Save <a href="../resources/fail.png">this image</a> and <a href="fail.txt">this text file</a> to your desktop. Use your pointing device to drag both saved files (at the same time) from your desktop onto the orange box, and release them. If a confirmation dialog appears, accept it. Fail if nothing happens, or if the browser simply displays one/both of the files.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/003.html b/testing/web-platform/tests/html/editing/dnd/file/003.html new file mode 100644 index 0000000000..51e5a5a79c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/003.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<title>drag & drop - prompting before exposing files</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +var filename = 'fail.png', filesize = '759', filetype = 'image/png'; +var fails = [], finished = false; +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + orange.ondrop = function(e) { + e.preventDefault(); + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + finish(); + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } + if( e.dataTransfer.files.length != 1 ) { + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 1 for '+e.type; + } + if( !e.dataTransfer.files[0] ) { + fails[fails.length] = 'no dataTransfer.files[0] for drop'; + finish(); + return; + } + if( e.dataTransfer.files[0].size != filesize ) { + fails[fails.length] = 'dataTransfer.files[0].size '+e.dataTransfer.files[0].size+' instead of '+filesize; + } + /* + if( !e.dataTransfer.files[0].lastModified ) { + fails[fails.length] = 'no dataTransfer.files[0].lastModified'; + } + */ + if( e.dataTransfer.files[0].name != filename ) { + fails[fails.length] = 'dataTransfer.files[0].name '+e.dataTransfer.files[0].name+' instead of '+filename; + } + if( e.dataTransfer.files[0].type != filetype ) { + fails[fails.length] = 'dataTransfer.files[0].type '+e.dataTransfer.files[0].type+' instead of '+filetype; + } + if( !window.FileReader ) { + fails[fails.length] = 'No FileReader constructor'; + finish(); + return; + } + var reader = new FileReader(); + reader.onload = function () { + if( !reader.result ) { + fails[fails.length] = 'No file data after load'; + } + if( reader.result.length != filesize ) { + fails[fails.length] = 'File data length '+reader.result.length+' instead of '+filesize; + } + finish(); + }; + reader.readAsBinaryString(e.dataTransfer.files[0]); + setTimeout(function () { + if( !reader.result ) { + fails[fails.length] = 'No file data after timeout'; + } + finish(); + },1000); + }; + +}; +function finish() { + if( finished ) { return; } + finished = true; + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; +} +</script> + +<div></div> + +<p>Save <a href="../resources/fail.png">this image</a> to your desktop. Use your pointing device to drag the saved file from your desktop onto the orange box, and release it. <strong>A confirmation dialog must appear, allowing you to choose to cancel the upload</strong>. Accept it. Fail if nothing happens, or if the browser simply displays the image, or if "PASS" appears as the page text <strong>before</strong> you have accepted the upload.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/004.html b/testing/web-platform/tests/html/editing/dnd/file/004.html new file mode 100644 index 0000000000..ee0d63455f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/004.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>drag & drop - cancelling the dropped file upload</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +var fails = []; +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + orange.ondrop = function(e) { + //if the browser simulates a drop, it must do so with an empty FileList + e.preventDefault(); + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + finish(); + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } + if( e.dataTransfer.files.length ) { + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 0 for '+e.type; + } + if( e.dataTransfer.files[0] ) { + fails[fails.length] = 'dataTransfer.files[0] exists for drop'; + finish(); + } + }; + +}; +function finish() { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; +} +</script> + +<div></div> + +<p>Save <a href="../resources/pass.png">this image</a> to your desktop. Use your pointing device to drag the saved file from your desktop onto the orange box, and release it. <strong>A confirmation dialog must appear, allowing you to choose to cancel the upload</strong>. Refuse it. Pass if nothing happens, or if the browser simply displays the image.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/005.html b/testing/web-platform/tests/html/editing/dnd/file/005.html new file mode 100644 index 0000000000..afb40e2199 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/005.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>drag & drop - dragging text onto a file input</title> + +<ol> + <li>Save <a href="../resources/filler.html">this file</a> to your computer.</li> + <li>Write the full /path/and/name to that file, into the first input below, then select all of the text you just entered.</li> + <li>Drag selected text to the file input. If no prompt appears, and the text is not added to the file input, pass and ignore further steps.</li> + <li>If a prompt appears, accept it. Fail if the file input's value is set without any prompts.</li> + <li>If a prompt appears; fail if the file input's value is not set after accepting the prompt.</li> +</ol> +<p><input value="/tmp/filler.html"></p> +<p><input type="file"></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/006.html b/testing/web-platform/tests/html/editing/dnd/file/006.html new file mode 100644 index 0000000000..d25c5491e4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/006.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>drag & drop - cancelling dragging text onto a file input</title> + +<ol> + <li>Save <a href="../resources/filler.html">this file</a> to your computer.</li> + <li>Write the full /path/and/name to that file, into the first input below, then select all of the text you just entered.</li> + <li>Drag selected text to the file input. If no prompt appears, and the text is not added to the file input, pass and ignore further steps.</li> + <li>If a prompt appears, refuse it. Fail if the file input's value is set without any prompts.</li> + <li>If a prompt appears; fail if the file input's value is set after refusing the prompt.</li> +</ol> +<p><input value="/tmp/filler.html"></p> +<p><input type="file"></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/007.html b/testing/web-platform/tests/html/editing/dnd/file/007.html new file mode 100644 index 0000000000..046220bdb6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/007.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<title>drag & drop - file drop for large file</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +//JavaScript can support file sizes up to 9007199254740992 bytes ... in theory +//This test uses a more sane value, just for the sake of UI testing - 32 MB +var filesize1 = 33554432, filesize2 = 134217728; +var fails = [], finished = false; +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } + if( e.dataTransfer.files.length ) { + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 0 for '+e.type; + } + }; + orange.ondrop = function(e) { + e.preventDefault(); + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + finish(); + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } + if( e.dataTransfer.files.length != 1 ) { + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 1 for '+e.type; + } + if( !e.dataTransfer.files[0] ) { + fails[fails.length] = 'no dataTransfer.files[0] for drop'; + finish(); + return; + } + if( e.dataTransfer.files[0].size != filesize1 && e.dataTransfer.files[0].size != filesize2 ) { + fails[fails.length] = 'dataTransfer.files[0].size '+e.dataTransfer.files[0].size+' instead of '+filesize1+' or '+filesize2; + } + /* + if( !e.dataTransfer.files[0].lastModified ) { + fails[fails.length] = 'no dataTransfer.files[0].lastModified'; + } + */ + if( !window.FileReader ) { + fails[fails.length] = 'No FileReader constructor'; + finish(); + return; + } + var reader = new FileReader(); + reader.readAsBinaryString(e.dataTransfer.files[0]); + reader.onload = function () { + if( !reader.result ) { + fails[fails.length] = 'No file data after load'; + } + if( reader.result.length != filesize1 && reader.result.length != filesize2 ) { + fails[fails.length] = 'File data length '+reader.result.length+' instead of '+filesize1+' or '+filesize2; + } + finish(); + }; + setTimeout(function () { + if( !reader.result ) { + fails[fails.length] = 'No file data after timeout'; + } + finish(); + },1000); + }; + +}; +function finish() { + if( finished ) { return; } + finished = true; + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS if the UI did not lock up'; +} +</script> + +<div></div> + +<p>Save <a href="../resources/32mb.py">32MB.txt</a> to your desktop. Use your pointing device to drag the saved file from your desktop onto the orange box, and release it. If a confirmation dialog appears, accept it. Fail if this text is not replaced with a pass message. Fail if the UI locks up immediately after dropping the file.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/008.html b/testing/web-platform/tests/html/editing/dnd/file/008.html new file mode 100644 index 0000000000..4975158209 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/008.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<title>drag & drop - dropping folders</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +var fails = [], finished = false; +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } else if( e.dataTransfer.files.length ) { + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 0 for '+e.type; + } + }; + orange.ondrop = function(e) { + e.preventDefault(); + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + finish(); + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } + //browsers represent it as a single file (name matching the folder) + //also allow no files, since that is a valid solution + if( e.dataTransfer.files.length > 1 ) { + //dropping the contents of the folder would be crazy, since there could literally be millions of files, or the entire disk contents + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 1 for '+e.type; + } + if( !e.dataTransfer.files[0] ) { + finish(); + return; + } + /* + Windows 7 sometimes randomly assigns size to folders, and that is presented to the browser. + Strangely, packing and unpacking that folder can remove its size. + Since this is an OS quirk that we have no control over, the test will not check the size. + if( e.dataTransfer.files[0].size ) { + fails[fails.length] = 'dataTransfer.files[0].size '+e.dataTransfer.files[0].size+' instead of 0'; + } + */ + /* + if( !e.dataTransfer.files[0].lastModified ) { + fails[fails.length] = 'no dataTransfer.files[0].lastModified'; + } + */ + if( !window.FileReader ) { + fails[fails.length] = 'No FileReader constructor'; + finish(); + return; + } + var reader = new FileReader(); + reader.onload = function () { + fails[fails.length] = 'File managed to load even though it was a folder '+e.type; + finish(); + }; + reader.onerror = function () { + finish(); + }; + try { + reader.readAsBinaryString(e.dataTransfer.files[0]); + } catch(err) { + fails[fails.length] = 'Threw an error when trying to read the file '+e.type; + finish(); + return; + } + setTimeout(function () { + fails[fails.length] = 'Onerror failed to fire '+reader.error.code; + finish(); + },1000); + }; + +}; +function finish() { + if( finished ) { return; } + finished = true; + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; +} +</script> + +<div></div> + +<p>Drag a folder containing at least 2 files, from your computer's file manager, onto the orange box above. If a no-drop cursor was shown and no text changes when the folder is dropped, pass and ignore further conditions. If a prompt appears, accept it. Fail if the mouse cursor makes it look like it will work but nothing happens.</p> +<p>This test needs to be repeated with:</p> +<ul> + <li>A regular folder containing at least 2 items</li> + <li>A disk drive (if your OS exposes them) containing at least 2 items</li> + <li>The system trash/recycle bin folder (if your OS exposes one) containing at least 2 items</li> + <li>The "My Computer" folder (if your OS provides it)</li> + <li>Your "My Documents" folder (if your OS provides it)</li> + <li>A folder that you do not have permissions to access</li> +</ul> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/009.html b/testing/web-platform/tests/html/editing/dnd/file/009.html new file mode 100644 index 0000000000..72381863f2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/009.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>drag & drop - no dnd event listeners</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<!-- This test assumes that the browser's default behaviour is to open dropped files. Test 010 continues with this assumption. --> + +<div></div> + +<p>Save <a href="../resources/pass.png">this image</a> to your desktop. Use your pointing device to drag the saved file from your desktop onto the orange box, and release it. Fail if nothing happens.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/010.html b/testing/web-platform/tests/html/editing/dnd/file/010.html new file mode 100644 index 0000000000..331cafc5ef --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/010.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>drag & drop - blocked drop</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +//This test assumes that if the page does not want to use the drop, that the browser will revert to default behaviour of opening the file +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'none'; + }; + orange.ondrop = function(e) { + e.preventDefault(); + }; + +}; +</script> + +<div></div> + +<p>Save <a href="../resources/pass.png">this image</a> to your desktop. Use your pointing device to drag the saved file from your desktop onto the orange box, and release it. Fail if nothing happens.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/011.html b/testing/web-platform/tests/html/editing/dnd/file/011.html new file mode 100644 index 0000000000..a265e7b4dd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/011.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<title>drag & drop - simple file drop with dropzone attribute</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +var filename = 'fail.png', filesize = '759', filetype = 'image/png'; +var fails = [], finished = false; +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragenter = function(e) { + e.dataTransfer.dropEffect = 'copy'; + }; +/* orange.ondragover = function(e) { + e.preventDefault(); + }; +*/ + orange.ondrop = function(e) { + e.preventDefault(); + if( !e.dataTransfer.files ) { + fails[fails.length] = 'No dataTransfer.files for '+e.type; + } + if( !window.FileList ) { + fails[fails.length] = 'No FileList interface object'; + finish(); + return; + } + if( !( e.dataTransfer.files instanceof FileList ) ) { + fails[fails.length] = 'dataTransfer.files is not a FileList'; + } + if( e.dataTransfer.files.length != 1 ) { + fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 1 for '+e.type; + } + if( !e.dataTransfer.files[0] ) { + fails[fails.length] = 'no dataTransfer.files[0] for drop'; + finish(); + return; + } + if( e.dataTransfer.files[0].size != filesize ) { + fails[fails.length] = 'dataTransfer.files[0].size '+e.dataTransfer.files[0].size+' instead of '+filesize; + } + /* + if( !e.dataTransfer.files[0].lastModified ) { + fails[fails.length] = 'no dataTransfer.files[0].lastModified'; + } + */ + if( e.dataTransfer.files[0].name != filename ) { + fails[fails.length] = 'dataTransfer.files[0].name '+e.dataTransfer.files[0].name+' instead of '+filename; + } + if( e.dataTransfer.files[0].type != filetype ) { + fails[fails.length] = 'dataTransfer.files[0].type '+e.dataTransfer.files[0].type+' instead of '+filetype; + } + if( !window.FileReader ) { + fails[fails.length] = 'No FileReader constructor'; + finish(); + return; + } + var reader = new FileReader(); + reader.onload = function () { + if( !reader.result ) { + fails[fails.length] = 'No file data after load'; + } + if( reader.result.length != filesize ) { + fails[fails.length] = 'File data length '+reader.result.length+' instead of '+filesize; + } + finish(); + }; + reader.readAsBinaryString(e.dataTransfer.files[0]); + setTimeout(function () { + if( !reader.result ) { + fails[fails.length] = 'No file data after timeout'; + } + finish(); + },1000); + }; + +}; +function finish() { + if( finished ) { return; } + finished = true; + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; +} +</script> + +<div dropzone="copy file:image/png"></div> + +<p>Save <a href="../resources/fail.png">this image</a> to your desktop. Use your pointing device to drag the saved file from your desktop onto the orange box, and release it. If a confirmation dialog appears, accept it. Fail if nothing happens, or if the browser simply displays the image.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/fail.txt b/testing/web-platform/tests/html/editing/dnd/file/fail.txt new file mode 100644 index 0000000000..fc26162516 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/fail.txt @@ -0,0 +1 @@ +FAIL
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/file/prompt/001.html b/testing/web-platform/tests/html/editing/dnd/file/prompt/001.html new file mode 100644 index 0000000000..52f6e8d01f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/prompt/001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>drag & drop - file drop prompt for basic server name</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +window.onload = function() { + if( location.protocol != 'http:' && location.protocol != 'https:' ) { + document.getElementsByTagName('p')[0].innerHTML = 'This test should be loaded over http or https.'; + return; + } + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = orange.ondrop = function(e) { + e.preventDefault(); + }; + document.getElementsByTagName('span')[0].innerHTML = location.hostname; +}; +</script> + +<div></div> + +<p>Drag a file from your desktop onto the orange square. A prompt should appear, correctly identifying the server name as <span></span></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/prompt/002.html b/testing/web-platform/tests/html/editing/dnd/file/prompt/002.html new file mode 100644 index 0000000000..f913aedfac --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/prompt/002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>drag & drop - file drop prompt for server name and document.domain</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +window.onload = function() { + if( location.protocol != 'http:' && location.protocol != 'https:' ) { + document.getElementsByTagName('p')[0].innerHTML = 'This test should be loaded over http or https.'; + return; + } + if( !location.hostname.match(/[^\.]\.[^\.]+\.[^\.]/) ) { + document.getElementsByTagName('p')[0].innerHTML = 'This test should be loaded from a subdomain that allows document.domain to be set to a parent domain (try using a server name that contains at least two or three dots, for example www.example.org).'; + return; + } + var realhost = location.hostname, newdomain = location.hostname.replace(/^[^.]+\./,''); + try { + document.domain = location.hostname.replace(/^[^.]+\./,''); + } catch(e) { + document.getElementsByTagName('p')[0].innerHTML = 'This test should be loaded from a subdomain that allows document.domain to be set to a parent domain.'; + return; + } + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = orange.ondrop = function(e) { + e.preventDefault(); + }; + document.getElementsByTagName('span')[0].innerHTML = realhost; +}; +</script> + +<div></div> + +<p>Drag a file from your desktop onto the orange square. A prompt should appear, identifying the server name as <span></span></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/prompt/003.html b/testing/web-platform/tests/html/editing/dnd/file/prompt/003.html new file mode 100644 index 0000000000..ada495bd19 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/prompt/003.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>drag & drop - file drop prompt for ftp server name</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +window.onload = function() { + if( location.protocol != 'ftp:' ) { + document.getElementsByTagName('p')[0].innerHTML = 'This test should be loaded over ftp.'; + return; + } + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = orange.ondrop = function(e) { + e.preventDefault(); + }; + document.getElementsByTagName('span')[0].innerHTML = location.hostname; +}; +</script> + +<div></div> + +<p>Drag a file from your desktop onto the orange square. A prompt should appear, correctly identifying the server name as <span></span></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/prompt/004.html b/testing/web-platform/tests/html/editing/dnd/file/prompt/004.html new file mode 100644 index 0000000000..0232638ef8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/prompt/004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>drag & drop - file drop prompt for file:</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +window.onload = function() { + if( location.protocol != 'file:' ) { + document.getElementsByTagName('p')[0].innerHTML = 'Save this page to your local filesystem, and load it from there.'; + return; + } + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = orange.ondrop = function(e) { + e.preventDefault(); + }; +}; +</script> + +<div></div> + +<p>Drag a file from your desktop onto the orange square. A prompt should appear, either showing the server name as localhost, or otherwise identifying this file as the target of the upload.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/prompt/005.html b/testing/web-platform/tests/html/editing/dnd/file/prompt/005.html new file mode 100644 index 0000000000..3a6c356c2e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/prompt/005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>drag & drop - file drop prompt for special cases</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } +</style> + +<script> +window.onload = function() { + if( location.protocol == 'file:' || location.protocol == 'http:' || location.protocol == 'https:' ) { + document.getElementsByTagName('p')[0].innerHTML = 'Use the source of this file as the source of special-case URLs within your browser, such as scriptable chrome: or opera: or attachment: URLs (eg. opera:config and send yourself the file as an email attachments and open the attachment in the browser).'; + return; + } + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = orange.ondrop = function(e) { + e.preventDefault(); + }; +}; +</script> + +<div></div> + +<p>Drag a file from your desktop onto the orange square. A prompt should appear, either showing the server name as unknown, or otherwise identifying this URL as the target of the upload.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/prompt/006.html b/testing/web-platform/tests/html/editing/dnd/file/prompt/006.html new file mode 100644 index 0000000000..a0f919595b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/prompt/006.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>drag & drop - file drop prompt for data URI with inherited origin</title> +<style> +iframe { border: none; height: 250px; width: 250px; } +</style> + +<script> +window.onload = function() { + if( location.protocol != 'http:' && location.protocol != 'https:' ) { + document.getElementsByTagName('p')[0].innerHTML = 'This test should be loaded over http or https.'; + return; + } + var url = "data:text/html,"+escape( +'<!DOCTYPE html>\ +<title>drag & drop - file drop prompt for data URI with inherited origin<\/title>\ +<style>\ + body > div {\ + height: 200px;\ + width: 200px;\ + background-color: orange;\ + }\ +<\/style>\ +<script>\ +window.onload = function() {\ + var orange = document.getElementsByTagName("div")[0];\ + orange.ondragover = orange.ondragenter = orange.ondrop = function(e) {\ + e.preventDefault();\ + };\ +};\ +<\/script>\ +<div><\/div>' + ); + var frame = document.createElement('iframe'); + frame.setAttribute('src',url); + document.body.appendChild(frame); + document.getElementsByTagName('span')[0].innerHTML = location.hostname; +}; +</script> + +<p>Drag a file from your desktop onto the orange square. A prompt should appear, correctly identifying the server name <span></span>.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/prompt/007.html b/testing/web-platform/tests/html/editing/dnd/file/prompt/007.html new file mode 100644 index 0000000000..be839f99c9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/prompt/007.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>drag & drop - file drop prompt for data URI without inherited origin</title> +<script> +window.onload = function() { + var url = "data:text/html,"+escape( +'<!DOCTYPE html>\ +<title>drag & drop - file drop prompt for data URI with inherited origin<\/title>\ +<style>\ + body > div {\ + height: 200px;\ + width: 200px;\ + background-color: orange;\ + }\ +<\/style>\ +<script>\ +window.onload = function() {\ + var orange = document.getElementsByTagName("div")[0];\ + orange.ondragover = orange.ondragenter = orange.ondrop = function(e) {\ + e.preventDefault();\ + };\ +};\ +<\/script>\ +<div><\/div>\ +<p>Drag a file from your desktop onto the orange square. A prompt should appear, either showing the server name as unknown, or otherwise identifying this URL as the target of the upload.<\/p>' + ); + document.getElementsByTagName('p')[1].textContent = url; +}; +</script> + +<p>Load the following URL in a new tab (copy & paste it into the address bar):</p> +<p></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/prompt/008.html b/testing/web-platform/tests/html/editing/dnd/file/prompt/008.html new file mode 100644 index 0000000000..903808ea0d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/prompt/008.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>drag & drop - file drop prompt for javascript URL with inherited origin</title> +<style> +iframe { border: none; height: 250px; width: 250px; } +</style> + +<script> +window.onload = function() { + if( location.protocol != 'http:' && location.protocol != 'https:' ) { + document.getElementsByTagName('p')[0].innerHTML = 'This test should be loaded over http or https.'; + return; + } + var url = "javascript:'"+escape( +'<!DOCTYPE html>\ +<title>drag & drop - file drop prompt for data URI with inherited origin<\/title>\ +<style>\ + body > div {\ + height: 200px;\ + width: 200px;\ + background-color: orange;\ + }\ +<\/style>\ +<script>\ +window.onload = function() {\ + var orange = document.getElementsByTagName("div")[0];\ + orange.ondragover = orange.ondragenter = orange.ondrop = function(e) {\ + e.preventDefault();\ + };\ +};\ +<\/script>\ +<div><\/div>' + +"'"); + var frame = document.createElement('iframe'); + frame.setAttribute('src',url); + document.body.appendChild(frame); + document.getElementsByTagName('span')[0].innerHTML = location.hostname; +}; +</script> + +<p>Drag a file from your desktop onto the orange square. A prompt should appear, correctly identifying the server name <span></span></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/file/prompt/009.html b/testing/web-platform/tests/html/editing/dnd/file/prompt/009.html new file mode 100644 index 0000000000..b620ad6f15 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/file/prompt/009.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>drag & drop - file drop prompt for javascript URL without inherited origin</title> +<script> +window.onload = function() { + var url = "javascript:'"+escape( +'<!DOCTYPE html>\ +<title>drag & drop - file drop prompt for data URI with inherited origin<\/title>\ +<style>\ + body > div {\ + height: 200px;\ + width: 200px;\ + background-color: orange;\ + }\ +<\/style>\ +<script>\ +window.onload = function() {\ + var orange = document.getElementsByTagName("div")[0];\ + orange.ondragover = orange.ondragenter = orange.ondrop = function(e) {\ + e.preventDefault();\ + };\ +};\ +<\/script>\ +<div><\/div>\ +<p>Drag a file from your desktop onto the orange square. A prompt should appear, either showing the server name as unknown, or otherwise identifying this URL as the target of the upload (it may alternatively identify the security context about:blank).<\/p>' + +"'"); + document.getElementsByTagName('p')[1].textContent = url; +}; +</script> + +<p>Load the following URL in a new tab (copy & paste it into the address bar):</p> +<p></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/historical.html b/testing/web-platform/tests/html/editing/dnd/historical.html new file mode 100644 index 0000000000..5cba688ff8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/historical.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Historical drag-and-drop features</title> +<meta charset="utf-8"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<script> +"use strict"; + +test(() => { + const potentialBadLocations = [ + window, + document, + HTMLElement.prototype, + SVGElement.prototype, + Document.prototype, + HTMLDocument.prototype, + Element.prototype + ]; + for (const location of potentialBadLocations) { + assert_false("ondragexit" in location, + `${location.constructor.name} must not have a property "ondragexit"`); + } +}, `ondragexit must not be present on the GlobalEventHandlers locations`); +</script> diff --git a/testing/web-platform/tests/html/editing/dnd/images/001.html b/testing/web-platform/tests/html/editing/dnd/images/001.html new file mode 100644 index 0000000000..dcc31664e7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/001.html @@ -0,0 +1,51 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Image drag and drop</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><img src="../resources/circle.png" alt="PNG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" +/> +<script> +async function test() { + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + addImage(event); + assert_equals(img.src, event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + return true; + } + + dragDropTest(img, div, onDropCallBack, 'Dragging the image to the bottom div should copy the image there"'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/002.html b/testing/web-platform/tests/html/editing/dnd/images/002.html new file mode 100644 index 0000000000..9756eb26da --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/002.html @@ -0,0 +1,51 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>dataURL image drag and drop</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" +/> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + addImage(event); + assert_equals(img.src, event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + return true; + } + + dragDropTest(img, div, onDropCallBack, 'Dragging the dataURL PNG image to the bottom div should copy the image there'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/003.html b/testing/web-platform/tests/html/editing/dnd/images/003.html new file mode 100644 index 0000000000..e2b3ac1a8d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/003.html @@ -0,0 +1,31 @@ +<!doctype html> +<head> +<title>Image drag and drop outside browser window</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above outside the window and then back inside and drop in the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/004.html b/testing/web-platform/tests/html/editing/dnd/images/004.html new file mode 100644 index 0000000000..829608f537 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/004.html @@ -0,0 +1,53 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Object with image drag and drop</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/uri-list', document.querySelector('object').getAttribute('data'));} +</script> +</head> +<body> +<p><object draggable="true" ondragstart="start(event)" type="image/png" data="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">PNG image</object></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" +/> +</body> +<script> +async function test() { + const object = document.querySelector('object'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + addImage(event); + assert_equals(object.getAttribute('data'), event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + return true; + } + + dragDropTest(object, div, onDropCallBack, 'Dragging the object to the bottom div should copy the image there'); +} +test(); +</script> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/005.html b/testing/web-platform/tests/html/editing/dnd/images/005.html new file mode 100644 index 0000000000..c625f44685 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/005.html @@ -0,0 +1,50 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>JPG image drag and drop</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCxAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6AQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgsRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAGQAZAMBIgACEQEDEQH/2gAMAwEAAhEDEQA/AP7+KKK8v+Mvxl+Gn7P3w08V/F74veK9P8GfD/wZp51HXdd1EuVRS6wWtlZWsCy3mp6tqd5LBp+k6Tp8FxqGp6hcQWdnBLPKiHOtWo4ejVxGIq06FChTnVrVqs406VKlTi5VKlSpJqMIQinKUpNKKV2Y4jEUMJQrYrFVqWHw2HpTr4jEV5xpUaFGlFzqVatSbUKdOnBOU5yajGKbbsekXV1a2Frc319cwWdlZwTXV5eXU0dva2trbxtLcXNzcSskUEEESNLNNKyxxxqzuwUE1+B37ZX/AAcDfsvfAK61bwV8BNOm/aZ+ImnyS2U+p6Fqa6J8ItIvIzsk8zx19mv5/FjQEiVE8G6VqOiX6rJB/wAJZYTg7f54f+Clf/BX34z/ALc2tax4C8H3OrfCv9mS1v2TR/h7ZXX2bXfHVvayA2mt/FTULKd11SeaRBfWvhC0nbwvob/ZVZdd1bTo/EU/47V/KHHn0gsQ61bLeB4wp0YN055/iqKqVKzWnNl2ErL2dOn/AC18XTqyqLbDUbKcv4l8TPpR4t4jEZR4cQp0cPTcqU+JsZQVatXa0csqwNePsqVH+TE46nWnVT0wmHtGcv14+PH/AAXF/wCCiHxvub+Kx+LsPwV8NXe8ReGfgpo1t4Ra0jPCGPxndtrHxEFxs/1kkPi63gaTMkVrB8qJ+bPjH44fGr4iXLXnxA+L/wAUfHN2+4vdeMfH/ivxNcvu+9un1rVr2Rt38WW5715bRX87ZpxLxDnVSVTNs6zTMJS6YrG4irBeUKTn7KnHtCnCMV0R/KWc8XcU8Q1ZVs84hznNJTd7Y3McVWpR1vy06EqnsaMO1OlThCP2Yo19P17XNJm+0aVrOraZcbt/n6fqN3Zzb+u/zbeaN93+1nNfV/ws/wCChP7b/wAF7q2ufh3+1N8a9JhtMeRo2qeONX8X+Fl29N3g/wAZTeIPCsvp+90d8r8p+XivjmiuHCZlmOXzVXAY/G4GqndVMJiq+Gmn3U6M4SX3nm4DN81yqoq2WZnmGXVou8auAxuJwlRNdVPD1Kck/mf01/swf8HJ3xp8KXOmaF+1d8LvD/xY8OhkhvvHfw4it/BHxDt4f+Wt/c+HJZT4F8S3I6R6fp6/D+DDZa8ymJP6if2Vv21/2bP2zvCT+K/gB8SNL8VNYxRN4i8JXYbRvHnhGSU7BH4l8I6h5eq2MLTboLbV4Y7rQNTljl/sjVtQjQvX+YXXoXwt+K/xI+CXjnQviX8JfGniDwB478NXQu9G8S+G7+Sw1C2bjzbeXbmC+068jzb6lpOoQ3Wl6pZvLZajZ3VpNLC/7Pwf48cVZHVpUM/m+JMruoz+scsc1ow6yoY2y+sSXxOGO9q6nwLEUF7x/QXAX0l+NOG61HC8T1JcW5LeMan1pxjneHp7OeHzGy+tSXxOnmKryrP3FisNfnP9V6ivwp/4JQf8FjfCv7altYfBP43f2N4G/af0+ykNh9kA0/wr8Y7HT7dprrVPCsMsjLpXi+0tYpLvX/B3msk9vHPr3hkyaYmp6T4a/dav7H4e4iyjinK6Gb5Lio4rB1tP5atCskvaYbE0vio4indc1OXRxnBzpThOX99cK8V5Fxpk2Gz7h7GxxuAxGj+zXw1eKTq4TGUX72HxVHmXPTl0calOU6NSnUkUUUV7h9GVru7tNPtLq/v7q3srGyt5ru9vbuaO2tLS0to2muLm5uJmSGC3ghR5ZppXWOKNWd2Cgmv8/L/gr9/wUq1r9uX40XPg7wFrF9a/syfCvVrqx+HukRtJbW/jvXbbzrHUPiprdr8rzTaorz2vg+2vRv0Pwu6sttp+ra74hjm/ob/4OB/2y7v4Bfsv6b8A/BWrSaf8RP2mJdU0PVLiyl2XmkfCHRFtv+E5fehLW7+Lbi/0vwdGkqbL/Q7/AMXCCRZ7HK/wtV/Jn0gePKzxEeB8srOFGnClic/nTlrWqVEq2Ey6Vv8Al3Tp8mLrx2qSq4Zaexmpfw/9KPxMxDxcPDjKMRKnh6VOhjOJp0pWderVUa+ByqTX/LmlS9njsTDVVZ1sItPYTUiiiiv5aP4vCiiigAooooAKKKKANnw94h13wlr2jeKfC+sal4e8SeHdUsdb0HXdGvJ9O1bRtY0u5jvNO1PTb+1eO5s76yu4Yri1uYJElhmjV0YMK/0If+CRf/BROz/b0+ARj8YXFpa/tBfCSPStA+LWnRJDax+Io7qKZNA+JOk2kISGKx8VpY3S6vZWscUWj+JrPU7aK1tdJudDa6/zxa+5P+CdP7XWr/sUftY/DT4zw3d4ngz+0U8JfFnSrXzGGufDDxJcW1t4mie1jBa9utE2WnizRbYbfM1/w/palxGZAf1Dwp47r8E8SUHWqy/sLM6lLCZxRb/dwhJ8tLMEtlVwMpe0k0rzw3t6O84uP7L4J+JWJ8O+LcNKvXn/AKt5zVo4HPsO5fuqdOcuShmkY7Ktl05+1lJLmqYT6zQ3qRlH/S8oqnp9/Y6tYWWqaZd29/pupWltf6ffWkqT2t7Y3kKXFpd208ZMc1vcQSJNDKhKSRurKSDVyv8AQhO+q1T1TXU/1LTTSad09U1s13R/nq/8Fw/jvc/G/wD4KI/F+zivzeeGvgvHo3wT8MQhhssz4PtjdeMoSq/J53/CxtY8YI8nMphitoZD/o6JH+RNen/G3xlc/Eb4z/Fz4g3jmW78d/E7x74yupCdxkufE/irVdbnctxuLSXrHOBnNeYV/mHxJmlTOuIM6zapJylmGaY3Fa9IVcROVKC/u06XJTgukIpH+OPF2c1OIeKOIc8qyc5ZrnOY41X+zTr4qpKjTX9ylR5KVNfZhCK6BRRRXhnzoUUUUAFFFFABRRRQAUUUUAf6JX/BFr483Xx8/wCCeHwR1HV9Q/tHxN8MYNW+CviSZpfOlWT4eXK2fhZLh2Jka6f4eXfg24uXmJllmneYlvMDH9Vq/gD/AOCc/wC3h4v/AGXvgl4o8A6BdGGz1f4p634wkUTXEf8ApN/4S8EaK7YikRf9V4fhGcZ4+lfff/D4H4l/9BB//Aq9/wDj9f1XknjdWwWS5RgqsKdWrhMrwGFqVZqTnUnQwtKlOpN9ZTlFyk+rZ/bHDn0iq+XcPZFl9anSrVsDk2V4OrWqKUqlWphsFQozqVJdZzlByk+rZ/LrrlhNpetavplzu+06dql/YXG773nWl3Lby7s87t8Zz71lV9i/8FB/hZc/Bf8Abe/am+HVxbfY4dI+NfjnU9FgwRt8LeLtXm8Y+D2+b/nr4V1/R5s/dbflSVINfHVfzFmWEqZfmOPwFVctXBY3FYSonuqmGrzozT9JQZ/HGbYCrlea5nllZONbLswxmAqp7qrhMRUw80/SVNhRRRXCecFFFFABRRRQAUUUUAFFFFAHv3wr+Feu+OPD95qumTarHBb6zcaewsSfK82Ky0+5JbH/AC02XaZ/2dtel/8ADPPi/wD5+/EX5tX9Mn/BCL9jPwZ48/YeuviJ8R9HjuZvHXxr8fat4UnNtBKZPC2j6T4Q8FtlriJj8vinwt4oj+Q+X8n9/fX7P/8ADBnwE/6AEP8A4Baf/wDGK/Xst8Lc6zDLsBj6WFrSpY3BYXF02oTs4YmhCtBrXrGaP3jKPBniLNMpyvM6ODryo5jl2Cx1KSpztKni8NTrwa8nGomfzN/8HJv7MFz4S+Nnww/au0HTHHh34teHofh147voUYwwfETwPbSP4eub+Y8JceJfAfk6fp0K8GH4f38h2t9/+Zev9PP9tj9lXwl+2f8As1/Ej4A+K2hspPFGli88IeIpIzI/hHx7ox+3+EfEsewGbybLVEjg1e3tzHLqXh+71fSPMSPUHNf5pvxW+F3jn4J/Efxn8JviXoN34Z8d+AdfvvDfiXRbxfntdQsZMeZBL/q7zTr6Aw6hpWpW5ez1TTLq01GylmtLqGV/X8eOD6uRcVTz7D0n/ZfEjeI54r3KOaxivrtCVtpYj/foOWtR1cQo/wACR7f0l+Aq3DfGlTibC0X/AGNxbJ4r2kV7mHzuMV/aOHm+ksVZZjTcv4sq+KUNMNM8+ooor8KP5sCiiigAooooAKKKKACt/wAK+GNf8b+J/DngzwppdzrfijxdrukeGfDejWSh7zVte16/t9L0jTLVSQGuL6/ure1hBIBklXJFYFf0zf8ABvV+wJd/EP4lT/ts/EnRpo/Afwru7zR/gxb31uVt/FvxKkgmsdX8VW6y8XWkfD6ynltbScRNBL4y1CCWzvEv/B2oW9fT8H8M4zi/iHLsiwal/tVZPFVktMJgabUsXipdF7KlfkUv4lZ0qK96pFH2PAXB+P474qynhrARl/ttdPGYhK8cDltJqeOxs/sr2NC/s1K3tcRKjQXv1Yo/q4/ZT+BWlfsy/s3/AAY+A2j+S0Pwy8A6H4ev7q3/ANVqniMW/wBt8W64vyR8694pvNY1l/3afPfN8q9K+gqKK/0qwuGo4LC4bB4aCp4fCUKOGw9NbU6NCnGlSgvKMIpH+u2CweHy7B4TL8JTVHCYHDUMHhaUdqWHw1KNGjTXlCnCMV6BX4Uf8Fjf+CUNt+2n4V/4Xf8ABPT7Kw/af8DaMtp9gMlvp9j8Y/Cmn75IvCuqXU7w2tp4u0lXl/4Q/X7uSOCeNj4Y12ZdNk0jUvDf7r0V5XEXD2V8U5Rislzeh7bB4qPSyrUKsf4WJw1Sz9niKMvepys1vCcZ0pzhLxeK+Fcm40yLG8PZ9hvrGAxsd1aNfDV460cZhKrUvY4rDy96nOzXxU6kalGdSnL/ACePEPh7XvCWu6x4X8U6Nqnh3xJ4e1K80bXdB1uxudL1jRtW06d7W/03U9OvI4buyvrO5jkgubW4ijmhlRkdQwrGr/Q4/wCCin/BIv4Cft6WVz4xhMPwk/aEtrSOLTvi1oOlRXMXiNLSFYLTSfiVoMc1iniqxjgjitLLWFubTxNosMVrHbald6TaNoV1/FV+13/wTq/aw/Yo1i7h+M/w01H/AIQxLz7LpXxZ8JJceJPhfrgdxHavD4mtraP+xLq8Y4t9E8WWnh/X5NrsulmICVv4T478KuI+Ca9as6FTM8i5m6OcYWlKUIU+izClHmlgaq0TdT/Z5v8AhV5u8Y/5reJXgnxb4d4mvXlhquccN8zeHz7BUZTpwpX92OaUYc88urxVlKVX/ZKkn+4xNR80Y/DlFFFfl5+NhRRRQAUVv+GPCvifxtr+l+FPBnhzXfFvijW7lbLRvDnhnSL/AF7XtXvHyUtNM0jS4Lq/vrlgCVhtbeWQgE7eK/pH/YD/AODer4lfEO80X4k/tszXfws8BJLBf2/wY0e+gf4meK4VIlS38V6tZSXFj8P9Hu12C5tLWe/8ZyQG6spYPB9+sGoL9PwzwfxDxfjFg8iy6tiveSr4pp08DhE/t4rFyXsqWnvKF3WqWtRpVJe6fY8H8BcVcd4+OA4byqvjPfUcRjXF0stwMX/y8xuOkvY0Uo+8qd5YiqlahRqztE/OT/gmP/wTH+Jf/BQD4lwXNzBqvg/9nbwfqsA+J3xOEAi+0+UI7p/A3gZ7qN7fVPGmqW7xiaYR3On+EtPuU1vW0lkl0bRtd/0Hfhr8N/BPwf8AAPhL4X/Dfw9Y+FPAvgXQ7Hw54Y8P6arC103S9PiEcKb5Gee6uZTuub6/u5Z77Ub6a4v7+4uLy4nmc+G/w18A/B/wT4e+G/wv8JaH4F8C+FLFdN8P+GPDljFp+l6bahmkfZDGMy3N1O8t3f31y019qN9PcX9/cXF5cTTv3Ff3T4ceHGW8AZbKEJLG5zjVH+08z5eXm5dY4XCxfvUsHSlqk/3lep+9q/8ALqlR/wBJPCbwmynwvymdOnOOYcQZhGH9sZxycvPy6xwWCi/eo5fRlqk/3mJqfv69rUaNAooor9IP1sKKKKACqd/YWGq2V1puqWVpqWnX0EtrfWF/bw3lleWsylJra6tbhJILiCVCUkhlRo3UlWUirlFG+j1TBpNNNXT0aezXZn5TfHj/AIIr/wDBO/493N/q198Eofhf4l1De0viL4Katc/Dtkkk5eaPwpaJefDv7Q7/AL2S4m8GSzyyEtK77mz/ACn/ALev/BO/4K/st+Lb7Qfh/wCJ/ijq9pbPdKknjHWvCl/cnyDhdzaL4J8Px8/xYhHtiv8AQJr+On/gsR/yUjVv+u2o/wDoQr+UfG/JMlwNSNXBZRleDq1aXPUqYXAYXDzqTb1nOdKlGUpPrKTbP4l+kZw5w9ltWFfLsiybAVq1KNWtVwWWYLC1atSU/eqVJ0KEJTnLrKTbZ/PJ8LfhrofjfX20rVbrVre3F6Lffp89pFNs3hc7rixuk3f9s8e1f1c/sX/8EJP2H/H/AIM0n4kfES7+NfjiabyvP8Kap4+0jR/C02UEh3N4N8H+F/FS5+7+68UR/L0+b5q/mI/Z8/5HOT/sKL/6NFf6Cn7Av/JBNF/7Y/8ApOtfmXhZluXZhneGpY/AYLHUnXgnTxeFoYmDV9nCtCcX9x+PeCuUZVmnEWEo5nlmX5jRlXpKVLH4LD4um05vRwxFOpFr5Hq/wI/ZR/Zu/Zj0r+x/gL8F/APwyhkhFvd6h4e0OD/hJNVhBBVdd8XX/wBs8Va/t2ja2tazfsuBg8V9CUUV/emGwuFwVGGGweGoYTDUlanh8NRp0KNNdoUqUYwiv8KR/plg8Fg8uw9PB5fhMNgcJRXLRwuDoUsNh6Ue1OjRjCnBeUYoKKKK3OkKKKKAAP/Z" alt="JPG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" +/> +</body> +<script> +async function test() { + const img = document.querySelector('img'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + addImage(event); + assert_equals(img.src, event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + return true; + } + + dragDropTest(img, div, onDropCallBack, 'Dragging the dataURL JPG image to the bottom div should copy the image there'); +} +test(); +</script> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/006.html b/testing/web-platform/tests/html/editing/dnd/images/006.html new file mode 100644 index 0000000000..4a8b159f65 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/006.html @@ -0,0 +1,53 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>dataURL image drag and drop from iframe</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +iframe + {width:150px; + height:150px; + border-style:none;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><iframe src="helper-drag-me-data-url-image.xhtml">XHTML with image</iframe></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" +/> +<script> +async function test() { + await new Promise(loaded => window.addEventListener("load", loaded)); + const iframe = document.querySelector('iframe'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + addImage(event); + var img = document.querySelector('img'); + assert_equals(img.src, event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + return true; + } + dragDropTest(iframe, div, onDropCallBack, 'Dragging a dataURL image from an iframe to a div should copy it there'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/007.html b/testing/web-platform/tests/html/editing/dnd/images/007.html new file mode 100644 index 0000000000..afacc9205c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/007.html @@ -0,0 +1,37 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>dataURL image drag and drop to iframe</title> +<style type="text/css"> +iframe + {width:160px; + height:160px; + border-style:none;} +</style> +</head> +<body> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<p><iframe src="helper-drop-image-here.xhtml">XHTML with image</iframe></p> +<script> +async function test () { + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const iframe = document.querySelector('iframe'); + const innerDoc = iframe.contentDocument || iframe.contentWindow.document; + const div = innerDoc.querySelector('div'); + function onDropCallBack(event) { + assert_equals(img.src, event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + return true; + } + dragDropTest(img, div, onDropCallBack, 'Dragging a dataURL image to an iframe should copy it there', iframe); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/008.html b/testing/web-platform/tests/html/editing/dnd/images/008.html new file mode 100644 index 0000000000..2747c60ff6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/008.html @@ -0,0 +1,39 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>dataURL image drag and drop between iframes</title> +<style type="text/css"> +iframe + {width:160px; + height:160px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-data-url-image.xhtml">XHTML with image</iframe></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<p><iframe src="helper-drop-image-here.xhtml" id="iframe-2">XHTML with image</iframe></p> +<script> +async function test() { + await new Promise(loaded => window.addEventListener("load", loaded)); + const iframe = document.querySelector('iframe'); + const iframeTwo = document.getElementById('iframe-2'); + const innerDoc = iframeTwo.contentDocument || iframeTwo.contentWindow.document; + const div = innerDoc.querySelector('div'); + function onDropCallBack(event) { + const innerDoc1 = iframe.contentDocument || iframe.contentWindow.document; + const img = innerDoc1.querySelector('img'); + assert_equals(img.src, event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + return true; + } + dragDropTest(iframe, div, onDropCallBack, 'Dragging a dataURL image within an iframe to another iframe should copy it there', iframeTwo); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/009.html b/testing/web-platform/tests/html/editing/dnd/images/009.html new file mode 100644 index 0000000000..ebb252ab0b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/009.html @@ -0,0 +1,53 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Image drag and drop from iframe</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +iframe + {width:150px; + height:150px; + border-style:none;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><iframe src="helper-circle.xhtml">XHTML with image</iframe></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" +/> +<script> +async function test() { + await new Promise(loaded => window.addEventListener("load", loaded)); + const iframe = document.querySelector('iframe'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + addImage(event); + var img = document.querySelector('img'); + assert_equals(img.src, event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + return true; + } + dragDropTest(iframe, div, onDropCallBack, 'Dragging an image within an iframe to a div should copy it there'); +}; +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/010.html b/testing/web-platform/tests/html/editing/dnd/images/010.html new file mode 100644 index 0000000000..d41b36c261 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/010.html @@ -0,0 +1,39 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Image drag and drop to iframe</title> +<style type="text/css"> +p:first-child + {padding-left:20px;} +iframe + {width:160px; + height:160px; + border-style:none;} +</style> +</head> +<body> +<p><img src="../resources/circle.png" alt="PNG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<p><iframe src="helper-drop-image-here.xhtml">XHTML with image</iframe></p> +<script> +async function test() { + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const iframe = document.querySelector('iframe'); + const innerDoc = iframe.contentDocument || iframe.contentWindow.document; + const div = innerDoc.querySelector('div'); + function onDropCallBack(event) { + assert_equals(img.src, event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + return true; + } + dragDropTest(img, div, onDropCallBack, 'Dragging an image to an iframe should copy it there', iframe) +}; +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/011.xhtml b/testing/web-platform/tests/html/editing/dnd/images/011.xhtml new file mode 100644 index 0000000000..905ce2c4f8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/011.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Image drag and drop between iframes</title> +<style type="text/css"> +iframe + {width:160px; + height:160px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-circle.xhtml">XHTML with image</iframe></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<p><iframe src="helper-drop-image-here.xhtml">XHTML with image</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/012-1.xhtml b/testing/web-platform/tests/html/editing/dnd/images/012-1.xhtml new file mode 100644 index 0000000000..3dc4f80641 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/012-1.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Image drag and drop: helper file</title> +</head> +<body> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/images/012.xhtml b/testing/web-platform/tests/html/editing/dnd/images/012.xhtml new file mode 100644 index 0000000000..d323d0a02e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/012.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of dataURL image between frames</title> +</head> +<frameset rows="50%, 50%"> +<frame src="012-1.xhtml"/> +<frame src="helper-drop-image-here.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/013-1.xhtml b/testing/web-platform/tests/html/editing/dnd/images/013-1.xhtml new file mode 100644 index 0000000000..7a78528c84 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/013-1.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Image drag and drop: helper file</title> +</head> +<body> +<p><img src="../resources/circle.png" alt="PNG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/images/013.xhtml b/testing/web-platform/tests/html/editing/dnd/images/013.xhtml new file mode 100644 index 0000000000..ffa7f3b74b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/013.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of image between frames</title> +</head> +<frameset rows="50%, 50%"> +<frame src="013-1.xhtml"/> +<frame src="helper-drop-image-here.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/014-1.xhtml b/testing/web-platform/tests/html/editing/dnd/images/014-1.xhtml new file mode 100644 index 0000000000..13d8e43f98 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/014-1.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Image drag and drop: helper file</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + background-color:silver;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><img src="../resources/circle.png" alt="PNG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle from one frame to the silver box in <strong>another</strong> frame. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/014.xhtml b/testing/web-platform/tests/html/editing/dnd/images/014.xhtml new file mode 100644 index 0000000000..1acb985a8d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/014.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of image between two instances of document</title> +</head> +<frameset rows="50%, 50%"> +<frame src="014-1.xhtml"/> +<frame src="014-1.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/015.html b/testing/web-platform/tests/html/editing/dnd/images/015.html new file mode 100644 index 0000000000..ed1aed28bc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/015.html @@ -0,0 +1,49 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Dropping image on horizontal scrollbar of a scrollable block element</title> +<style type="text/css"> +div[ondragenter] + {width:3em; + height:3em; + margin-top:1em; + font-size:1.5em; + white-space:nowrap; + overflow-x:scroll;} +p:first-child + {padding-left:1em;} +img + {width:5px; + height:5px;} +</style> +<script type="application/ecmascript"> +function checkImage(event) + {document.querySelector('div').firstChild.nodeValue = (document.querySelector('img').getAttribute('src') == event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,''))?'PASS':'FAIL';} +</script> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag little square above and drop it on scrollbar below. You should see word PASS when you drop it on scrollbar.</p> +<div ondragenter="event.preventDefault()" ondragover="return false">↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓</div> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + checkImage(event); + assert_true(div.firstChild.nodeValue == 'PASS'); + return true; + } + + dragDropTest(img, div, onDropCallBack, 'Dragging the image to the horizontal scrollbar within a scrollable block element should copy it there'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/016.html b/testing/web-platform/tests/html/editing/dnd/images/016.html new file mode 100644 index 0000000000..1b02bf876b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/016.html @@ -0,0 +1,48 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Dropping image on vertical scrollbar of a scrollable block element</title> +<style type="text/css"> +div[ondragenter] + {width:2em; + height:5em; + margin-top:1em; + font-size:1.5em; + overflow-y:scroll;} +p:first-child + {padding-left:1em;} +img + {width:5px; + height:5px;} +</style> +<script type="application/ecmascript"> +function checkImage(event) + {document.querySelector('div').firstChild.nodeValue = (document.querySelector('img').getAttribute('src') == event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,''))?'P A S S':'F A I L';} +</script> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag little square above and drop it on scrollbar below. You should see word PASS when you drop it on scrollbar.</p> +<div ondragenter="event.preventDefault()" ondragover="return false">→ → → → → → → → → → → → → → → → → → → →</div> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + checkImage(event); + assert_true(div.firstChild.nodeValue == 'P A S S'); + return true; + } + + dragDropTest(img, div, onDropCallBack, 'Dragging the image to the vertical scrollbar within a scrollable block element should copy it there'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/017.html b/testing/web-platform/tests/html/editing/dnd/images/017.html new file mode 100644 index 0000000000..bbf85f04f8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/017.html @@ -0,0 +1,50 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Dropping image on horizontal page scrollbar</title> +<style type="text/css"> +p:first-child + {padding-left:1em;} +div + {position:fixed; + bottom:0; + left:0;} +img + {width:5px; + height:5px;} +body + {width:3000px;} +</style> +<script type="application/ecmascript"> +function dragImage() + {event.dataTransfer.effectAllowed = 'copy';} +function dropImage(event) + {document.querySelector('div').firstChild.nodeValue = 'PASS';} +</script> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false"> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="dragImage()"/></p> +<p>Drag little square above and drop it on vertical scrollbar. Word PASS should appear near scrollbar once you drop it.</p> +<div>↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓</div> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + dropImage(event); + assert_equals('PASS', div.firstChild.nodeValue); + return true; + } + + dragDropTest(img, div, onDropCallBack, 'Dragging the image to the horizontal scrollbar should copy it there'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/018.html b/testing/web-platform/tests/html/editing/dnd/images/018.html new file mode 100644 index 0000000000..3fa61b07d7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/018.html @@ -0,0 +1,49 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Dropping image on vertical page scrollbar</title> +<style type="text/css"> +p:first-child + {padding-left:1em;} +div + {width:1ex; + margin-left:auto;} +img + {width:5px; + height:5px;} +body + {height:3000px;} +</style> +<script type="application/ecmascript"> +function dragImage() + {event.dataTransfer.effectAllowed = 'copy';} +function dropImage(event) + {document.querySelector('div').firstChild.nodeValue = 'P A S S';} +</script> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false"> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="dragImage()"/></p> +<p>Drag little square above and drop it on vertical scrollbar. Word PASS should appear near scrollbar once you drop it.</p> +<div>→ → → → → → → → → → → → → → → → → → → → → → → → → → → → → → → → → → → →</div> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const div = document.querySelector('div'); + function onDropCallBack(event) { + dropImage(event); + assert_equals('P A S S', div.firstChild.nodeValue); + return true; + } + + dragDropTest(img, div, onDropCallBack, 'Dragging the image to the vertical scrollbar should copy it there'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/021.html b/testing/web-platform/tests/html/editing/dnd/images/021.html new file mode 100644 index 0000000000..62476c16f5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/021.html @@ -0,0 +1,49 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Dropping image on horizontal iframe scrollbar</title> +<style type="text/css"> +p:first-child + {padding-left:1em;} +iframe + {height:3em; + width:4em;} +img + {width:5px; + height:5px;} +</style> +<script type="application/ecmascript"> +function dragImage() + {event.dataTransfer.effectAllowed = 'copy';} +function dropImage(event) + {document.querySelector('p + p').firstChild.nodeValue = 'PASS';} +</script> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false"> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="dragImage()"/></p> +<p>Drag little square above and drop it on horizontal scrollbar. Word PASS should appear once you drop it.</p> +<iframe src="helper-drop-horizontal-scrollbar.xhtml">XHTML document</iframe> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const iframe = document.querySelector('iframe'); + const innerDoc = iframe.contentDocument || iframe.contentWindow.document; + const div = innerDoc.querySelector('div'); + function onDropCallBack(event) { + dropImage(event); + assert_equals('PASS', document.querySelector('p + p').firstChild.nodeValue); + return true; + } + + dragDropTest(img, div, onDropCallBack, 'Dragging the image to the horizontal iframe scrollbar should copy it there', iframe); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/022.xhtml b/testing/web-platform/tests/html/editing/dnd/images/022.xhtml new file mode 100644 index 0000000000..a85f8c10f1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/022.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropping image on vertical iframe scrollbar</title> +<style type="text/css"> +p:first-child + {padding-left:1em;} +iframe + {height:6em; + width:3em;} +img + {width:5px; + height:5px;} +</style> +<script type="application/ecmascript"> +function dragImage() + {event.dataTransfer.effectAllowed = 'copy';} +function dropImage(event) + {document.querySelector('p + p').firstChild.nodeValue = 'PASS';} +</script> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false"> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="dragImage()" ondragend="dropImage(event)"/></p> +<p>Drag little square above and drop it on vertical scrollbar. Word PASS should appear once you drop it.</p> +<iframe src="helper-drop-vertical-scrollbar.xhtml">XHTML document</iframe> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/023.html b/testing/web-platform/tests/html/editing/dnd/images/023.html new file mode 100644 index 0000000000..4765d792f4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/023.html @@ -0,0 +1,47 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Dropping image on horizontal object scrollbar</title> +<style type="text/css"> +p:first-child + {padding-left:1em;} +object + {height:3em; + width:4em;} +img + {width:5px; + height:5px;} +</style> +<script type="application/ecmascript"> +function dragImage() + {event.dataTransfer.effectAllowed = 'copy';} +function dropImage(event) + {document.querySelector('p + p').firstChild.nodeValue = 'PASS';} +</script> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false"> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="dragImage()"/></p> +<p>Drag little square above and drop it on horizontal scrollbar. Word PASS should appear once you drop it.</p> +<object type="application/xhtml+xml" data="helper-drop-horizontal-scrollbar.xhtml">XHTML document</object> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const object = document.querySelector('object'); + function onDropCallBack(event) { + dropImage(event); + assert_equals('PASS', document.querySelector('p + p').firstChild.nodeValue); + return true; + } + + dragDropTest(img, object, onDropCallBack, 'Dragging the image to the horizontal object scrollbar should copy it there'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/024.html b/testing/web-platform/tests/html/editing/dnd/images/024.html new file mode 100644 index 0000000000..0e695cf1df --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/024.html @@ -0,0 +1,47 @@ +<!doctype html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="../resources/test-helper.js"></script> +<head> +<title>Dropping image on vertical object scrollbar</title> +<style type="text/css"> +p:first-child + {padding-left:1em;} +object + {height:6em; + width:3em;} +img + {width:5px; + height:5px;} +</style> +<script type="application/ecmascript"> +function dragImage() + {event.dataTransfer.effectAllowed = 'copy';} +function dropImage(event) + {document.querySelector('p + p').firstChild.nodeValue = 'PASS';} +</script> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false"> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="dragImage()"/></p> +<p>Drag little square above and drop it on vertical scrollbar. Word PASS should appear once you drop it.</p> +<object type="application/xhtml+xml" data="helper-drop-vertical-scrollbar.xhtml">XHTML document</object> +<script> +async function test(){ + await new Promise(loaded => window.addEventListener("load", loaded)); + const img = document.querySelector('img'); + const object = document.querySelector('object'); + function onDropCallBack(event) { + dropImage(event); + assert_equals('PASS', document.querySelector('p + p').firstChild.nodeValue); + return true; + } + + dragDropTest(img, object, onDropCallBack, 'Dragging the image to the vertical object scrollbar should copy it there'); +} +test(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/025.xhtml b/testing/web-platform/tests/html/editing/dnd/images/025.xhtml new file mode 100644 index 0000000000..c077aa8b61 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/025.xhtml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of image to scrollable container with horizontal scrollbar</title> +<style type="text/css"> +p + div + {height:150px; + width:150px; + overflow-x:scroll;} +div[ondragenter] + {margin-left:200px; + width:105px; + min-height:105px; + text-align:center; + padding:10px; + background-color:silver;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div > div').appendChild(c);} +</script> +</head> +<body> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the silver box inside scrollable container below (dragging towards edge of container triggers scrolling).</p> +<p>It should be copied to the silver box once you drop it there.</p> +<div> + <div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" + /> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/026.xhtml b/testing/web-platform/tests/html/editing/dnd/images/026.xhtml new file mode 100644 index 0000000000..23063c7b4d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/026.xhtml @@ -0,0 +1,40 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of image to scrollable container with vertical scrollbar</title> +<style type="text/css"> +p + div + {height:150px; + width:150px; + overflow-y:scroll;} +div[ondragenter] + {margin-top:200px; + width:105px; + min-height:105px; + text-align:center; + padding:10px; + background-color:silver;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div > div').appendChild(c);} +</script> +</head> +<body> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the silver box inside scrollable container below (dragging towards edge of container triggers scrolling).</p> +<p>It should be copied to the silver box once you drop it there.</p> +<div> +↓↓↓↓↓↓↓↓↓ + <div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" + /> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/027.xhtml b/testing/web-platform/tests/html/editing/dnd/images/027.xhtml new file mode 100644 index 0000000000..aa40e7e480 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/027.xhtml @@ -0,0 +1,40 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of image to scrollable container</title> +<style type="text/css"> +p + div + {height:150px; + width:150px; + overflow:scroll;} +div[ondragenter] + {margin:200px 0 0 200px; + width:105px; + min-height:105px; + text-align:center; + padding:10px; + background-color:silver;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div > div').appendChild(c);} +</script> +</head> +<body> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the silver box inside scrollable container below (dragging towards edge of container triggers scrolling).</p> +<p>It should be copied to the silver box once you drop it there.</p> +<div> +↘ + <div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" + /> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/028.xhtml b/testing/web-platform/tests/html/editing/dnd/images/028.xhtml new file mode 100644 index 0000000000..fe4474cceb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/028.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Image drag and drop and url alias</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('url')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above outside the window and then back inside and drop in the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/cross-domain/001-manual.xhtml b/testing/web-platform/tests/html/editing/dnd/images/cross-domain/001-manual.xhtml new file mode 100644 index 0000000000..f064633410 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/cross-domain/001-manual.xhtml @@ -0,0 +1,49 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross-domain image data must not populate the dataTransfer</title> +<script src="../../resources/crossorigin.sub.js"></script> +<style type="text/css"> +div { + width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy; +} +</style> +</head> +<body> +<p><img id="image" draggable="true" alt="" width="100" height="100" /></p> +<p>Drag the navy square above to the box below.</p> +<div></div> +<script><![CDATA[ + +document.getElementsByTagName("img")[0].src = crossOriginUrl("www", "../../resources/100x100-navy.png"); + +window.onload = function() { + var image = document.getElementsByTagName('img')[0], div = document.getElementsByTagName('div')[0], failed = []; + div.ondragover = div.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + div.ondrop = image.ondragstart = function(e) { + if( e.type == 'dragstart' ) { + e.dataTransfer.setData('Text', 'dummy text'); + e.dataTransfer.dropEffect = 'copy'; + } + for( var i = 0; i < e.dataTransfer.types.length; i++ ) { + if( e.dataTransfer.types[i].match(/image\//) ) { + failed[failed.length] = e.dataTransfer.types[i]; + } + } + if( e.type == 'drop' ) { + e.preventDefault(); + document.getElementsByTagName('p')[1].innerHTML = failed.length ? ( 'FAIL (found ' + failed.join() + ')' ) : 'PASS'; + } + }; +}; +]]></script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/helper-circle.xhtml b/testing/web-platform/tests/html/editing/dnd/images/helper-circle.xhtml new file mode 100644 index 0000000000..1df3ee3fa6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/helper-circle.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Image drag and drop: helper file</title> +</head> +<body> +<p><img src="../resources/circle.png" alt="PNG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/images/helper-drag-me-data-url-image.xhtml b/testing/web-platform/tests/html/editing/dnd/images/helper-drag-me-data-url-image.xhtml new file mode 100644 index 0000000000..640b42b4df --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/helper-drag-me-data-url-image.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Image drag and drop: helper file</title> +</head> +<body> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/images/helper-drop-horizontal-scrollbar.xhtml b/testing/web-platform/tests/html/editing/dnd/images/helper-drop-horizontal-scrollbar.xhtml new file mode 100644 index 0000000000..ca1a677cc8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/helper-drop-horizontal-scrollbar.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Image drag and drop: helper file</title> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false"> +<div>↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/images/helper-drop-image-here.xhtml b/testing/web-platform/tests/html/editing/dnd/images/helper-drop-image-here.xhtml new file mode 100644 index 0000000000..78fa33bf09 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/helper-drop-image-here.xhtml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Image drag and drop: helper file</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/images/helper-drop-vertical-scrollbar.xhtml b/testing/web-platform/tests/html/editing/dnd/images/helper-drop-vertical-scrollbar.xhtml new file mode 100644 index 0000000000..2c3913bfc3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/images/helper-drop-vertical-scrollbar.xhtml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Image drag and drop: helper file</title> +<style type="text/css"> +div + {width:1ex;} +</style> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false"> +<div>→ → → → → → → → → → → → → → → → → → → →</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactive/frames-1.html b/testing/web-platform/tests/html/editing/dnd/interactive/frames-1.html new file mode 100644 index 0000000000..b1a4f5fdef --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactive/frames-1.html @@ -0,0 +1,18 @@ +<!doctype html> +<html> + <head> + <title>drag and drop should allow dragging of iframes and object iframes</title> + <style type="text/css"> +html { background: black; color: white; } + </style> + </head> + <body> + + <script type="text/javascript"> +if( self == top ) { + document.write('<p>This is a helper file, not a testcase.<\/p>'); +} + </script> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactive/frames.html b/testing/web-platform/tests/html/editing/dnd/interactive/frames.html new file mode 100644 index 0000000000..ae14232e5a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactive/frames.html @@ -0,0 +1,22 @@ +<!doctype html> +<html> + <head> + <title>drag and drop should allow dragging of iframes and object iframes</title> + <style type="text/css"> +iframe, object { + border: 10px solid orange; + background: blue; + padding: 10px; + height: 100px; + width: 100px; +} + </style> + </head> + <body> + + <p>It should be possible to drag the following two blocks by both their orange and blue borders.</p> + <p><iframe draggable="true" src="frames-1.html"></iframe></p> + <p><object draggable="true" data="frames-1.html"></object></p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactive/object-retention.html b/testing/web-platform/tests/html/editing/dnd/interactive/object-retention.html new file mode 100644 index 0000000000..d1d2603421 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactive/object-retention.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<title>drag & drop - variable retention within event handlers</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } + body > div + div { + margin-top: 10px; + height: 200px; + width: 200px; + background-color: blue; + } +</style> + +<script> +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], fails = [], evs = {}; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + var foo = {}; + e.dataTransfer.setData('text', foo); + if( e.dataTransfer.getData('text') === foo ) { + fails[fails.length] = 'object was not cast to string'; + } + evs[e.type] = {}; + evs[e.type].dataTransfer = e.dataTransfer; + evs[e.type].items = e.dataTransfer.items; + evs[e.type].types = e.dataTransfer.types; + evs[e.type].files = e.dataTransfer.files; + //"The same object must be returned each time." + if( evs[e.type].dataTransfer !== e.dataTransfer ) { + fails[fails.length] = '.dataTransfer is not returning the same object during '+e.type; + } + if( !e.dataTransfer.items ) { + fails[fails.length] = '.items is not returning anything during '+e.type; + } else if( evs[e.type].items !== e.dataTransfer.items ) { + fails[fails.length] = '.items is not returning the same object during '+e.type; + } + if( !e.dataTransfer.types ) { + fails[fails.length] = '.types is not returning anything during '+e.type; + } else if( evs[e.type].types !== e.dataTransfer.types ) { + fails[fails.length] = '.types is not returning the same object during '+e.type; + } + if( !e.dataTransfer.files ) { + fails[fails.length] = '.files is not returning anything during '+e.type; + } else if( evs[e.type].files !== e.dataTransfer.files ) { + fails[fails.length] = '.files is not returning the same object during '+e.type; + } + }; + blue.ondragover = blue.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + if( !evs[e.type] ) { evs[e.type] = {}; } + evs[e.type].dataTransfer = e.dataTransfer; + evs[e.type].items = e.dataTransfer.items; + evs[e.type].types = e.dataTransfer.types; + evs[e.type].files = e.dataTransfer.files; + if( evs[e.type].dataTransfer != e.dataTransfer ) { + fails[fails.length] = '.dataTransfer is not returning the same object during '+e.type; + } + if( !e.dataTransfer.items ) { + fails[fails.length] = '.items is not returning anything during '+e.type; + } else if( evs[e.type].items !== e.dataTransfer.items ) { + fails[fails.length] = '.items is not returning the same object during '+e.type; + } + if( !e.dataTransfer.types ) { + fails[fails.length] = '.types is not returning anything during '+e.type; + } else if( evs[e.type].types !== e.dataTransfer.types ) { + fails[fails.length] = '.types is not returning the same object during '+e.type; + } + if( !e.dataTransfer.files ) { + fails[fails.length] = '.files is not returning anything during '+e.type; + } else if( evs[e.type].files !== e.dataTransfer.files ) { + fails[fails.length] = '.files is not returning the same object during '+e.type; + } + //http://dev.w3.org/html5/spec/dnd.html#datatransfer + //"The * attribute must return a * object associated with the DataTransfer object." + //Note that it is associated with the DataTransfer object, *not* the data store + //http://dev.w3.org/html5/spec/dnd.html#dragevent + //"when a user agent is required to fire a DND event named e at an element, using a particular drag data store... + //Let dataTransfer be a newly created DataTransfer object associated with the given drag data store." + //A new DataTransfer object therefore means a new set of properties, not the same ones as last event + if( evs.dragstart.dataTransfer === e.dataTransfer ) { + fails[fails.length] = '.dataTransfer is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.items && evs.dragstart.items === e.dataTransfer.items ) { + fails[fails.length] = '.items is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.types && evs.dragstart.types === e.dataTransfer.types ) { + fails[fails.length] = '.types is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.files && evs.dragstart.files === e.dataTransfer.files ) { + fails[fails.length] = '.files is returning the same object during '+e.type+' as it did during dragstart'; + } + }; + blue.ondrop = function(e) { + e.preventDefault(); + evs[e.type] = {}; + evs[e.type].dataTransfer = e.dataTransfer; + evs[e.type].items = e.dataTransfer.items; + evs[e.type].types = e.dataTransfer.types; + evs[e.type].files = e.dataTransfer.files; + if( evs[e.type].dataTransfer !== e.dataTransfer ) { + fails[fails.length] = '.dataTransfer is not returning the same object during '+e.type; + } + if( !e.dataTransfer.items ) { + fails[fails.length] = '.items is not returning anything during '+e.type; + } else if( evs[e.type].items !== e.dataTransfer.items ) { + fails[fails.length] = '.items is not returning the same object during '+e.type; + } + if( !e.dataTransfer.types ) { + fails[fails.length] = '.types is not returning anything during '+e.type; + } else if( evs[e.type].types !== e.dataTransfer.types ) { + fails[fails.length] = '.types is not returning the same object during '+e.type; + } + if( !e.dataTransfer.files ) { + fails[fails.length] = '.files is not returning anything during '+e.type; + } else if( evs[e.type].files !== e.dataTransfer.files ) { + fails[fails.length] = '.files is not returning the same object during '+e.type; + } + if( evs.dragstart.dataTransfer === e.dataTransfer ) { + fails[fails.length] = '.dataTransfer is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.items && evs.dragstart.items === e.dataTransfer.items ) { + fails[fails.length] = '.items is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.types && evs.dragstart.types === e.dataTransfer.types ) { + fails[fails.length] = '.types is returning the same object during '+e.type+' as it did during dragstart'; + } + if( e.dataTransfer.files && evs.dragstart.files === e.dataTransfer.files ) { + fails[fails.length] = '.files is returning the same object during '+e.type+' as it did during dragstart'; + } + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS'; + }; +}; +</script> + +<p>Drag the orange square onto the blue square. Fail if this text does not change.</p> +<div draggable="true"></div> +<div></div> + +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/interactive/plugins.html b/testing/web-platform/tests/html/editing/dnd/interactive/plugins.html new file mode 100644 index 0000000000..70eb97bf42 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactive/plugins.html @@ -0,0 +1,28 @@ +<!doctype html> +<html> + <head> + <title>drag and drop should not remove styling of plugin object elements</title> + <style type="text/css"> +div { + border: 10px solid orange; + background: yellow; + padding: 10px; + height: 140px; + width: 140px; +} +object { + border: 10px solid gray; + background: fuchsia; + padding: 10px; + height: 100px; + width: 100px; +} + </style> + </head> + <body> + + <p>Drag the following block by the orange border. The drag placeholder should contain all inner borders, but may optionally show white or pink instead of the navy square.</p> + <div draggable="true" ondragstart="event.dataTransfer.setData('Text','dummy text');"><object data="../resources/boxnavy.swf"></object></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/001.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/001.html new file mode 100644 index 0000000000..25acccbef9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/001.html @@ -0,0 +1,29 @@ +<!doctype html> +<html> + <head> + <title>Select input inside draggable element</title> + <style type="text/css"> +select { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p> + <div draggable="true"> + <select> + <option>Option 1</option> + <option>Option 2</option> + <option>Option 3</option> + </select> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/002.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/002.html new file mode 100644 index 0000000000..146676e5d0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/002.html @@ -0,0 +1,29 @@ +<!doctype html> +<html> + <head> + <title>Select multiple input inside draggable element</title> + <style type="text/css"> +select { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p> + <div draggable="true"> + <select multiple size="3"> + <option>Option 1</option> + <option>Option 2</option> + <option>Option 3</option> + </select> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/003.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/003.html new file mode 100644 index 0000000000..76ba256831 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/003.html @@ -0,0 +1,29 @@ +<!doctype html> +<html> + <head> + <title>Draggable select</title> + <style type="text/css"> +select { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('select')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p> + <div> + <select draggable="true"> + <option>Option 1</option> + <option>Option 2</option> + <option>Option 3</option> + </select> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/004.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/004.html new file mode 100644 index 0000000000..9bd02771f0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/004.html @@ -0,0 +1,29 @@ +<!doctype html> +<html> + <head> + <title>Draggable select multiple</title> + <style type="text/css"> +select { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('select')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p> + <div> + <select multiple size="3" draggable="true"> + <option>Option 1</option> + <option>Option 2</option> + <option>Option 3</option> + </select> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/005.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/005.html new file mode 100644 index 0000000000..c08a5104db --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/005.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Text input inside draggable element</title> + <style type="text/css"> +input { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should focus the dummy text. Use your mouse to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p> + <div draggable="true"> + <input value="Dummy text"> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/006.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/006.html new file mode 100644 index 0000000000..46b1dc58d4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/006.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Draggable text input</title> + <style type="text/css"> +input { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('input')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should focus the dummy text. Use your mouse to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p> + <div> + <input value="Dummy text" draggable="true"> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/007.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/007.html new file mode 100644 index 0000000000..51d558ccf2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/007.html @@ -0,0 +1,36 @@ +<!doctype html> +<html> + <head> + <title>Textarea inside draggable element</title> + <style type="text/css"> +textarea { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It may optionally focus the dummy text. Use your mouse to select part of the dummy text, moving the mouse vertically and horizontally. It should select the text. Try to drag the input's scrollbar thumb. It should <strong>not</strong> drag the block or text in any case.</p> + <div draggable="true"> +<textarea rows="5" cols="50" wrap="off">Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/008.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/008.html new file mode 100644 index 0000000000..780c82de20 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/008.html @@ -0,0 +1,36 @@ +<!doctype html> +<html> + <head> + <title>Draggable textarea</title> + <style type="text/css"> +textarea { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('textarea')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It may optionally focus the dummy text. Use your mouse to select part of the dummy text, moving the mouse vertically and horizontally. It should select the text. Try to drag the input's scrollbar thumb. It should <strong>not</strong> drag the block or text in any case.</p> + <div> +<textarea rows="5" cols="50" wrap="off">Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +Dummy text +xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/009.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/009.html new file mode 100644 index 0000000000..08859bbdae --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/009.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Input button inside draggable element</title> + <style type="text/css"> +input { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p> + <div draggable="true"> + <input type="button" value="Dummy text"> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/010.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/010.html new file mode 100644 index 0000000000..48d67943d8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/010.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Draggable input button</title> + <style type="text/css"> +input { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('input')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p> + <div> + <input type="button" value="Dummy text" draggable="true"> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/011.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/011.html new file mode 100644 index 0000000000..315307a5ef --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/011.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Button inside draggable element</title> + <style type="text/css"> +button { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p> + <div draggable="true"> + <button>Dummy text</button> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/012.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/012.html new file mode 100644 index 0000000000..46a3724024 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/012.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Draggable button</title> + <style type="text/css"> +button { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('button')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p> + <div> + <button draggable="true">Dummy text</button> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/015.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/015.html new file mode 100644 index 0000000000..28e8966bd4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/015.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Contenteditable inside draggable element</title> + <style type="text/css"> +div div { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the text or the orange block. Use your mouse to select the dummy text. It should <strong>not</strong> drag the text or the orange block.</p> + <div draggable="true"> + <div contenteditable="true">Dummy text</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/016.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/016.html new file mode 100644 index 0000000000..53145787b3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/016.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Draggable contenteditable element</title> + <style type="text/css"> +div div { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[1].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the text or the orange block. Use your mouse to select the dummy text. It should <strong>not</strong> drag the text or the orange block.</p> + <div> + <div draggable="true" contenteditable="true">Dummy text</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/017.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/017.html new file mode 100644 index 0000000000..b99e554682 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/017.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Scrollable element inside draggable element</title> + <style type="text/css"> +div div { width: 300px; height: 100px; overflow: auto; border: 1px solid orange; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>It should be possible to drag the scrollbar thumbs of the box below without dragging the whole box.</p> + <div draggable="true"> + <div>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/018.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/018.html new file mode 100644 index 0000000000..57a5aaf417 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/018.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Draggable scrollable element</title> + <style type="text/css"> +div div { width: 300px; height: 100px; overflow: auto; border: 1px solid orange; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[1].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>It should be possible to drag the scrollbar thumbs of the box below without dragging the whole box.</p> + <div> + <div draggable="true">Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/019.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/019.html new file mode 100644 index 0000000000..79d3c4ec47 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/019.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Disabled text input with inside draggable element</title> + <style type="text/css"> +input { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p> + <div draggable="true"> + <input value="Dummy text" disabled> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/020.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/020.html new file mode 100644 index 0000000000..a64c74d05b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/020.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Disabled draggable text input</title> + <style type="text/css"> +input { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('input')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p> + <div> + <input value="Dummy text" draggable="true" disabled> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/021.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/021.html new file mode 100644 index 0000000000..eee0efaef2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/021.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Readonly text input with inside draggable element</title> + <style type="text/css"> +input { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p> + <div draggable="true"> + <input value="Dummy text" readonly> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/022.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/022.html new file mode 100644 index 0000000000..48d85d5f42 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/022.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Readonly draggable text input</title> + <style type="text/css"> +input { border: 1px solid orange; border-top-width: 20px; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('input')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + </script> + </head> + <body> + + <p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p> + <div> + <input value="Dummy text" draggable="true" readonly> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/media/001.xhtml b/testing/web-platform/tests/html/editing/dnd/media/001.xhtml new file mode 100644 index 0000000000..28984b5448 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/media/001.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Video drag and drop</title> +<style type="text/css"> +canvas + {background-color:silver;} +</style> +<script type="application/ecmascript"> +var draggedFrame = 'data:text/plain,FAIL'; +function dropIt(event) + {document.querySelector('p + p').firstChild.nodeValue = (draggedFrame == event.dataTransfer.getData('text/uri-list'))?'PASS':'FAIL';} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.drawImage(document.querySelector('video'),0,0,640,360); + draggedFrame = canvas.toDataURL('image/png'); + event.dataTransfer.setData('text/uri-list',draggedFrame);} +</script> +<script src="/common/media.js"></script> +</head> +<body dropzone="copy string:text/uri-list" ondrop="dropIt(event)"> +<p> + <video draggable="true" ondragstart="start(event)" controls="true"/> + <script> + var video = document.querySelector('video'); + video.src = getVideoURI('/media/movie_5'); + </script> +</p> +<p>Drag video and drop it somewhere on the page. Dragged frame should be copied to the canvas below and you should see word PASS once you drop video.</p> +<p> + <canvas width="640" height="360">Canvas</canvas> +</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/microdata/000.html b/testing/web-platform/tests/html/editing/dnd/microdata/000.html new file mode 100644 index 0000000000..b6e641d08f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/000.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<title>drag & drop - no microdata for no itemscope</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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items collection'; } + if( md.items.length != 0 ) { return 'unexpected items found'; } + return ''; +} + +</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/microdata/001.html b/testing/web-platform/tests/html/editing/dnd/microdata/001.html new file mode 100644 index 0000000000..3f13565868 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/001.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<title>drag & drop - microdata for non looping simple drop</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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.appendChild( makeEl('meta',{itemprop:'foo',content:'test'}) ); + orange.appendChild( makeEl('audio',{itemprop:'bar',src:'test'},'fail') ); + orange.appendChild( makeEl('embed',{itemprop:'foo',src:'test'}) ); + orange.appendChild( makeEl('iframe',{itemprop:'bar',src:'test'},'fail') ); + orange.appendChild( makeEl('img',{itemprop:'foo',src:'test'}) ); + orange.appendChild( makeEl('source',{itemprop:'bar',src:'test'}) ); + orange.appendChild( makeEl('track',{itemprop:'foo',src:'test'}) ); + orange.appendChild( makeEl('video',{itemprop:'bar',src:'test'},'fail') ); + orange.appendChild( makeEl('a',{itemprop:'foo',href:'test'},'fail') ); + orange.appendChild( makeEl('area',{itemprop:'bar',href:'test'}) ); + orange.appendChild( makeEl('link',{itemprop:'foo',href:'test'}) ); + orange.appendChild( makeEl('object',{itemprop:'bar',data:'test'},'fail') ); + orange.appendChild( makeEl('time',{itemprop:'foo'},'fail') ); + orange.appendChild( makeEl('time',{itemprop:'baz',datetime:'test'},'fail') ); + orange.appendChild( makeEl('div',{itemprop:'baz'},'test') ); + orange.appendChild( makeEl('madeuponthespot',{itemprop:'foo'},'test') ); + orange.appendChild( makeEl('madeuponthespot',{itemprop:'foo',content:'test',src:'test',href:'test',data:'test',datetime:'test',value:'test'},'test') ); + orange.appendChild( makeEl('input',{itemprop:'foo',value:'test'},'test') ); + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items || md.items.length != 1 ) { return 'no items'; } + if( !md.items[0].properties ) { return 'no properties'; } + if( !md.items[0].properties.foo ) { return 'no properties.foo'; } + if( !md.items[0].properties.bar ) { return 'no properties.bar'; } + if( !md.items[0].properties.baz ) { return 'no properties.baz'; } + if( md.items[0].properties.foo.length != 10 ) { return 'properties.foo length '+md.items[0].properties.foo.length+' instead of 10'; } + if( md.items[0].properties.bar.length != 6 ) { return 'properties.bar length '+md.items[0].properties.bar.length+' instead of 6'; } + if( md.items[0].properties.baz.length != 2 ) { return 'properties.baz length '+md.items[0].properties.baz.length+' instead of 2'; } + for( i = 0; i < 10; i++ ) { + if( md.items[0].properties.foo[i] != orange.properties.namedItem('foo').getValues()[i] ) { return 'properties.foo['+i+'] <i>'+md.items[0].properties.foo[i]+'</i> instead of <i>'+orange.properties.namedItem('foo').getValues()[i]+'</i>'; } + } + for( i = 0; i < 6; i++ ) { + if( md.items[0].properties.bar[i] != orange.properties.namedItem('bar').getValues()[i] ) { return 'properties.bar['+i+'] <i>'+md.items[0].properties.bar[i]+'</i> instead of <i>'+orange.properties.namedItem('bar').getValues()[i]+'</i>'; } + } + for( i = 0; i < 2; i++ ) { + if( md.items[0].properties.baz[i] != orange.properties.namedItem('baz').getValues()[i] ) { return 'properties.baz['+i+'] <i>'+md.items[0].properties.baz[i]+'</i> instead of <i>'+orange.properties.namedItem('baz').getValues()[i]+'</i>'; } + } + return ''; +} + +</script> + +<div draggable='true' itemscope></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/microdata/002.html b/testing/web-platform/tests/html/editing/dnd/microdata/002.html new file mode 100644 index 0000000000..4e9a5e6de1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/002.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<title>drag & drop - microdata with itemref</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div *, span { + 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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.parentNode.insertBefore( makeEl('span',{itemprop:'foo',id:'id1'},'dummytext1 '), orange ); + orange.parentNode.appendChild( makeEl('span',{itemprop:'bar',id:'id2'},'dummytext2 ') ); + orange.parentNode.appendChild( makeEl('span',{itemprop:'foo',id:'id3'},'dummytext3 ') ); + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items || md.items.length != 1 ) { return 'no items'; } + if( !md.items[0].properties ) { return 'no properties'; } + if( !md.items[0].properties.foo ) { return 'no properties.foo'; } + if( !md.items[0].properties.bar ) { return 'no properties.bar'; } + if( md.items[0].properties.foo.length != 2 ) { return 'properties.foo length '+md.items[0].properties.foo.length+' instead of 2'; } + if( md.items[0].properties.bar.length != 1 ) { return 'properties.bar length '+md.items[0].properties.bar.length+' instead of 1'; } + for( i = 0; i < 2; i++ ) { + if( md.items[0].properties.foo[i] != orange.properties.namedItem('foo').getValues()[i] ) { return 'properties.foo['+i+'] <i>'+md.items[0].properties.foo[i]+'</i> instead of <i>'+orange.properties.namedItem('foo').getValues()[i]+'</i>'; } + } + if( md.items[0].properties.bar[0] != orange.properties.namedItem('bar').getValues()[0] ) { return 'properties.bar[0] <i>'+md.items[0].properties.bar[i]+'</i> instead of <i>'+orange.properties.namedItem('bar').getValues()[0]+'</i>'; } + return ''; +} + +</script> + +<div draggable='true' itemscope itemref='id3 id2 id1'></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/microdata/003.html b/testing/web-platform/tests/html/editing/dnd/microdata/003.html new file mode 100644 index 0000000000..1bd0ced463 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/003.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<title>drag & drop - microdata changes after dragstart</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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.appendChild( makeEl('meta',{itemprop:'foo',content:'test'}) ); + orange.appendChild( makeEl('audio',{itemprop:'bar',src:'test'},'fail') ); + orange.appendChild( makeEl('embed',{itemprop:'foo',src:'test'}) ); + orange.appendChild( makeEl('iframe',{itemprop:'bar',src:'test'},'fail') ); + orange.appendChild( makeEl('img',{itemprop:'foo',src:'test'}) ); + orange.appendChild( makeEl('source',{itemprop:'bar',src:'test'}) ); + orange.appendChild( makeEl('track',{itemprop:'foo',src:'test'}) ); + orange.appendChild( makeEl('video',{itemprop:'bar',src:'test'},'fail') ); + orange.appendChild( makeEl('a',{itemprop:'foo',href:'test'},'fail') ); + orange.appendChild( makeEl('area',{itemprop:'bar',href:'test'}) ); + orange.appendChild( makeEl('link',{itemprop:'foo',href:'test'}) ); + orange.appendChild( makeEl('object',{itemprop:'bar',data:'test'},'fail') ); + orange.appendChild( makeEl('time',{itemprop:'foo'},'fail') ); + orange.appendChild( makeEl('time',{itemprop:'baz',datetime:'test'},'fail') ); + orange.appendChild( makeEl('div',{itemprop:'baz'},'test') ); + orange.appendChild( makeEl('madeuponthespot',{itemprop:'foo'},'test') ); + orange.appendChild( makeEl('madeuponthespot',{itemprop:'foo',content:'test',src:'test',href:'test',data:'test',datetime:'test',value:'test'},'test') ); + orange.appendChild( makeEl('input',{itemprop:'foo',value:'test'},'test') ); + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + //microdata should be stored and reused after the dragstart event + //removing the item should not cause the microdata tohave disappeared when the drop event fires + this.itemScope = false; + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err, md = e.dataTransfer.getData('application/microdata+json'); + orange.itemScope = true; + if( err = checkprops(md) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items || md.items.length != 1 ) { return 'no items'; } + if( !md.items[0].properties ) { return 'no properties'; } + if( !md.items[0].properties.foo ) { return 'no properties.foo'; } + if( !md.items[0].properties.bar ) { return 'no properties.bar'; } + if( !md.items[0].properties.baz ) { return 'no properties.baz'; } + if( md.items[0].properties.foo.length != 10 ) { return 'properties.foo length '+md.items[0].properties.foo.length+' instead of 10'; } + if( md.items[0].properties.bar.length != 6 ) { return 'properties.bar length '+md.items[0].properties.bar.length+' instead of 6'; } + if( md.items[0].properties.baz.length != 2 ) { return 'properties.baz length '+md.items[0].properties.baz.length+' instead of 2'; } + for( i = 0; i < 10; i++ ) { + if( md.items[0].properties.foo[i] != orange.properties.namedItem('foo').getValues()[i] ) { return 'properties.foo['+i+'] <i>'+md.items[0].properties.foo[i]+'</i> instead of <i>'+orange.properties.namedItem('foo').getValues()[i]+'</i>'; } + } + for( i = 0; i < 6; i++ ) { + if( md.items[0].properties.bar[i] != orange.properties.namedItem('bar').getValues()[i] ) { return 'properties.bar['+i+'] <i>'+md.items[0].properties.bar[i]+'</i> instead of <i>'+orange.properties.namedItem('bar').getValues()[i]+'</i>'; } + } + for( i = 0; i < 2; i++ ) { + if( md.items[0].properties.baz[i] != orange.properties.namedItem('baz').getValues()[i] ) { return 'properties.baz['+i+'] <i>'+md.items[0].properties.baz[i]+'</i> instead of <i>'+orange.properties.namedItem('baz').getValues()[i]+'</i>'; } + } + return ''; +} + +</script> + +<div draggable='true' itemscope></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/microdata/004.html b/testing/web-platform/tests/html/editing/dnd/microdata/004.html new file mode 100644 index 0000000000..7ed821e54f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/004.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<title>drag & drop - microdata with nested item as property</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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.appendChild( makeEl('div',{itemprop:'foo',itemscope:'itemscope'},'') ); + orange.appendChild( makeEl('div',{itemprop:'foo',itemscope:'itemscope'},'') ); + orange.lastChild.appendChild( makeEl('div',{itemprop:'bar'},'test') ); + orange.appendChild( makeEl('div',{itemprop:'bar',itemscope:'itemscope'},'') ); + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 1 ) { return md.items.length+' items instead of 1'; } + if( !md.items[0].properties ) { return 'no properties'; } + if( !md.items[0].properties.foo ) { return 'no properties.foo'; } + if( !md.items[0].properties.bar ) { return 'no properties.bar'; } + if( md.items[0].properties.foo.length != 2 ) { return 'properties.foo length '+md.items[0].properties.foo.length+' instead of 2'; } + if( md.items[0].properties.bar.length != 1 ) { return 'properties.bar length '+md.items[0].properties.bar.length+' instead of 1'; } + + if( !md.items[0].properties.foo[0] ) { return 'properties.foo[0] <i>'+md.items[0].properties.foo[0]+'</i> instead of <i>{properties:{}}</i>'; } + if( !md.items[0].properties.foo[0].properties ) { return 'properties.foo[0].properties <i>'+md.items[0].properties.foo[0].properties+'</i> instead of <i>{}</i>'; } + + if( !md.items[0].properties.foo[1] ) { return 'properties.foo[1] <i>'+md.items[0].properties.foo[1]+'</i> instead of <i>{properties:{bar:[test]}}</i>'; } + if( !md.items[0].properties.foo[1].properties ) { return 'properties.foo[1].properties <i>'+md.items[0].properties.foo[1].properties+'</i> instead of <i>{bar:[test]}</i>'; } + if( !md.items[0].properties.foo[1].properties.bar ) { return 'properties.foo[1].properties.bar <i>'+md.items[0].properties.foo[1].properties.bar+'</i> instead of <i>[test]</i>'; } + if( !md.items[0].properties.foo[1].properties.bar.length ) { return 'properties.foo[1].properties.bar.length <i>'+md.items[0].properties.foo[1].properties.bar.length+'</i> instead of 1'; } + if( md.items[0].properties.foo[1].properties.bar[0] != 'test') { return 'properties.foo[1].properties.bar[0] <i>'+md.items[0].properties.foo[1].properties.bar[0]+'</i> instead of <i>test</i>'; } + + if( !md.items[0].properties.bar[0] ) { return 'properties.bar[0] <i>'+md.items[0].properties.bar[0]+'</i> instead of <i>{properties:{}}</i>'; } + if( !md.items[0].properties.bar[0].properties ) { return 'properties.bar[0].properties <i>'+md.items[0].properties.bar[0].properties+'</i> instead of <i>{}</i>'; } + return ''; +} + +</script> + +<div draggable='true' itemscope></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/microdata/005.html b/testing/web-platform/tests/html/editing/dnd/microdata/005.html new file mode 100644 index 0000000000..ae83f6d5f5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/005.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<title>drag & drop - microdata with nested item as non-property</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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.appendChild( makeEl('div',{itemprop:'foo',itemscope:'itemscope'},'') ); + orange.appendChild( makeEl('div',{itemscope:'itemscope'},'') ); + orange.lastChild.appendChild( makeEl('div',{itemprop:'bar'},'test') ); + orange.appendChild( makeEl('div',{itemprop:'bar',itemscope:'itemscope'},'') ); + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + // http://dev.w3.org/html5/md/#drag-and-drop + //"The user agent must take the list of dragged nodes and extract the microdata from those nodes into a JSON form" + // http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model + //"the list of dragged nodes contains only the source node, if any." + //nested items should only be in the items list if they are in a dragged *selection* + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 1 ) { return md.items.length+' items instead of 1'; } + if( !md.items[0].properties ) { return 'no properties'; } + if( !md.items[0].properties.foo ) { return 'no properties.foo'; } + if( !md.items[0].properties.bar ) { return 'no properties.bar'; } + if( md.items[0].properties.foo.length != 1 ) { return 'properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } + if( md.items[0].properties.bar.length != 1 ) { return 'properties.bar length '+md.items[0].properties.bar.length+' instead of 1'; } + + if( !md.items[0].properties.foo[0] ) { return 'properties.foo[0] <i>'+md.items[0].properties.foo[0]+'</i> instead of <i>{properties:{}}</i>'; } + if( !md.items[0].properties.foo[0].properties ) { return 'properties.foo[0].properties <i>'+md.items[0].properties.foo[0].properties+'</i> instead of <i>{}</i>'; } + + if( !md.items[0].properties.bar[0] ) { return 'properties.bar[0] <i>'+md.items[0].properties.bar[0]+'</i> instead of <i>{properties:{}}</i>'; } + if( !md.items[0].properties.bar[0].properties ) { return 'properties.bar[0].properties <i>'+md.items[0].properties.bar[0].properties+'</i> instead of <i>{}</i>'; } + return ''; +} + +</script> + +<div draggable='true' itemscope></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/microdata/006.html b/testing/web-platform/tests/html/editing/dnd/microdata/006.html new file mode 100644 index 0000000000..b9e2ba229e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/006.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<title>drag & drop - microdata with type and id</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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.appendChild( makeEl('div',{itemprop:'foo',itemscope:'itemscope',itemtype:'http://example.com/',id:'id2',itemid:'http://example.com/bar'},'') ); + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 1 ) { return md.items.length+' items instead of 1'; } + if( md.items[0].type != orange.getAttribute('itemtype') ) { return 'items[0].type <i>'+md.items[0].type+'</i> instead of <i>'+orange.getAttribute('itemtype')+'</i>'; } + if( md.items[0].id != orange.getAttribute('itemid') ) { return 'items[0].id <i>'+md.items[0].id+'</i> instead of <i>'+orange.getAttribute('itemid')+'</i>'; } + if( !md.items[0].properties ) { return 'no properties'; } + if( !md.items[0].properties.foo ) { return 'no properties.foo'; } + if( md.items[0].properties.foo.length != 1 ) { return 'properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } + if( !md.items[0].properties.foo[0] ) { return 'properties.foo[0] <i>'+md.items[0].properties.foo[0]+'</i> instead of <i>{...}</i>'; } + if( md.items[0].properties.foo[0].type != orange.firstChild.getAttribute('itemtype') ) { return 'items[0].properties.foo[0].type <i>'+md.items[0].properties.foo[0].type+'</i> instead of <i>'+orange.firstChild.getAttribute('itemtype')+'</i>'; } + if( md.items[0].properties.foo[0].id != orange.firstChild.getAttribute('itemid') ) { return 'items[0].properties.foo[0].id <i>'+md.items[0].properties.foo[0].id+'</i> instead of <i>'+orange.firstChild.getAttribute('itemid')+'</i>'; } + if( !md.items[0].properties.foo[0].properties ) { return 'properties.foo[0].properties <i>'+md.items[0].properties.foo[0].properties+'</i> instead of <i>{}</i>'; } + return ''; +} + +</script> + +<div draggable='true' itemscope id='id1' itemtype='http://example.org/' itemid='http://example.org/foo'></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/microdata/007.html b/testing/web-platform/tests/html/editing/dnd/microdata/007.html new file mode 100644 index 0000000000..e6eb87d82a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/007.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<title>drag & drop - microdata with multiply named item as property</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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.appendChild( makeEl('div',{itemprop:'foo bar',itemscope:'itemscope'},'') ); + orange.lastChild.appendChild( makeEl('div',{itemprop:'baz'},'test') ); + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 1 ) { return md.items.length+' items instead of 1'; } + if( !md.items[0].properties ) { return 'no properties'; } + if( !md.items[0].properties.foo ) { return 'no properties.foo'; } + if( !md.items[0].properties.bar ) { return 'no properties.bar'; } + if( md.items[0].properties.baz ) { return 'properties.baz should not exist'; } + if( md.items[0].properties.foo.length != 1 ) { return 'properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } + if( md.items[0].properties.bar.length != 1 ) { return 'properties.bar length '+md.items[0].properties.bar.length+' instead of 1'; } + + if( !md.items[0].properties.foo[0] ) { return 'properties.foo[1] <i>'+md.items[0].properties.foo[0]+'</i> instead of <i>{properties:{baz:[test]}}</i>'; } + if( !md.items[0].properties.foo[0].properties ) { return 'properties.foo[0].properties <i>'+md.items[0].properties.foo[0].properties+'</i> instead of <i>{baz:[test]}</i>'; } + if( !md.items[0].properties.foo[0].properties.baz ) { return 'properties.foo[0].properties.baz <i>'+md.items[0].properties.foo[0].properties.baz+'</i> instead of <i>[test]</i>'; } + if( !md.items[0].properties.foo[0].properties.baz.length ) { return 'properties.foo[0].properties.baz.length <i>'+md.items[0].properties.foo[0].properties.baz.length+'</i> instead of 1'; } + if( md.items[0].properties.foo[0].properties.baz[0] != 'test') { return 'properties.foo[0].properties.baz[0] <i>'+md.items[0].properties.foo[0].properties.baz[0]+'</i> instead of <i>test</i>'; } + + if( !md.items[0].properties.bar[0] ) { return 'properties.bar[1] <i>'+md.items[0].properties.bar[0]+'</i> instead of <i>{properties:{baz:[test]}}</i>'; } + if( !md.items[0].properties.bar[0].properties ) { return 'properties.bar[0].properties <i>'+md.items[0].properties.bar[0].properties+'</i> instead of <i>{baz:[test]}</i>'; } + if( !md.items[0].properties.bar[0].properties.baz ) { return 'properties.bar[0].properties.baz <i>'+md.items[0].properties.bar[0].properties.baz+'</i> instead of <i>[test]</i>'; } + if( !md.items[0].properties.bar[0].properties.baz.length ) { return 'properties.bar[0].properties.baz.length <i>'+md.items[0].properties.bar[0].properties.baz.length+'</i> instead of 1'; } + if( md.items[0].properties.bar[0].properties.baz[0] != 'test') { return 'properties.bar[0].properties.baz[0] <i>'+md.items[0].properties.bar[0].properties.baz[0]+'</i> instead of <i>test</i>'; } + + return ''; +} + +</script> + +<div draggable='true' itemscope></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/microdata/008.html b/testing/web-platform/tests/html/editing/dnd/microdata/008.html new file mode 100644 index 0000000000..d4cd797817 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/008.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<title>drag & drop - no microdata for selection with no items</title> +<style> + body > div { + height: 100px; + width: 200px; + background-color: fuchsia; + position: absolute; + top: 8px; + left: 8px; + } + span span { + display: none; + } + body > div + div { + background-color: navy; + top: 116px; + } + body > div + div + div { + background-color: orange; + top: 224px; + } + p:first-of-type { + margin-top: 350px; + } +</style> + +<script> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[2]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.previousSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items collection'; } + if( md.items.length != 0 ) { return 'unexpected items found'; } + return ''; +} + +</script> + +<div></div><div></div><div>01<span>23</span>45<span>67</span>89</div> + +<p>Use your pointing device to select the text substring "12345678" above, drag the selection upwards 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/microdata/009.html b/testing/web-platform/tests/html/editing/dnd/microdata/009.html new file mode 100644 index 0000000000..637cabe017 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/009.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<title>drag & drop - microdata for selection surrounding one item</title> +<style> + body > div { + height: 100px; + width: 200px; + background-color: fuchsia; + position: absolute; + top: 8px; + left: 8px; + } + span * { + display: none; + } + body > div + div { + background-color: navy; + top: 116px; + } + body > div + div + div { + background-color: orange; + top: 224px; + } + p:first-of-type { + margin-top: 350px; + } +</style> + +<script> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[2]; + orange.childNodes[1].appendChild( makeEl('span',{itemprop:'foo'},'test') ); + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.previousSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items || md.items.length != 1 ) { return 'no items'; } + if( !md.items[0].properties ) { return 'no properties'; } + if( !md.items[0].properties.foo ) { return 'no properties.foo'; } + if( md.items[0].properties.foo.length != 1 ) { return 'properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } + if( md.items[0].properties.foo[0] != orange.childNodes[1].properties.namedItem('foo').getValues()[0] ) { return 'properties.foo[0] <i>'+md.items[0].properties.foo[0]+'</i> instead of <i>'+orange.childNodes[1].properties.namedItem('foo').getValues()[0]+'</i>'; } + return ''; +} + +</script> + +<div></div><div></div><div>01<span itemscope>23</span>45<span>67</span>89</div> + +<p>Use your pointing device to select the text substring "12345678" above, drag the selection upwards 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/microdata/010.html b/testing/web-platform/tests/html/editing/dnd/microdata/010.html new file mode 100644 index 0000000000..53a6321a3e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/010.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<title>drag & drop - microdata for selection surrounding multiple items</title> +<style> + body > div { + height: 100px; + width: 200px; + background-color: fuchsia; + position: absolute; + top: 8px; + left: 8px; + } + span * { + display: none; + } + body > div + div { + background-color: navy; + top: 116px; + } + body > div + div + div { + background-color: orange; + top: 224px; + } + p:first-of-type { + margin-top: 350px; + } +</style> + +<script> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[2]; + orange.childNodes[1].appendChild( makeEl('span',{itemprop:'foo'},'test') ); + orange.childNodes[3].appendChild( makeEl('span',{itemprop:'bar'},'test') ); + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.previousSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 2 ) { return md.items.length+' items instead of 2'; } + if( !md.items[0].properties ) { return 'no items[0].properties'; } + if( !md.items[0].properties.foo ) { return 'no items[0].properties.foo'; } + if( md.items[0].properties.foo.length != 1 ) { return 'items[0].properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } + if( md.items[0].properties.foo[0] != orange.childNodes[1].properties.namedItem('foo').getValues()[0] ) { return 'items[0].properties.foo[0] <i>'+md.items[0].properties.foo[0]+'</i> instead of <i>'+orange.childNodes[1].properties.namedItem('foo').getValues()[0]+'</i>'; } + if( !md.items[1].properties ) { return 'no items[1].properties'; } + if( !md.items[1].properties.bar ) { return 'no items[1].properties.bar'; } + if( md.items[1].properties.bar.length != 1 ) { return 'items[1].properties.bar length '+md.items[1].properties.bar.length+' instead of 1'; } + if( md.items[1].properties.bar[0] != orange.childNodes[1].properties.namedItem('foo').getValues()[0] ) { return 'items[1].properties.bar[0] <i>'+md.items[1].properties.bar[0]+'</i> instead of <i>'+orange.childNodes[1].properties.namedItem('foo').getValues()[0]+'</i>'; } + return ''; +} + +</script> + +<div></div><div></div><div>01<span itemscope>23</span>45<span itemscope>67</span>89</div> + +<p>Use your pointing device to select the text substring "12345678" above, drag the selection upwards 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/microdata/011.html b/testing/web-platform/tests/html/editing/dnd/microdata/011.html new file mode 100644 index 0000000000..819e5ceab0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/011.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<title>drag & drop - microdata for selection partially intersecting multiple items</title> +<style> + body > div { + height: 100px; + width: 200px; + background-color: fuchsia; + position: absolute; + top: 8px; + left: 8px; + } + span * { + display: none; + } + body > div + div { + background-color: navy; + top: 116px; + } + body > div + div + div { + background-color: orange; + top: 224px; + } + p:first-of-type { + margin-top: 350px; + } +</style> + +<script> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[2]; + orange.childNodes[1].appendChild( makeEl('span',{itemprop:'foo'},'test') ); + orange.childNodes[3].appendChild( makeEl('span',{itemprop:'bar'},'test') ); + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.previousSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + // http://dev.w3.org/html5/spec/dnd.html#list-of-dragged-nodes + //"If it is a selection that is being dragged, then the list of dragged nodes contains, in tree order, every node that is partially or completely included in the selection (including all their ancestors)." + //given this "ancestors" situation, what is to stop every item in the body from being included? oversight perhaps? tests 18-20 cover this more extensively + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 2 ) { return md.items.length+' items instead of 2'; } + if( !md.items[0].properties ) { return 'no items[0].properties'; } + if( !md.items[0].properties.foo ) { return 'no items[0].properties.foo'; } + if( md.items[0].properties.foo.length != 1 ) { return 'items[0].properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } + if( md.items[0].properties.foo[0] != orange.childNodes[1].properties.namedItem('foo').getValues()[0] ) { return 'items[0].properties.foo[0] <i>'+md.items[0].properties.foo[0]+'</i> instead of <i>'+orange.childNodes[1].properties.namedItem('foo').getValues()[0]+'</i>'; } + if( !md.items[1].properties ) { return 'no items[1].properties'; } + if( !md.items[1].properties.bar ) { return 'no items[1].properties.bar'; } + if( md.items[1].properties.bar.length != 1 ) { return 'items[1].properties.bar length '+md.items[1].properties.bar.length+' instead of 1'; } + if( md.items[1].properties.bar[0] != orange.childNodes[1].properties.namedItem('foo').getValues()[0] ) { return 'items[1].properties.bar[0] <i>'+md.items[1].properties.bar[0]+'</i> instead of <i>'+orange.childNodes[1].properties.namedItem('foo').getValues()[0]+'</i>'; } + return ''; +} + +</script> + +<div></div><div></div><div>01<span itemscope>23</span>45<span itemscope>67</span>89</div> + +<p>Use your pointing device to select the text substring "3456" above, drag the selection upwards 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/microdata/012.html b/testing/web-platform/tests/html/editing/dnd/microdata/012.html new file mode 100644 index 0000000000..307d610e90 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/012.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<title>drag & drop - microdata for selection surrounding nested property items</title> +<style> + body > div { + height: 100px; + width: 200px; + background-color: fuchsia; + position: absolute; + top: 8px; + left: 8px; + } + span * { + display: none; + } + body > div + div { + background-color: navy; + top: 116px; + } + body > div + div + div { + background-color: orange; + top: 224px; + } + p:first-of-type { + margin-top: 350px; + } +</style> + +<script> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[2]; + orange.childNodes[1].appendChild( makeEl('span',{itemscope:'itemscope',itemprop:'foo'},'test') ); + orange.childNodes[1].lastChild.appendChild( makeEl('span',{itemprop:'bar'},'test') ); + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.previousSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + //items should be represented at the top level only if they do not have the itemprop attribute + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 1 ) { return md.items.length+' items instead of 1'; } + if( !md.items[0].properties ) { return 'no items[0].properties'; } + if( !md.items[0].properties.foo ) { return 'no items[0].properties.foo'; } + if( md.items[0].properties.foo.length != 1 ) { return 'items[0].properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } + if( !md.items[0].properties.foo[0].properties ) { return 'items[1].properties.foo[0].properties <i>'+md.items[0].properties.foo[0].properties+'</i> instead of <i>{bar:[test]}</i>'; } + if( !md.items[0].properties.foo[0].properties.bar ) { return 'items[1].properties.foo[0].properties.bar <i>'+md.items[0].properties.foo[0].properties.bar+'</i> instead of <i>[test]</i>'; } + if( md.items[0].properties.foo[0].properties.bar.length != 1 ) { return 'items[1].properties.foo[0].properties.bar.length <i>'+md.items[0].properties.foo[0].properties.bar.length+'</i> instead of 1'; } + if( md.items[0].properties.foo[0].properties.bar[0] != 'test') { return 'items[1].properties.foo[0].properties.bar[0] <i>'+md.items[0].properties.foo[0].properties.bar[0]+'</i> instead of <i>test</i>'; } + return ''; +} + +</script> + +<div></div><div></div><div>01<span itemscope>23</span>45<span itemscope itemprop="baz">67</span>89</div> + +<p>Use your pointing device to select the text substring "12345678" above, drag the selection upwards 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/microdata/013.html b/testing/web-platform/tests/html/editing/dnd/microdata/013.html new file mode 100644 index 0000000000..000a9d7f05 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/013.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<title>drag & drop - microdata for selection surrounding nested non-property items</title> +<style> + body > div { + height: 100px; + width: 200px; + background-color: fuchsia; + position: absolute; + top: 8px; + left: 8px; + } + span * { + display: none; + } + body > div + div { + background-color: navy; + top: 116px; + } + body > div + div + div { + background-color: orange; + top: 224px; + } + p:first-of-type { + margin-top: 350px; + } +</style> + +<script> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[2]; + orange.childNodes[1].appendChild( makeEl('span',{itemscope:'itemscope'},'test') ); + orange.childNodes[1].lastChild.appendChild( makeEl('span',{itemprop:'bar'},'test') ); + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.previousSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + //*all* items should be represented at the top level, even if they are nested + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 2 ) { return md.items.length+' items instead of 2'; } + if( !md.items[0].properties ) { return 'no items[0].properties'; } + if( md.items[0].properties.bar ) { return 'unexpected items[0].properties.bar'; } + + if( !md.items[1].properties ) { return 'no items[1].properties'; } + if( !md.items[1].properties.bar ) { return 'no items[1].properties.bar'; } + if( md.items[1].properties.bar.length != 1 ) { return 'items[1].properties.bar length '+md.items[1].properties.bar.length+' instead of 1'; } + if( md.items[1].properties.bar[0] != 'test' ) { return 'items[1].properties.bar[0] <i>'+md.items[1].properties.bar[0]+'</i> instead of <i>test</i>'; } + return ''; +} + +</script> + +<div></div><div></div><div>01<span itemscope>23</span>45<span>67</span>89</div> + +<p>Use your pointing device to select the text substring "12345678" above, drag the selection upwards 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/microdata/014.html b/testing/web-platform/tests/html/editing/dnd/microdata/014.html new file mode 100644 index 0000000000..785c059a31 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/014.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<title>drag & drop - microdata with sibling itemref loop</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div *, span { + 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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + // http://dev.w3.org/html5/md/#extracting-json + //"check if the element is a top-level microdata item, and if it is" + //as it has itemprop, it is not a top-level item, and should be ignored + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 0 ) { return md.items.length+' items instead of 0'; } + return ''; +} + +</script> + +<div draggable='true' itemscope itemprop='foo' id='id1' itemref='id2'></div><div id='id2' itemprop='bar' itemscope itemref='id1'></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/microdata/015.html b/testing/web-platform/tests/html/editing/dnd/microdata/015.html new file mode 100644 index 0000000000..36f2643293 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/015.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<title>drag & drop - microdata with parent itemref loop</title> +<style> + blockquote > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + blockquote > div *, span { + display: none; + } + blockquote > div + div { + background-color: navy; + left: 250px; + } + blockquote > div + div + div { + background-color: fuchsia; + left: 500px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + // http://dev.w3.org/html5/md/#extracting-json + //"check if the element is a top-level microdata item, and if it is" + //as it has itemprop, it is not a top-level item, and should be ignored + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 0 ) { return md.items.length+' items instead of 0'; } + return ''; +} + +</script> + +<blockquote id='id1' itemprop='bar' itemscope> +<div draggable='true' itemscope itemprop='foo' itemref='id1'></div><div></div><div></div> +</blockquote> + +<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/microdata/016.html b/testing/web-platform/tests/html/editing/dnd/microdata/016.html new file mode 100644 index 0000000000..153098bf89 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/016.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>drag & drop - microdata with nested sibling itemref loop</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div *, span { + 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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + // http://dev.w3.org/html5/md/#extracting-json + //"If value is an item, then: If value is in memory, then let value be the string "ERROR"." + /* +Loop detection happens only after the loop has been created, at which point it returns a property value +of "ERROR" instead of the value which has already been encountered on the stringifying stack. +Should create the following construct: +{ + items:[ + { + properties:{ + foo:[ + { + properties:{ + bar:[ + { + properties:{ + foo:[ + "ERROR" + ] + } + } + ] + } + } + ], + bar:[ + { + properties:{ + foo:[ + { + properties:{ + bar:[ + "ERROR" + ] + } + } + ] + } + } + ] + } + } + ] +} + */ + + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 1 ) { return md.items.length+' items instead of 1'; } + if( !md.items[0].properties ) { return 'no items[0].properties'; } + if( !md.items[0].properties.foo ) { return 'no items[0].properties.foo'; } + if( md.items[0].properties.foo.length != 1 ) { return 'items[0].properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } + if( !md.items[0].properties.foo[0].properties ) { return 'items[1].properties.foo[0].properties <i>'+md.items[0].properties.foo[0].properties+'</i> instead of object'; } + if( !md.items[0].properties.foo[0].properties.bar ) { return 'items[1].properties.foo[0].properties.bar <i>'+md.items[0].properties.foo[0].properties.bar+'</i> instead of array'; } + if( md.items[0].properties.foo[0].properties.bar.length != 1 ) { return 'items[1].properties.foo[0].properties.bar.length <i>'+md.items[0].properties.foo[0].properties.bar.length+'</i> instead of 1'; } + if( !md.items[0].properties.foo[0].properties.bar[0].properties ) { return 'items[1].properties.foo[0].properties.bar[0].properties <i>'+md.properties.foo[0].properties.bar[0].properties+'</i> instead of object'; } + if( !md.items[0].properties.foo[0].properties.bar[0].properties.foo ) { return 'items[1].properties.foo[0].properties.bar[0].properties.foo <i>'+md.items[0].properties.foo[0].properties.bar[0].properties.foo+'</i> instead of array'; } + if( md.items[0].properties.foo[0].properties.bar[0].properties.foo.length != 1 ) { return 'items[1].properties.foo[0].properties.bar[0].properties.foo.length <i>'+md.items[0].properties.foo[0].properties.bar[0].properties.foo.length+'</i> instead of 1'; } + if( md.items[0].properties.foo[0].properties.bar[0].properties.foo[0] != 'ERROR' ) { return 'items[1].properties.foo[0].properties.bar[0].properties.foo.length <i>'+md.items[0].properties.foo[0].properties.bar[0].properties.foo[0]+'</i> instead of <i>ERROR</a>'; } + + if( !md.items[0].properties.bar ) { return 'no items[0].properties.bar'; } + if( md.items[0].properties.bar.length != 1 ) { return 'items[0].properties.bar length '+md.items[0].properties.bar.length+' instead of 1'; } + if( !md.items[0].properties.bar[0].properties ) { return 'items[1].properties.bar[0].properties <i>'+md.items[0].properties.bar[0].properties+'</i> instead of object'; } + if( !md.items[0].properties.bar[0].properties.foo ) { return 'items[1].properties.bar[0].properties.foo <i>'+md.items[0].properties.bar[0].properties.foo+'</i> instead of array'; } + if( md.items[0].properties.bar[0].properties.foo.length != 1 ) { return 'items[1].properties.bar[0].properties.foo.length <i>'+md.items[0].properties.bar[0].properties.foo.length+'</i> instead of 1'; } + if( !md.items[0].properties.bar[0].properties.foo[0].properties ) { return 'items[1].properties.bar[0].properties.foo[0].properties <i>'+md.properties.bar[0].properties.foo[0].properties+'</i> instead of object'; } + if( !md.items[0].properties.bar[0].properties.foo[0].properties.bar ) { return 'items[1].properties.bar[0].properties.foo[0].properties.bar <i>'+md.items[0].properties.bar[0].properties.foo[0].properties.bar+'</i> instead of array'; } + if( md.items[0].properties.bar[0].properties.foo[0].properties.bar.length != 1 ) { return 'items[1].properties.bar[0].properties.foo[0].properties.bar.length <i>'+md.items[0].properties.bar[0].properties.foo[0].properties.bar.length+'</i> instead of 1'; } + if( md.items[0].properties.bar[0].properties.foo[0].properties.bar[0] != 'ERROR' ) { return 'items[1].properties.bar[0].properties.foo[0].properties.bar.length <i>'+md.items[0].properties.bar[0].properties.foo[0].properties.bar[0]+'</i> instead of <i>ERROR</a>'; } + return ''; +} + +</script> + +<div draggable='true' itemscope><div itemscope itemprop='foo' id='id1' itemref='id2'></div><div itemscope itemprop='bar' id='id2' itemref='id1'></div></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/microdata/017.html b/testing/web-platform/tests/html/editing/dnd/microdata/017.html new file mode 100644 index 0000000000..dab270e643 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/017.html @@ -0,0 +1,137 @@ +<!DOCTYPE html> +<title>drag & drop - microdata with nested parent itemref loop</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div *, span { + 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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + // http://dev.w3.org/html5/md/#extracting-json + //"If value is an item, then: If value is in memory, then let value be the string "ERROR"." + /* +Loop detection happens only after the loop has been created, at which point it returns a property value +of "ERROR" instead of the value which has already been encountered on the stringifying stack. +Should create the following construct: +{ + items:[ + { + properties:{ + foo:[ + { + properties:{ + bar:[ + { + properties:{ + foo:[ + "ERROR" + ] + } + } + ] + } + } + ] + } + } + ] +} + */ + + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 1 ) { return md.items.length+' items instead of 1'; } + if( !md.items[0].properties ) { return 'no items[0].properties'; } + if( !md.items[0].properties.foo ) { return 'no items[0].properties.foo'; } + if( md.items[0].properties.foo.length != 1 ) { return 'items[0].properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } + if( !md.items[0].properties.foo[0].properties ) { return 'items[1].properties.foo[0].properties <i>'+md.items[0].properties.foo[0].properties+'</i> instead of object'; } + if( !md.items[0].properties.foo[0].properties.bar ) { return 'items[1].properties.foo[0].properties.bar <i>'+md.items[0].properties.foo[0].properties.bar+'</i> instead of array'; } + if( md.items[0].properties.foo[0].properties.bar.length != 1 ) { return 'items[1].properties.foo[0].properties.bar.length <i>'+md.items[0].properties.foo[0].properties.bar.length+'</i> instead of 1'; } + if( !md.items[0].properties.foo[0].properties.bar[0].properties ) { return 'items[1].properties.foo[0].properties.bar[0].properties <i>'+md.properties.foo[0].properties.bar[0].properties+'</i> instead of object'; } + if( !md.items[0].properties.foo[0].properties.bar[0].properties.foo ) { return 'items[1].properties.foo[0].properties.bar[0].properties.foo <i>'+md.items[0].properties.foo[0].properties.bar[0].properties.foo+'</i> instead of array'; } + if( md.items[0].properties.foo[0].properties.bar[0].properties.foo.length != 1 ) { return 'items[1].properties.foo[0].properties.bar[0].properties.foo.length <i>'+md.items[0].properties.foo[0].properties.bar[0].properties.foo.length+'</i> instead of 1'; } + if( md.items[0].properties.foo[0].properties.bar[0].properties.foo[0] != 'ERROR' ) { return 'items[1].properties.foo[0].properties.bar[0].properties.foo.length <i>'+md.items[0].properties.foo[0].properties.bar[0].properties.foo[0]+'</i> instead of <i>ERROR</a>'; } + return ''; +} + +</script> + +<div draggable='true' itemscope> + <span id='id1' itemprop='foo' itemscope><span itemscope itemprop='bar' itemref='id1'></span></span> +</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/microdata/018.html b/testing/web-platform/tests/html/editing/dnd/microdata/018.html new file mode 100644 index 0000000000..357ba4f0fe --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/018.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<title>drag & drop - microdata for selection partially intersecting a single item</title> +<style> + body > div { + height: 100px; + width: 200px; + background-color: fuchsia; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: navy; + top: 116px; + } + body > div + div + div { + background-color: orange; + top: 224px; + } + p:first-of-type { + margin-top: 350px; + } +</style> + +<script> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[2]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.previousSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + // http://dev.w3.org/html5/spec/dnd.html#list-of-dragged-nodes + //"If it is a selection that is being dragged, then the list of dragged nodes contains, in tree order, every node that is partially or completely included in the selection (including all their ancestors)." + //this test checks that the parent of the text node is included + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 1 ) { return md.items.length+' items instead of 1'; } + if( md.items[0].id != 'http://example.com/item1' ) { return 'items[0].id incorrect'; } + return ''; +} + +</script> + +<div></div><div></div><div itemscope itemid="http://example.com/item1">abc</div> + +<p>Use your pointing device to select the text substring "b" above, drag the selection upwards 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/microdata/019.html b/testing/web-platform/tests/html/editing/dnd/microdata/019.html new file mode 100644 index 0000000000..11525214e2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/019.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<title>drag & drop - microdata for selection partially intersecting nested items</title> +<style> + body > div { + height: 100px; + width: 200px; + background-color: fuchsia; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: navy; + top: 116px; + } + body > div + div + div { + background-color: orange; + top: 224px; + } + p:first-of-type { + margin-top: 350px; + } +</style> + +<script> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[2]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.previousSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + // http://dev.w3.org/html5/spec/dnd.html#list-of-dragged-nodes + //"If it is a selection that is being dragged, then the list of dragged nodes contains, in tree order, every node that is partially or completely included in the selection (including all their ancestors)." + //this test checks that all ancestors of the text node are included + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 2 ) { return md.items.length+' items instead of 2'; } + if( md.items[0].id != 'http://example.com/item1' ) { return 'items[0].id incorrect'; } + if( md.items[1].id != 'http://example.com/item2' ) { return 'items[1].id incorrect'; } + return ''; +} + +</script> + +<div></div><div></div><div itemscope itemid="http://example.com/item1">a<span itemscope itemid="http://example.com/item2">bcd</span>e</div> + +<p>Use your pointing device to select the text substring "d" above, drag the selection upwards 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/microdata/020.html b/testing/web-platform/tests/html/editing/dnd/microdata/020.html new file mode 100644 index 0000000000..33667224ca --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/020.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<title>drag & drop - microdata for selection partially intersecting multiple items but not siblings</title> +<style> + body > div { + height: 100px; + width: 400px; + background-color: fuchsia; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: navy; + top: 116px; + } + body > div + div + div { + background-color: orange; + top: 224px; + } + p:first-of-type { + margin-top: 350px; + } +</style> + +<script> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[2]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.previousSibling.ondragenter = orange.previousSibling.ondragleave = orange.previousSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.previousSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + // http://dev.w3.org/html5/spec/dnd.html#list-of-dragged-nodes + //"If it is a selection that is being dragged, then the list of dragged nodes contains, in tree order, every node that is partially or completely included in the selection (including all their ancestors)." + //this test checks that all ancestors of the selection's end points are included, and all elements enclosed by the selection are included, but no non-selected siblings of ancestors are included + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 5 ) { return md.items.length+' items instead of 5'; } + if( md.items[0].id != 'http://example.com/item1' ) { return 'items[0].id incorrect'; } + if( md.items[1].id != 'http://example.com/item4' ) { return 'items[1].id incorrect'; } + if( md.items[2].id != 'http://example.com/item5' ) { return 'items[2].id incorrect'; } + if( md.items[3].id != 'http://example.com/item6' ) { return 'items[3].id incorrect'; } + if( md.items[4].id != 'http://example.com/item7' ) { return 'items[4].id incorrect'; } + return ''; +} + +</script> + +<div></div><div></div><div itemscope itemid="http://example.com/item1"><span itemscope itemid="http://example.com/item2">ab<span itemscope itemid="http://example.com/item3">cd</span>ef</span><span itemscope itemid="http://example.com/item4">gh<span itemscope itemid="http://example.com/item5">ij</span>kl</span><span itemscope itemid="http://example.com/item6">mn<span itemscope itemid="http://example.com/item7">op</span>qr</span><span itemscope itemid="http://example.com/item8">st<span itemscope itemid="http://example.com/item9">uv</span>wx</span></div> + +<p>Use your pointing device to select the text substring "hijklmnopq" above, drag the selection upwards 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/microdata/021.html b/testing/web-platform/tests/html/editing/dnd/microdata/021.html new file mode 100644 index 0000000000..62e1864bef --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/021.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<title>drag & drop - microdata when addElement is used</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> + +function makeEl(eltype,props,contents) { + var elem = document.createElement(eltype); + for( var i in props ) { + if( props.hasOwnProperty(i) ) { + elem.setAttribute(i,props[i]); + } + } + if( contents ) { + elem.innerHTML = contents; + } + return elem; +} + +var orange, fails = [], doneonce = false; +window.onload = function() { + orange = document.getElementsByTagName('div')[0]; + + orange.appendChild( makeEl('div',{itemprop:'foo'},'test') ); + + orange.ondragstart = function(e) { + e.dataTransfer.addElement(document.getElementById('side1')); + e.dataTransfer.addElement(document.getElementById('side2')); + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + }; + orange.nextSibling.ondragenter = orange.nextSibling.ondragleave = orange.nextSibling.ondragover = + orange.ondrag = orange.ondragend = function(e) { + if( e.type == 'dragover' || e.type == 'dragenter' ) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + if( e.dataTransfer.getData('application/microdata+json') ) { + fails[fails.length] = e.type + ' unexpectedly had microdata (security restriction)'; + } + }; + orange.nextSibling.ondrop = function(e) { + var err; + if( err = checkprops(e.dataTransfer.getData('application/microdata+json')) ) { + fails[fails.length] = e.type + ' ' + err; + } + if( e.type != 'drop' ) { return; } + if( doneonce ) { return; } + doneonce = true; + setTimeout(function () { + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; + fails = []; + }, 200 ); + }; + +}; +function checkprops(md) { + var i; + if( !md ) { return 'no microdata'; } + md = JSON.parse(md); + if( !md.items ) { return 'no items'; } + if( md.items.length != 1 ) { return 'items.length '+md.items.length+' instead of 1'; } + if( !md.items[0].properties ) { return 'no properties'; } + if( !md.items[0].properties.foo ) { return 'no properties.foo'; } + if( md.items[0].properties.bar ) { return 'unexpected properties.bar'; } + if( md.items[0].properties.foo.length != 1 ) { return 'properties.foo length '+md.items[0].properties.foo.length+' instead of 1'; } + if( md.items[0].properties.foo[0] != orange.properties.namedItem('foo').getValues()[0] ) { return 'properties.foo[0] <i>'+md.items[0].properties.foo[0]+'</i> instead of <i>'+orange.properties.namedItem('foo').getValues()[0]+'</i>'; } + return ''; +} + +</script> + +<div draggable='true' itemscope></div><div></div><div></div> +<h4 itemscope id="side1">xxx</h4><h4 itemprop="bar" id="side2">yyy</h4> + +<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/microdata/test b/testing/web-platform/tests/html/editing/dnd/microdata/test new file mode 100644 index 0000000000..42d41d980e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/microdata/test @@ -0,0 +1,2 @@ +<!doctype html> +<!-- The tests in this folder point to this file in e.g. <img src> --> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/001-1.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/001-1.xhtml new file mode 100644 index 0000000000..a059966787 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/001-1.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +html, body + {height:100%;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('body').appendChild(c);} +</script> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false" ondrop="addImage(event)"> +<p>Drop canvas now, it should be copied to this page once you drop it here.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/001.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/001.xhtml new file mode 100644 index 0000000000..2e8a2ca65e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/001.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas cross page drag and drop</title> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png')); + window.location = '001-1.xhtml';} +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern. You should be redirected to the new page and be able to drop it there.</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/navigation/002.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/002.xhtml new file mode 100644 index 0000000000..a3d9f97d04 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/002.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>PNG image cross page drag and drop</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drop-image-now.xhtml'" 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> +<p>Drag circle above. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/003.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/003.xhtml new file mode 100644 index 0000000000..89c53d3812 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/003.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG image cross page drag and drop</title> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drop-image-now.xhtml'" 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="PNG circle"/></p> +<p>Drag circle above. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/004.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/004.xhtml new file mode 100644 index 0000000000..9cd885de34 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/004.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Text input selection cross page drag and drop</title> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drop-now.xhtml'"/></p> +<p>Drag selected text. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/005.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/005.xhtml new file mode 100644 index 0000000000..887ae39318 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/005.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection cross page drag and drop</title> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drop-now.xhtml'">Drag me</p> +<p>Drag selected text. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/006.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/006.xhtml new file mode 100644 index 0000000000..4cb8d3e1c7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/006.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link cross page drag and drop</title> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drop-link-now.xhtml'">Drag me</a></p> +<p>Drag link above. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/007-1.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/007-1.xhtml new file mode 100644 index 0000000000..821edf8cbd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/007-1.xhtml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +html, body + {height:100%;} +</style> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false" ondrop="event.preventDefault();document.querySelector('p').firstChild.nodeValue = event.dataTransfer.getData('text/plain')"> +<p>Drop box now, you should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/007.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/007.xhtml new file mode 100644 index 0000000000..a40bc26053 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/007.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop with text/plain data</title> +<style type="text/css"> +div[ondragstart] + {width:40px; + min-height:40px; + margin-top:20px; + padding:40px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy';event.dataTransfer.setData('text/plain','PASS');window.location = '007-1.xhtml'"/> +<p>Drag blue box. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/008-1.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/008-1.xhtml new file mode 100644 index 0000000000..2ae9f4f935 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/008-1.xhtml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +html, body + {height:100%;} +</style> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false" ondrop="event.preventDefault();document.querySelector('p').firstChild.nodeValue = event.dataTransfer.getData('text/uri-list').substr(16,4)"> +<p>Drop box now, you should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/008.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/008.xhtml new file mode 100644 index 0000000000..e6dbab4e46 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/008.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop with text/uri-list data</title> +<style type="text/css"> +div[ondragstart] + {width:40px; + min-height:40px; + margin-top:20px; + padding:40px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy';event.dataTransfer.setData('text/uri-list','data:text/plain,PASS');window.location = '008-1.xhtml'"/> +<p>Drag blue box. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/009-1.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/009-1.xhtml new file mode 100644 index 0000000000..54e23c7643 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/009-1.xhtml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +html, body + {height:100%;} +</style> +</head> +<body ondragenter="event.preventDefault()" ondragover="window.location = 'helper-drop-link-now.xhtml'"> +<p>Don't drop link yet, you should be redirected to another page.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/009.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/009.xhtml new file mode 100644 index 0000000000..b93cdff31d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/009.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop through three pages</title> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = '009-1.xhtml'">Drag me</a></p> +<p>Drag link above. You should be redirected to the new page.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/010-1.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/010-1.xhtml new file mode 100644 index 0000000000..e3d6b4d7d0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/010-1.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +div[ondragenter] + {margin:200px 0 0 200px; + width:200px; + height:100px; + color:white; + background-color:navy;} +div[ondragenter]:before + {display:block; + content:""; + border-style:solid; + position:relative; + top:-50px; + left:-200px; + border-width:100px; + border-color:transparent navy transparent transparent;} +</style> +</head> +<body> +<p>Drag link to the blue arrow but don't drop it yet. You should be returned back to start page.</p> +<div ondragenter="event.preventDefault()" ondragover="history.go(-1)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/010.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/010.xhtml new file mode 100644 index 0000000000..74aabea371 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/010.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop and history navigation roundtrip</title> +<script type="application/ecmascript"> +function checkLink(event) + {document.querySelector('a').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = '010-1.xhtml'" ondragenter="event.preventDefault()" ondrop="checkLink(event)" ondragover="return false">Drag me around and drop here once you return back</a></p> +<p>Drag link around. You will be redirected to new page. When you return back drop link on itself. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/011-1.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/011-1.xhtml new file mode 100644 index 0000000000..95a4015a7a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/011-1.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +div[ondragenter] + {margin:200px 0 0 200px; + width:200px; + height:100px; + color:white; + background-color:navy;} +div[ondragenter]:before + {display:block; + content:""; + border-style:solid; + position:relative; + top:-50px; + left:-200px; + border-width:100px; + border-color:transparent navy transparent transparent;} +</style> +</head> +<body> +<p>Drag canvas to the blue arrow but don't drop it yet. You should be returned back to start page.</p> +<div ondragenter="event.preventDefault()" ondragover="history.go(-1)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/011.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/011.xhtml new file mode 100644 index 0000000000..56955a899f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/011.xhtml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop and history navigation roundtrip</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png')); + window.location = '011-1.xhtml'} +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondragenter="event.preventDefault()" ondragover="return false" ondrop="addImage(event)">Canvas</canvas> +</p> +<p>Drag canvas around. You will be redirected to new page. When you return back drop canvas on itself. It should be duplicated once you drop it.</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/navigation/012.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/012.xhtml new file mode 100644 index 0000000000..e9d72dbca5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/012.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>PNG image drag and drop and history navigation roundtrip</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +</script> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drag-image-dont-drop.xhtml'" ondragenter="event.preventDefault()" ondrop="addImage(event)" ondragover="return false" 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> +<p>Drag circle around. You will be redirected to new page. When you return back drop circle on itself. It should be duplicated once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/013.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/013.xhtml new file mode 100644 index 0000000000..d263a37862 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/013.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG image drag and drop and history navigation roundtrip</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +</script> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drag-image-dont-drop.xhtml'" ondragenter="event.preventDefault()" ondrop="addImage(event)" ondragover="return false" 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> +<p>Drag circle around. You will be redirected to new page. When you return back drop circle on itself. It should be duplicated once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/014.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/014.xhtml new file mode 100644 index 0000000000..5896797754 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/014.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Text input selection drag and drop and history navigation roundtrip</title> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="window.location = 'helper-drag-selection-dont-drop.xhtml'" ondragenter="event.preventDefault()" ondragover="return false" ondrop="event.preventDefault();this.value = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"/></p> +<p>Drag selected text around. You will be redirected to new page. When you return back drop selection on itself. You should see word PASS once you drop it.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/015.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/015.xhtml new file mode 100644 index 0000000000..cb194a52c0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/015.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop and history navigation roundtrip</title> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="window.location = 'helper-drag-selection-dont-drop.xhtml'" ondragenter="event.preventDefault()" ondragover="return false" ondrop="document.querySelector('span').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'">Drag me</span></p> +<p>Drag selected text around. You will be redirected to new page. When you return back drop selection on itself. You should see word PASS once you drop it.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/016-1.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/016-1.xhtml new file mode 100644 index 0000000000..564469779e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/016-1.xhtml @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +p + {border:solid medium navy; + height:200px; + padding:1em; + margin:0;} +div + {margin:100px; + padding:50px;} +img + {display:block; + margin:1em;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +</script> +</head> +<body> +<div ondragenter="window.location.reload()"> +<p ondragenter="event.stopPropagation()" dropzone="copy string:text/uri-list" ondrop="addImage(event)">Drop canvas here, it should be copied to this page once you drop it here.</p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/016.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/016.xhtml new file mode 100644 index 0000000000..d70fd4d542 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/016.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during canvas cross page drag and drop</title> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png')); + window.location = '016-1.xhtml';} +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern. You should be redirected to the new page and be able to drop it there.</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/navigation/017.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/017.xhtml new file mode 100644 index 0000000000..ea2dea268c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/017.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during PNG image cross page drag and drop</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drop-here-reload.xhtml'" 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> +<p>Drag circle above. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/018.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/018.xhtml new file mode 100644 index 0000000000..b8849c4a35 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/018.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during SVG image cross page drag and drop</title> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drop-here-reload.xhtml'" 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="PNG circle"/></p> +<p>Drag circle above. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/019.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/019.xhtml new file mode 100644 index 0000000000..f09041604f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/019.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during text input selection cross page drag and drop</title> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drop-selection-here.xhtml'"/></p> +<p>Drag selected text. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/020.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/020.xhtml new file mode 100644 index 0000000000..cf653bcad8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/020.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during selection cross page drag and drop</title> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = 'helper-drop-selection-here.xhtml'">Drag me</p> +<p>Drag selected text. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/021-1.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/021-1.xhtml new file mode 100644 index 0000000000..75af8a61d6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/021-1.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +p + {border:solid medium navy; + height:200px; + padding:1em; + margin:0;} +div + {margin:100px; + padding:50px;} +</style> +<script type="application/ecmascript"> +function checkLink(event) + {document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'} +</script> +</head> +<body> +<div ondragenter="window.location.reload()"> +<p ondragenter="event.stopPropagation()" dropzone="copy string:text/uri-list" ondrop="checkLink(event)">Drop link here, you should see word PASS once you drop it.</p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/021.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/021.xhtml new file mode 100644 index 0000000000..5c7fad0ca4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/021.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during link cross page drag and drop</title> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location = '021-1.xhtml'">Drag me</a></p> +<p>Drag link above. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/022-1.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/022-1.xhtml new file mode 100644 index 0000000000..1aa795b892 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/022-1.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +p + {border:solid medium navy; + height:200px; + padding:1em; + margin:0;} +div + {margin:100px; + padding:50px;} +</style> +</head> +<body> +<div ondragenter="window.location.reload()"> +<p ondragenter="event.stopPropagation()" dropzone="copy string:text/plain" ondrop="event.preventDefault();document.querySelector('p').firstChild.nodeValue = event.dataTransfer.getData('text/plain')">Drop box here, you should see word PASS once you drop it.</p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/022.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/022.xhtml new file mode 100644 index 0000000000..38cbef3eed --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/022.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during cross page drag and drop with text/plain data</title> +<style type="text/css"> +div[ondragstart] + {width:40px; + min-height:40px; + margin-top:20px; + padding:40px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy';event.dataTransfer.setData('text/plain','PASS');window.location = '022-1.xhtml'"/> +<p>Drag blue box. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/023-1.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/023-1.xhtml new file mode 100644 index 0000000000..e29cdd5d0f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/023-1.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +p + {border:solid medium navy; + height:200px; + padding:1em; + margin:0;} +div + {margin:100px; + padding:50px;} +</style> +</head> +<body> +<div ondragenter="window.location.reload()"> +<p ondragenter="event.stopPropagation()" dropzone="copy string:text/uri-list" ondrop="event.preventDefault();document.querySelector('p').firstChild.nodeValue = event.dataTransfer.getData('text/uri-list').substr(16,4)">Drop box here, you should see word PASS once you drop it.</p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/023.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/023.xhtml new file mode 100644 index 0000000000..4f7b80939b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/023.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during cross page drag and drop with text/uri-list data</title> +<style type="text/css"> +div[ondragstart] + {width:40px; + min-height:40px; + margin-top:20px; + padding:40px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy';event.dataTransfer.setData('text/uri-list','data:text/plain,PASS');window.location = '023-1.xhtml'"/> +<p>Drag blue box. You should be redirected to the new page and be able to drop it there.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/helper-drag-image-dont-drop.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drag-image-dont-drop.xhtml new file mode 100644 index 0000000000..2967d315c1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drag-image-dont-drop.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +div[ondragenter] + {margin:200px 0 0 200px; + width:200px; + height:100px; + color:white; + background-color:navy;} +div[ondragenter]:before + {display:block; + content:""; + border-style:solid; + position:relative; + top:-50px; + left:-200px; + border-width:100px; + border-color:transparent navy transparent transparent;} +</style> +</head> +<body> +<p>Drag image to the blue arrow but don't drop it yet. You should be returned back to start page.</p> +<div ondragenter="event.preventDefault()" ondragover="history.go(-1)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/helper-drag-selection-dont-drop.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drag-selection-dont-drop.xhtml new file mode 100644 index 0000000000..db1edb81d6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drag-selection-dont-drop.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +div[ondragenter] + {margin:200px 0 0 200px; + width:200px; + height:100px; + color:white; + background-color:navy;} +div[ondragenter]:before + {display:block; + content:""; + border-style:solid; + position:relative; + top:-50px; + left:-200px; + border-width:100px; + border-color:transparent navy transparent transparent;} +</style> +</head> +<body> +<p>Drag selection to the blue arrow but don't drop it yet. You should be returned back to start page.</p> +<div ondragenter="event.preventDefault()" ondragover="history.go(-1)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-here-reload.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-here-reload.xhtml new file mode 100644 index 0000000000..a046503651 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-here-reload.xhtml @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +p + {border:solid medium navy; + height:200px; + padding:1em; + margin:0;} +div + {margin:100px; + padding:50px;} +img + {display:block; + margin:1em;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +</script> +</head> +<body> +<div ondragenter="window.location.reload()"> +<p ondragenter="event.stopPropagation()" dropzone="copy string:text/uri-list" ondrop="addImage(event)">Drop image here, it should be copied to this page once you drop it here.</p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-image-now.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-image-now.xhtml new file mode 100644 index 0000000000..ccd38b5588 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-image-now.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +html, body + {height:100%;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('body').appendChild(c);} +</script> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false" ondrop="addImage(event)"> +<p>Drop image now, it should be copied to this page once you drop it here.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-link-now.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-link-now.xhtml new file mode 100644 index 0000000000..286b5586da --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-link-now.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +html, body + {height:100%;} +</style> +<script type="application/ecmascript"> +function checkLink(event) + {document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'} +</script> +</head> +<body ondragenter="event.preventDefault()" ondrop="checkLink(event)" ondragover="return false"> +<p>Drop link now, you should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-now.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-now.xhtml new file mode 100644 index 0000000000..046c4bbd21 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-now.xhtml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +html, body + {height:100%;} +</style> +</head> +<body ondragenter="event.preventDefault()" ondragover="return false" ondrop="event.preventDefault();document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<p>Drop selection now, you should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-selection-here.xhtml b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-selection-here.xhtml new file mode 100644 index 0000000000..074f5b3d89 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/navigation/helper-drop-selection-here.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross page drag and drop: helper file</title> +<style type="text/css"> +p + {border:solid medium navy; + height:200px; + padding:1em; + margin:0;} +div + {margin:100px; + padding:50px;} +</style> +</head> +<body> +<div ondragenter="window.location.reload()"> +<p ondragenter="event.stopPropagation()" dropzone="copy string:text/plain" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'">Drop selection here, you should see word PASS once you drop it.</p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/001.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/001.xhtml new file mode 100644 index 0000000000..56924d7a7f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/001.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback overlay size</title> +<style type="text/css"> +img + {height:100px; + width:100px;} +</style> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Try to drag green box above. Size of feedback overlay should match size of green box.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/002.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/002.xhtml new file mode 100644 index 0000000000..b8d2e8cb05 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/002.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Setting drag image during drag and drop</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/003.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/003.xhtml new file mode 100644 index 0000000000..344a7da7db --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/003.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/004.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/004.xhtml new file mode 100644 index 0000000000..2ba73e3737 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/004.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image on dragenter</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {width:100px; + height:100px; + background-color:silver; + margin-top:20px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +function resetImage(event) + {event.preventDefault(); + event.dataTransfer.setDragImage(document.querySelector('strong'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above to the silver box. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +<div ondragenter="resetImage(event)" ondragover="return false"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/005.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/005.xhtml new file mode 100644 index 0000000000..bf156f36fa --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/005.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore on dragenter</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {width:100px; + height:100px; + background-color:silver; + margin-top:20px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +function resetImage(event) + {event.preventDefault(); + event.dataTransfer.addElement(document.querySelector('strong'));} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above to the silver box. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +<div ondragenter="resetImage(event)" ondragover="return false"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/006.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/006.xhtml new file mode 100644 index 0000000000..4c0295bf9b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/006.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image on dragover</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {width:100px; + height:100px; + background-color:silver; + margin-top:20px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +function resetImage(event) + {event.preventDefault(); + event.dataTransfer.setDragImage(document.querySelector('strong'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above to the silver box. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +<div ondragenter="event.preventDefault()" ondragover="resetImage(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/007.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/007.xhtml new file mode 100644 index 0000000000..d91aae5056 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/007.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore on dragover</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {width:100px; + height:100px; + background-color:silver; + margin-top:20px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +function resetImage(event) + {event.preventDefault() + event.dataTransfer.addElement(document.querySelector('strong'));} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above to the silver box. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +<div ondragenter="event.preventDefault()" ondragover="resetImage(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/008.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/008.xhtml new file mode 100644 index 0000000000..9d01553c54 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/008.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image on drag</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +function resetImage(event) + {event.dataTransfer.setDragImage(document.querySelector('strong'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="resetImage(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/009.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/009.xhtml new file mode 100644 index 0000000000..23c786e9a0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/009.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore on drag</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +function resetImage(event) + {event.dataTransfer.addElement(document.querySelector('strong'));} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="resetImage(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/010.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/010.xhtml new file mode 100644 index 0000000000..5108bdd5e9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/010.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image on new drag</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +var i = 0; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelectorAll('span')[i++%2], 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Drag link above around the page drop it and try to drag again.</p> +<p>First time you drag it you should see word <span>Odd</span> in feedback overlay, second time overlay should change to <span>Even</span>.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/011.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/011.xhtml new file mode 100644 index 0000000000..5fc17de1f4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/011.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Feedback image for circle</title> +<style type="text/css"> +body + {background-color:silver; + margin:0;} +div + {background-color:white;} +</style> +</head> +<body> +<div><img 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 green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></div> +<p>Try to drag green circle above. Feedback overlay should be a circle.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/012.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/012.xhtml new file mode 100644 index 0000000000..49739bc2b7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/012.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Feedback image and border-radius</title> +<style type="text/css"> +body + {background-color:silver; + margin:0;} +div + {background-color:white;} +div > div + {display:block; + width:100px; + height:100px; + border:solid thin green; + border-radius:50px;} +</style> +</head> +<body> +<div> + <div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +</div> +<p>Try to drag green circle above. Feedback overlay should be a circle.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/013.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/013.xhtml new file mode 100644 index 0000000000..07ac6b8e53 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/013.xhtml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Feedback image and CSS transforms</title> +<style type="text/css"> +body + {background-color:silver; + margin:0;} +div + {background-color:white;} +div > div + {display:block; + width:100px; + height:87px; + transform-origin:bottom right; + transform:skew(-30deg); + -o-transform-origin:bottom right; + -o-transform:skew(-30deg); + background-color:green;} +</style> +</head> +<body> +<div> + <div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +</div> +<p>Try to drag green rhomb above. Feedback overlay should not be rectangular.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/014.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/014.xhtml new file mode 100644 index 0000000000..8c07f69a18 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/014.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Setting drag image during drag and drop of selection</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p ondragstart="start(event)">Drag me</p> +<p>Try to drag selection above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/015.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/015.xhtml new file mode 100644 index 0000000000..3e416524ee --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/015.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore during drag and drop of selection</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p ondragstart="start(event)">Drag me</p> +<p>Try to drag selection above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/016.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/016.xhtml new file mode 100644 index 0000000000..081ee91330 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/016.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Setting drag image during drag and drop of PNG image</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +img + {height:100px; + width:100px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<p ondragstart="start(event)"> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel"/> +</p> +<p>Try to drag green box above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/017.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/017.xhtml new file mode 100644 index 0000000000..7b1d9320ff --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/017.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore during drag and drop of PNG image</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +img + {height:100px; + width:100px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +</script> +</head> +<body> +<p ondragstart="start(event)"> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel"/> +</p> +<p>Try to drag green box above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/018.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/018.xhtml new file mode 100644 index 0000000000..b82080a7fb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/018.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Setting drag image during drag and drop of SVG image</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<p><img 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" ondragstart="start(event)"/></p> +<p>Try to drag green circle above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/019.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/019.xhtml new file mode 100644 index 0000000000..325be4e8c3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/019.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore during drag and drop of SVG image</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +</script> +</head> +<body> +<p><img 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" ondragstart="start(event)"/></p> +<p>Try to drag green circle above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/020.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/020.xhtml new file mode 100644 index 0000000000..f5d1a2636d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/020.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Setting drag image during drag and drop of block element</title> +<style type="text/css"> +div + {width:100px; + height:100px; + background-color:navy;} +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Try to drag blue box above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/021.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/021.xhtml new file mode 100644 index 0000000000..268ef17c8c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/021.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore during drag and drop of block element</title> +<style type="text/css"> +div + {width:100px; + height:100px; + background-color:navy;} +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Try to drag blue box above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/022.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/022.xhtml new file mode 100644 index 0000000000..fedc0344ed --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/022.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Block element drag and drop: changing draggable attribute</title> +<style type="text/css"> +div + {width:100px; + height:100px; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('div').setAttribute('draggable','false')"> +<div draggable="true" ondragstart="document.querySelector('p').firstChild.nodeValue = 'FAIL'"/> +<p>You should not be able to drag blue box.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/023.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/023.xhtml new file mode 100644 index 0000000000..c3f7ddf51b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/023.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: changing draggable attribute</title> +</head> +<body onload="document.querySelector('a').setAttribute('draggable','false')"> +<p><a href="data:text/plain,1" ondragstart="document.querySelector('p').firstChild.nodeValue = 'FAIL'">Try to drag me</a></p> +<p>You should not be able to drag link above.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/024.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/024.xhtml new file mode 100644 index 0000000000..a7a3eb3320 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/024.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>PNG image drag and drop: changing draggable attribute</title> +<style type="text/css"> +img + {width:100px; + height:100px;} +</style> +</head> +<body onload="document.querySelector('img').setAttribute('draggable','false')"> +<p><img ondragstart="document.querySelector('p').firstChild.nodeValue = 'FAIL'" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel"/></p> +<p>You should not be able to drag green box.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/025.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/025.xhtml new file mode 100644 index 0000000000..ac2005377b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/025.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG image drag and drop: changing draggable attribute</title> +<style type="text/css"> +img + {width:100px; + height:100px;} +</style> +</head> +<body onload="document.querySelector('img').setAttribute('draggable','false')"> +<p><img ondragstart="document.querySelector('p').firstChild.nodeValue = 'FAIL'" 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> +<p>You should not be able to drag green circle.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/026.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/026.xhtml new file mode 100644 index 0000000000..8d4b07411d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/026.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping links: zero height</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {width:4em; + padding:1em; + line-height:0;} +a + {background-color:white; + padding:1ex;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <a href="data:text/plain,1" ondragstart="start(event,'strong')"> </a> + <a href="data:text/plain,2" ondragstart="start(event,'span')">Link</a> +</div> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/027.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/027.xhtml new file mode 100644 index 0000000000..e34e2e88f1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/027.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping links: negative margin</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:2em;} +div + div + {margin-top:-2em;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <a href="data:text/plain,1" ondragstart="start(event,'strong')"> </a> +</div> +<div> + <a href="data:text/plain,2" ondragstart="start(event,'span')">Link</a> +</div> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/028.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/028.xhtml new file mode 100644 index 0000000000..0afd8a70cc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/028.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping links: relative position</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:2em;} +div + div + {position:relative; + top:-2em;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <a href="data:text/plain,1" ondragstart="start(event,'strong')"> </a> +</div> +<div> + <a href="data:text/plain,2" ondragstart="start(event,'span')">Link</a> +</div> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/029.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/029.xhtml new file mode 100644 index 0000000000..8741e8a374 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/029.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping links: absolute position</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:2em; + position:absolute; + top:10px; + left:10px;} +div + div + {z-index:2;} +p + {margin-top:3em;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <a href="data:text/plain,1" ondragstart="start(event,'strong')"> </a> +</div> +<div> + <a href="data:text/plain,2" ondragstart="start(event,'span')">Link</a> +</div> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/030.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/030.xhtml new file mode 100644 index 0000000000..3dcfae69fc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/030.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping links: fixed position</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:2em; + position:fixed; + top:10px; + left:10px;} +div + div + {z-index:2;} +p + {margin-top:3em;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <a href="data:text/plain,1" ondragstart="start(event,'strong')"> </a> +</div> +<div> + <a href="data:text/plain,2" ondragstart="start(event,'span')">Link</a> +</div> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/031.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/031.xhtml new file mode 100644 index 0000000000..009f19a9d1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/031.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping images: negative margin</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +img + {display:block; + width:100px; + height:100px;} +img + img + {margin-top:-100px;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <img ondragstart="start(event,'strong')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP4z8DwHwAFAAH/VscvDQAAAABJRU5ErkJggg=="/> + <img ondragstart="start(event,'span')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgaGD4DwAChAGAJVtEDQAAAABJRU5ErkJggg=="/> +</div> +<p>Try to drag box above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/032.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/032.xhtml new file mode 100644 index 0000000000..d041ec9d5f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/032.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping images: absolute position</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:100px; + position:relative;} +img + {display:block; + position:absolute; + top:0; + bottom:0; + width:100px; + height:100px;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <img ondragstart="start(event,'strong')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP4z8DwHwAFAAH/VscvDQAAAABJRU5ErkJggg=="/> + <img ondragstart="start(event,'span')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgaGD4DwAChAGAJVtEDQAAAABJRU5ErkJggg=="/> +</div> +<p>Try to drag box above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/033.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/033.xhtml new file mode 100644 index 0000000000..b91f58181a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/033.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping images: fixed position</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:100px; + position:relative;} +img + {display:block; + position:fixed; + top:0; + bottom:0; + width:100px; + height:100px;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <img ondragstart="start(event,'strong')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP4z8DwHwAFAAH/VscvDQAAAABJRU5ErkJggg=="/> + <img ondragstart="start(event,'span')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgaGD4DwAChAGAJVtEDQAAAABJRU5ErkJggg=="/> +</div> +<p>Try to drag box above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/034.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/034.xhtml new file mode 100644 index 0000000000..3fbbfcce32 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/034.xhtml @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping elements: negative margins</title> +<style type="text/css"> +div + {height:100px; + width:100px; + margin-top:-50px; + background-color:navy;} +div:nth-child(odd) + {background-color:maroon; + margin-left:50px;} +div[draggable] + {background-color:teal;} +</style> +</head> +<body> +<div/> +<div/> +<div draggable="true"/> +<div/> +<div/> +<div draggable="true"/> +<div/> +<div/> +<p>Only green areas should be draggable.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/035.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/035.xhtml new file mode 100644 index 0000000000..c2a13f7ea6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/035.xhtml @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of floated overlapping elements: negative margins</title> +<style type="text/css"> +div + {height:100px; + width:100px; + float:left; + margin-left:-50px; + background-color:navy;} +div:nth-child(odd) + {background-color:maroon; + margin-top:50px;} +div[draggable] + {background-color:teal;} +</style> +</head> +<body> +<p>Only green areas should be draggable.</p> +<div/> +<div/> +<div draggable="true"/> +<div/> +<div/> +<div draggable="true"/> +<div/> +<div/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/036.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/036.xhtml new file mode 100644 index 0000000000..94ba9f24e4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/036.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback when multiple elements are added to dragstore</title> +<style type="text/css"> +div > div + {height:100px; + width:100px; + float:left; + background-color:navy;} +div + div + {margin-left:-60px; + background-color:maroon;} +div[draggable] + {background-color:teal; + margin-top:50px;} +</style> +<script type="application/ecmascript"> +function start(event) + {var div = document.querySelectorAll('div > div:nth-child(odd)'); + event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != div.length; i++) + {event.dataTransfer.addElement(div[i]);} + } +</script> +</head> +<body> +<p>Try to drag green box below. Feedback overlay should include all three boxes when you drag green one.</p> +<div ondragstart="start(event)"> + <div/> + <div draggable="true"/> + <div/> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/038.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/038.xhtml new file mode 100644 index 0000000000..d146ecf8ab --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/038.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image after element was added to dragstore</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('strong')); + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/039.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/039.xhtml new file mode 100644 index 0000000000..49ce01c912 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/039.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image during drag and drop of link</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('strong'), 1, 1); + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/040.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/040.xhtml new file mode 100644 index 0000000000..0bad3d2f65 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/040.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cursor position and drag image</title> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('canvas'), 50, 50);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above. Feedback overlay should be based on canvas below and mouse pointer should be anchored in its center.</p> +<p> + <canvas width="100" height="100">Canvas</canvas> +</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/overlay/041.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/041.xhtml new file mode 100644 index 0000000000..73e8c4dc3b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/041.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cursor position and drag image after new element is added to dragstore</title> +<script type="application/ecmascript"> +function start(event,element) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelectorAll('canvas')[element]);} +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event,1)">Canvas</canvas> + <canvas width="100" height="100" draggable="true" ondragstart="start(event,0)">Canvas</canvas> +</p> +<p>Try to drag canvas above. Feedback overlay should include both canvases and mouse pointer should be anchored in dragged ones center.</p> +<script type="application/ecmascript"> +var canvases = document.querySelectorAll('canvas'); +paintCanvas(canvases[0],'navy'); +paintCanvas(canvases[1],'green'); +function paintCanvas(canvas,color) + {var c = canvas.getContext('2d'); + for(var x = 0; x != 50; x++) + {c.fillStyle = (x%2 == 0)?color:'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/overlay/042.html b/testing/web-platform/tests/html/editing/dnd/overlay/042.html new file mode 100644 index 0000000000..574153fc0d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/042.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<title>drag & drop - dragging elements that overlay each other</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: navy; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + height: 100px; + width: 100px; + background-color: orange; + left: 58px; + top: 58px; + } + body > div + div + div { + background-color: fuchsia; + left: 258px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +window.onload = function() { + var passed = true, orange = document.getElementsByTagName('div')[1], blue = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[2]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'PASS'); + }; + blue.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'FAIL'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + //it's possible this could get called twice if the browser drags both items, so it uses the "passed" variable to make sure + //that if blue gets dropped first, it remains false when orange then gets dropped + passed = passed && ( e.dataTransfer.getData('text/plain') == 'PASS' ); + document.getElementsByTagName('p')[0].innerHTML = passed ? 'PASS' : 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'></div><div draggable='true'></div><div></div> + +<p>Use your pointing device to drag the orange box to the pink box, then release it. While dragging, the drag placeholder should show that only the orange box is being dragged.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/043.html b/testing/web-platform/tests/html/editing/dnd/overlay/043.html new file mode 100644 index 0000000000..49108b9dbb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/043.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>drag & drop - dragging nested draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: navy; + position: absolute; + top: 8px; + left: 8px; + } + body > div div { + height: 100px; + width: 100px; + background-color: orange; + position: absolute; + left: 50px; + top: 50px; + } + body > div + div { + background-color: fuchsia; + height: 100px; + width: 100px; + left: 258px; + top: 58px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +window.onload = function() { + var passed = true, orange = document.getElementsByTagName('div')[1], blue = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[2]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'child targeted'); + }; + blue.ondragstart = function(e) { + if( e.target == this ) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'parent targeted'); + } else { + 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(); + //it's possible this could get called twice if the browser drags both items, so it uses the "passed" variable to make sure + //that if blue gets dropped first, it remains false when orange then gets dropped + passed = passed && ( e.dataTransfer.getData('text/plain') == 'child targeted' ) && ( e.dataTransfer.getData('extra/data') == 'parent bubble' ); + document.getElementsByTagName('p')[0].innerHTML = passed ? 'PASS' : 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'><div draggable='true'></div></div><div></div> + +<p>Use your pointing device to drag the orange box to the pink box, then release it. While dragging, the drag placeholder should show that only the orange box is being dragged.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> 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 & 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 "text dummy" in the orange box.)</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/045.html b/testing/web-platform/tests/html/editing/dnd/overlay/045.html new file mode 100644 index 0000000000..1efed6a110 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/045.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>drag & drop - dragging iframes overlaying draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: fuchsia; + left: 258px; + } + iframe { + border: 5px solid yellow; + height: 130px; + width: 130px; + position: absolute; + top: 38px; + left: 38px; + } + 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('text/plain', 'FAIL'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + document.getElementsByTagName('p')[0].innerHTML = 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'></div><div></div> + +<p>Use your pointing device to begin dragging inside the yellow border (not on any scrollbars that may appear), over to the pink box, then release it. Pass if nothing is dragged, and if this text does not change. +<iframe src="about:blank"></iframe></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/046.html b/testing/web-platform/tests/html/editing/dnd/overlay/046.html new file mode 100644 index 0000000000..8d03cd5d95 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/046.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>drag & drop - dragging iframes inside draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: fuchsia; + left: 258px; + } + iframe { + border: 5px solid yellow; + height: 130px; + width: 130px; + position: absolute; + top: 30px; + left: 30px; + } + 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('text/plain', 'FAIL'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + document.getElementsByTagName('p')[0].innerHTML = 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'><iframe src="about:blank"></iframe></div><div></div> + +<p>Use your pointing device to begin dragging inside the yellow border (not on any scrollbars that may appear), over to the pink box, then release it. Pass if nothing is dragged, and if this text does not change.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/047.html b/testing/web-platform/tests/html/editing/dnd/overlay/047.html new file mode 100644 index 0000000000..9b4c09ab93 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/047.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>drag & drop - dragging objects overlaying draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: fuchsia; + left: 258px; + } + object { + border: 5px solid yellow; + height: 130px; + width: 130px; + position: absolute; + top: 38px; + left: 38px; + } + 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('text/plain', 'FAIL'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + document.getElementsByTagName('p')[0].innerHTML = 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'></div><div></div> + +<p>Use your pointing device to begin dragging inside the yellow border (not on any scrollbars that may appear), over to the pink box, then release it. Pass if nothing is dragged, and if this text does not change. +<object data="about:blank"></object></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/048.html b/testing/web-platform/tests/html/editing/dnd/overlay/048.html new file mode 100644 index 0000000000..54bb72c5ed --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/048.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>drag & drop - dragging objects inside draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: fuchsia; + left: 258px; + } + object { + border: 5px solid yellow; + height: 130px; + width: 130px; + position: absolute; + top: 30px; + left: 30px; + } + 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('text/plain', 'FAIL'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + document.getElementsByTagName('p')[0].innerHTML = 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'><object data="about:blank"></object></div><div></div> + +<p>Use your pointing device to begin dragging inside the yellow border (not on any scrollbars that may appear), over to the pink box, then release it. Pass if nothing is dragged, and if this text does not change.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/049.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/049.xhtml new file mode 100644 index 0000000000..70c57acea7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/049.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible image: negative margins</title> +<style type="text/css"> +p:first-child + {margin:-50px 0 0 -50px;} +img + {height:100px; + width:100px;} +</style> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Try to drag green box above. Feedback overlay should be green square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/050.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/050.xhtml new file mode 100644 index 0000000000..28f218f813 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/050.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible image: relative position</title> +<style type="text/css"> +p:first-child + {margin:0; + position:relative; + top:-50px; + left:-50px;} +img + {display:block; + height:100px; + width:100px;} +</style> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Try to drag green box above. Feedback overlay should be green square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/051.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/051.xhtml new file mode 100644 index 0000000000..fc85f01480 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/051.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible image: absolute position</title> +<style type="text/css"> +img + {position:absolute; + top:-50px; + left:-50px;} +p + p + {margin-top:100px;} +img + {height:100px; + width:100px;} +</style> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Try to drag green box above. Feedback overlay should be green square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/052.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/052.xhtml new file mode 100644 index 0000000000..af40bf20b2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/052.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible image: fixed position</title> +<style type="text/css"> +img + {position:fixed; + top:-50px; + left:-50px;} +p + p + {margin-top:100px;} +img + {height:100px; + width:100px;} +</style> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Try to drag green box above. Feedback overlay should be green square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/053.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/053.xhtml new file mode 100644 index 0000000000..2d427fdcc2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/053.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible element: negative margins</title> +<style type="text/css"> +div + {margin:-160px 0 0 -160px; + height:200px; + width:200px; + background-color:navy;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +<p>Try to drag blue box above. Feedback overlay should be square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/054.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/054.xhtml new file mode 100644 index 0000000000..f46c325118 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/054.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible element: relative position</title> +<style type="text/css"> +div + {position:relative; + top:-150px; + left:-150px; + height:200px; + width:200px; + background-color:navy;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +<p>Try to drag blue box above. Feedback overlay should be square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/055.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/055.xhtml new file mode 100644 index 0000000000..d693a60b9b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/055.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible element: absolute position</title> +<style type="text/css"> +div + {position:absolute; + top:-150px; + left:-150px; + height:200px; + width:200px; + background-color:navy;} +p + {margin-top:100px;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +<p>Try to drag blue box above. Feedback overlay should be square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/056.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/056.xhtml new file mode 100644 index 0000000000..77e86f97fb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/056.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible element: fixed position</title> +<style type="text/css"> +div + {position:fixed; + top:-150px; + left:-150px; + height:200px; + width:200px; + background-color:navy;} +p + {margin-top:100px;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +<p>Try to drag blue box above. Feedback overlay should be square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/057.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/057.xhtml new file mode 100644 index 0000000000..0e22142f19 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/057.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible float: negative margins</title> +<style type="text/css"> +p + {margin-top:0;} +div + {float:left; + margin:-150px 0 0 -150px; + height:200px; + width:200px; + background-color:navy;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +<p>Try to drag blue box above. Feedback overlay should be square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/058.html b/testing/web-platform/tests/html/editing/dnd/overlay/058.html new file mode 100644 index 0000000000..2fa4b60fb6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/058.html @@ -0,0 +1,29 @@ +<!doctype html> +<title>drag & drop - dragging elements by children that extend out of them</title> +<style type="text/css"> +div { + height: 200px; + width: 200px; + background: blue; + white-space: nowrap; +} +span { + display: inline-block; + width: 210px; + height: 100px; +} +span + span { + background: orange; + width: 100px; +} +</style> +<script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; +}; +</script> +<div draggable="true"><span></span><span></span></div> +<p>Drag the orange square sideways. Pass if the drag placeholder shows that both the blue and orange squares are being dragged.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/059.html b/testing/web-platform/tests/html/editing/dnd/overlay/059.html new file mode 100644 index 0000000000..0afb72e029 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/059.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>drag & drop - dragging elements by text that extends out of them</title> +<style type="text/css"> +div { + height: 200px; + width: 200px; + background: blue; + white-space: nowrap; +} +</style> +<script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; +}; +</script> +<div draggable="true"> Drag me</div> +<p>Drag the above text sideways. Pass if the drag placeholder shows that both the text and blue square are being dragged.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/060.html b/testing/web-platform/tests/html/editing/dnd/overlay/060.html new file mode 100644 index 0000000000..0a90cadd4a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/060.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>drag & drop - dragging elements by children that are positioned outside them</title> +<style type="text/css"> +div { + height: 200px; + width: 200px; + background: blue; + white-space: nowrap; + position: relative; +} +span { + display: block; + top: 0; + left: 210px; + position: absolute; + width: 100px; + height: 100px; + background: orange; +} +</style> +<script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; +}; +</script> +<div draggable="true"><span></span></div> +<p>Drag the orange square sideways. Pass if the drag placeholder shows that both the blue and orange squares are being dragged.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/061.html b/testing/web-platform/tests/html/editing/dnd/overlay/061.html new file mode 100644 index 0000000000..3081676bf0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/061.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>drag & drop - dragging elements by overflowing children that are positioned outside them</title> +<style type="text/css"> +div { + height: 200px; + width: 200px; + background: blue; + white-space: nowrap; + position: relative; +} +span { + display: block; + top: 0; + left: 210px; + position: absolute; + width: 100px; + height: 100px; + background: yellow; +} +</style> +<script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; +}; +</script> +<div draggable="true"><span> Drag me</span></div> +<p>Drag the above text sideways. Pass if the drag placeholder shows that the text and both the yellow and blue squares are being dragged.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/062.html b/testing/web-platform/tests/html/editing/dnd/overlay/062.html new file mode 100644 index 0000000000..d48577e451 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/062.html @@ -0,0 +1,22 @@ +<!doctype html> +<html> + <head> + <title>Selection spanning hidden elements</title> + <script type="text/javascript"> +window.onload = function () { + var range = document.createRange(), p = document.getElementsByTagName('p')[0]; + range.selectNodeContents(p); + range.setStart(p.firstChild.firstChild,4); + range.setEnd(p.lastChild.firstChild,5); + window.getSelection().addRange(range); +}; + </script> + </head> + <body> + + <p><span style="display:none">FAILPASS_</span>drag<span style="display:none">_THIS_</span>text<span style="display:none">_PASSFAIL</span></p> + <p><textarea rows="3" cols="50"></textarea></p> + <p>Drag the selected text into the input box. The drag placeholder should match the visible text that is being dragged. When dropped, either "dragtext" or "PASS_drag_THIS_text_PASS" should appear in the input.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-001.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-001.html new file mode 100644 index 0000000000..05f69fa61c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-001.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 001</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + box-shadow: 10px 10px 10px gray; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box. It may optionally also include the box's shadow.</p> + +<a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-002.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-002.html new file mode 100644 index 0000000000..de3b2e296e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-002.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 002</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + border: 10px solid orange; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box, including the orange border.</p> + +<a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-003.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-003.html new file mode 100644 index 0000000000..adb0a3581c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-003.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 002</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + outline: 10px solid orange; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box. It may optionally also include include the orange border.</p> + +<a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-004.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-004.html new file mode 100644 index 0000000000..d6a5da41c0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-004.html @@ -0,0 +1,19 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 004</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + box-shadow: 10px 10px 10px gray; +} +div { + background-color: orange; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box. It may optionally also include the box's shadow, but must not include the orange rectangle.</p> + +<div><a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a></div> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-005.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-005.html new file mode 100644 index 0000000000..2bbdb3cf73 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-005.html @@ -0,0 +1,15 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 005</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: rgba(0,0,255,0.5); +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box, including the text within it.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-006.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-006.html new file mode 100644 index 0000000000..c067878f22 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-006.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 006</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + opacity: 0.5; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box, including the text within it.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-007.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-007.html new file mode 100644 index 0000000000..56ba9594f2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-007.html @@ -0,0 +1,20 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 007</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + margin-left: 100px; + -moz-transform: rotate(-45deg) skew(15deg, 15deg); + -o-transform: rotate(-45deg) skew(15deg, 15deg); + -webkit-transform: rotate(-45deg) skew(15deg, 15deg); + transform: rotate(-45deg) skew(15deg, 15deg); +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box, including the text within it, and with the same rotation.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-008.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-008.html new file mode 100644 index 0000000000..7a78f814e1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-008.html @@ -0,0 +1,31 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 008</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: green; + position: absolute; + top: 100px; + left: 10px; + z-index: 1; +} + +a + a { + background-color: red; + position: absolute; + top: 150px; + left: 20px; + z-index: 2; +} + + +</style> + +<p>Drag the green box below downwards. The drag placeholder should resemble the green box, including the text within it. It may optionally be a complete square, or the same shape as the visible part of the green box. There should be no red in the drag placeholder.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a> + +<a href='#'>TEST</a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-009.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-009.html new file mode 100644 index 0000000000..0f36fe0834 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-009.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 009</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + border-radius: 50px; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box, including the rounded corners.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-001.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-001.html new file mode 100644 index 0000000000..ecc7ebbf3b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-001.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 001</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 10px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + +<a href='#'></a> + +<p>Drag the blue box on the right downwards. The drag placeholder should ideally be a blue square. It may optionally be a rectangle the same shape as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-002.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-002.html new file mode 100644 index 0000000000..3878c31d0a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-002.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 002</title> +<style> +img { + height: 200px; + width: 200px; + position: absolute; + top: 10px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + + +<img alt='' +src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAACRJREFUOE9jZGBoYCARADWQhEhTDXIOScaPaiAyuEaDlXBAAQBiw3iCaRp9LAAAAABJRU5ErkJggg%3D%3D'> + +<p>Drag the blue box on the right. The drag placeholder should ideally be a blue square. It may optionally be a rectangle the same shape as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-003.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-003.html new file mode 100644 index 0000000000..895a008f98 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-003.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 003</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: -100px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + +<a href='#'></a> + +<p>Drag the blue box on the right downwards. The drag placeholder should ideally be a blue square twice as high and wide as the visible part of the blue box. It may optionally be a square the same size as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-004.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-004.html new file mode 100644 index 0000000000..61bc22eefe --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-004.html @@ -0,0 +1,21 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 004</title> +<style> +img { + height: 200px; + width: 200px; + position: absolute; + top: -100px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + +<img alt='' +src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAACRJREFUOE9jZGBoYCARADWQhEhTDXIOScaPaiAyuEaDlXBAAQBiw3iCaRp9LAAAAABJRU5ErkJggg%3D%3D'> + +<p>Drag the blue box on the right. The drag placeholder should ideally be a blue square twice as high and wide as the visible part of the blue box. It may optionally be a square the same size as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-005.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-005.html new file mode 100644 index 0000000000..26e4bff2eb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-005.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 005</title> +<style> +div { + display: block; + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 10px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></div> + +<p>Drag the blue box on the right. The drag placeholder should ideally be a blue square. It may optionally be a rectangle the same shape as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-006.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-006.html new file mode 100644 index 0000000000..d10f06dfdd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-006.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 006</title> +<style> +div { + display: block; + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: -100px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></div> + +<p>Drag the blue box on the right. The drag placeholder should ideally be a blue square twice as high and wide as the visible part of the blue box. It may optionally be a square the same size as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/oversized-001.html b/testing/web-platform/tests/html/editing/dnd/overlay/oversized-001.html new file mode 100644 index 0000000000..e13f6b190b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/oversized-001.html @@ -0,0 +1,18 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of oversized element</title> +<style> +html, body, p + p { height: 100%; width: 100%; } +a { + display: block; + height: 100%; + width: 100%; + background-color: blue; + border: 50px solid orange; /* makes it higher and wider than the viewport */ +} + +</style> + +<p>Drag the blue box below downwards. The drag placeholder should ideally be a blue rectangle with an orange border on all sides. It may optionally match the visible part of the blue-and-orange box. It may optionally be a rectangle with the same pattern and size as the visible part of the blue-and-orange box. It may optionally be shrunk to a manageable size. No part of the UI should be dragged with the box.</p> + +<p><a href='#'></a></p> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/alttab.html b/testing/web-platform/tests/html/editing/dnd/platform/alttab.html new file mode 100644 index 0000000000..b03c5dfd6a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/alttab.html @@ -0,0 +1,12 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - alt+tab while dragging</title> + </head> + <body> + + <p>This test is only relevant on platforms where alt+tab (or some equivalent) switches applications.</p> + <p>Ensure that at least one other application is open. Select this text. Drag the selection downwards a little, then alt+tab (or your system's equivalent) to the other application. Pass if the drag placeholder continues to follow the mouse/pointing device. Release the drag. Pass if the drag placeholder disappears.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cancel-middle-click.html b/testing/web-platform/tests/html/editing/dnd/platform/cancel-middle-click.html new file mode 100644 index 0000000000..40fcff41fc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cancel-middle-click.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with middle click</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: orange; + float: left; +} +div + div { + background: blue; +} +div + div + div { + background: fuchsia; +} +ol { + clear: left; +} + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; +}; + </script> + </head> + <body> + <div draggable="true"></div> + <div></div> + <div></div> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the orange square over the blue square.</li> + <li>Without releasing the drag, click the middle mouse button.</li> + <li>If the platform's normal behaviour is to cancel a drag (eg. Windows and Unix+KDE), then the drag should be cancelled;<ul> + <li>The drag placeholder should disappear, and the cursor should return to the normal mouse cursor.</li> + <li>Move the mouse over the pink square and release the drag. The mouse cursor should remain the normal mouse cursor.</li> + </ul></li> + <li>If the platform's normal behaviour is not to cancel a drag (eg. Mac and Unix+Gnome), then the drag should not be cancelled;<ul> + <li>The drag placeholder should not disappear, and the cursor should be the no-drop cursor.</li> + <li>Move the mouse over the pink square and release the drag. The drag placeholder should disappear, and the cursor should return to the normal mouse cursor.</li> + </ul></li> + <li>Fail in either case if an inappropriate middle click function begins (eg. paste-and-go).</li> + </ol> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cancel-right-click.html b/testing/web-platform/tests/html/editing/dnd/platform/cancel-right-click.html new file mode 100644 index 0000000000..e5159716f4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cancel-right-click.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with right click</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: orange; + float: left; +} +div + div { + background: blue; +} +div + div + div { + background: fuchsia; +} +ol { + clear: left; +} + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; +}; + </script> + </head> + <body> + <div draggable="true"></div> + <div></div> + <div></div> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the orange square over the blue square.</li> + <li>Without releasing the drag, click the right mouse button.</li> + <li>If the platform's normal behaviour is to cancel a drag (eg. Windows and Unix+KDE), then the drag should be cancelled;<ul> + <li>The drag placeholder should disappear, and the cursor should return to the normal mouse cursor.</li> + <li>Move the mouse over the pink square and release the drag. The mouse cursor should remain the normal mouse cursor.</li> + </ul></li> + <li>If the platform's normal behaviour is not to cancel a drag (eg. Mac and Unix+Gnome), then the drag should not be cancelled;<ul> + <li>The drag placeholder should not disappear, and the cursor should be the no-drop cursor.</li> + <li>Move the mouse over the pink square and release the drag. The drag placeholder should disappear, and the cursor should return to the normal mouse cursor.</li> + </ul></li> + <li>Fail in either case if an inappropriate right click function begins (eg. context menu opens).</li> + </ol> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-001-manual.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-001-manual.html new file mode 100644 index 0000000000..fc8db3db7d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-001-manual.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>drag & drop - closing a popup while a drag is in operation</title> +<style type="text/css"> +p.gone, ul { display: none; } +p.gone + ul { display: block; } +</style> +<script type="text/javascript"> +window.onload = function() { + if( location.href.match(/#popup$/) ) { document.getElementsByTagName('p')[0].className = 'gone'; } + document.getElementsByTagName('ul')[0].ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + setTimeout(function () { window.close(); },100); + }; +}; +</script> +<p><a href="javascript:alert('Click the link normally');" onclick="window.open('close-drag-001.html#popup','_blank');return false;">Open this page in a popup</a>.</p> +<ul draggable='true'> + <li>Drag this text downwards, and do not release the drag.</li> + <li>The browser may optionally cancel the drag. The browser may optionally close the popup. Fail if the drag placeholder gets stuck. Fail if the browser crashes. Fail if anything horrible happens. Fail if your pet kitten gets sick.</li> + <li>Release the drag.</li> + <li>Fail if the drag placeholder gets stuck. Fail if the browser crashes.</li> +</ul> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-002-manual.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-002-manual.html new file mode 100644 index 0000000000..35e8a5a537 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-002-manual.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>drag & drop - closing the only window while a drag is in operation</title> +<style type="text/css"> +p.gone, ul { display: none; } +p.gone + ul { display: block; } +</style> +<script type="text/javascript"> +window.onload = function() { + if( location.href.match(/#popup$/) ) { document.getElementsByTagName('p')[0].className = 'gone'; } + document.getElementsByTagName('ul')[0].ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + setTimeout(function () { window.close(); },100); + }; +}; +</script> +<p><a href="javascript:alert('Click the link normally');" onclick="window.open('close-drag-002.html#popup','_blank');return false;">Open this page in a popup</a>.</p> +<ul draggable='true'> + <li>Close all pages/browser windows except the popup.</li> + <li>Drag this text downwards, and do not release the drag.</li> + <li>The browser may optionally cancel the drag. The browser may optionally close the popup/window. Fail if the drag placeholder gets stuck. Fail if the browser crashes. Fail if anything horrible happens. Fail if zombie Michael Jackson resurects.</li> + <li>Release the drag.</li> + <li>Fail if the drag placeholder gets stuck. Fail if the browser crashes.</li> +</ul> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-003-manual.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-003-manual.html new file mode 100644 index 0000000000..7a118a2208 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-003-manual.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>drag & drop - closing a popup while a drag is in operation out of the window</title> +<style type="text/css"> +p.gone, ul { display: none; } +p.gone + ul { display: block; } +</style> +<script type="text/javascript"> +window.onload = function() { + if( location.href.match(/#popup$/) ) { document.getElementsByTagName('p')[0].className = 'gone'; } + document.getElementsByTagName('ul')[0].ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + setTimeout(function () { window.close(); },2000); + }; +}; +</script> +<p><a href="javascript:alert('Click the link normally');" onclick="window.open('close-drag-003.html#popup','_blank');return false;">Open this page in a popup</a>.</p> +<ul draggable='true'> + <li>Close all pages/browser windows except the popup.</li> + <li>Ensure that the browser window is not maximised.</li> + <li>Quickly drag this text out of the browser window (not over the taskbar), and do not release the drag.</li> + <li>The browser may optionally cancel the drag. The browser may optionally close the popup/window. Fail if the drag placeholder gets stuck. Fail if the browser crashes. Fail if anything horrible happens. Fail if your grandmother does not invite you over for Christmas.</li> + <li>After 2 seconds, fail if the address field shows that the page has closed, but it is still visibly rendered.</li> + <li>Continue dragging back into the browser window (if it is still open).</li> + <li>Release the drag.</li> + <li>Fail if the drag placeholder gets stuck. Fail if the browser crashes or hangs.</li> +</ul> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-004-manual.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-004-manual.html new file mode 100644 index 0000000000..c93f5a3508 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-004-manual.html @@ -0,0 +1,22 @@ +<!doctype html> +<title>drag & drop - manually closing a tab while a drag is in operation</title> +<style type="text/css"> +p.gone, ul { display: none; } +p.gone + ul { display: block; } +</style> +<script type="text/javascript"> +window.onload = function() { + if( location.href.match(/#popup$/) ) { document.getElementsByTagName('p')[0].className = 'gone'; } + document.getElementsByTagName('ul')[0].ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; +</script> +<p><a href="#popup" target="_blank">Open this page in a new tab</a>.</p> +<ul draggable='true'> + <li>Drag this text downwards, and do not release the drag.</li> + <li>Use a keyboard shortcut (eg. Ctrl+W on Windows) to close the tab.</li> + <li>The browser may optionally cancel the drag. The browser may optionally close the tab. Fail if the drag placeholder gets stuck. Fail if the browser crashes.</li> +</ul> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-005-manual.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-005-manual.html new file mode 100644 index 0000000000..1a364113a3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-005-manual.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>drag & drop - manually closing a window while a drag is in operation</title> +<script type="text/javascript"> +window.onload = function() { + document.getElementsByTagName('ul')[0].ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; +</script> +<ul draggable='true'> + <li>Drag this text downwards, and do not release the drag.</li> + <li>Use a keyboard shortcut (eg. Alt+F4 on Windows) to close the window.</li> + <li>The browser may optionally cancel the drag. The browser may optionally close the window. Fail if the drag placeholder gets stuck. Fail if the browser crashes.</li> +</ul> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-006-manual.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-006-manual.html new file mode 100644 index 0000000000..12f95349e8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-006-manual.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>drag & drop - dropping on window decoration after source tab is closed</title> +<style type="text/css"> +p.gone, ul { display: none; } +p.gone + ul { display: block; } +</style> +<script type="text/javascript"> +window.onload = function() { + if( location.href.match(/#popup$/) ) { document.getElementsByTagName('p')[0].className = 'gone'; } + document.getElementsByTagName('ul')[0].ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + setTimeout(function () { window.close(); },2000); + }; +}; +</script> +<p><a href="javascript:alert('Click the link normally');" onclick="window.open('close-drag-006.html#popup','_blank');return false;">Open this page in a popup</a>.</p> +<ul draggable='true'> + <li>Ensure the browser window is not maximised.</li> + <li>Quickly drag this text upwards out of the browser window, and do not release the drag.</li> + <li>This tab should close after a couple of seconds.</li> + <li>Dragging downwards over the browser window's title bar, then release the drag.</li> + <li>Fail if the drag placeholder gets stuck. Fail if the browser crashes.</li> +</ul> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/001.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/001.html new file mode 100644 index 0000000000..953927f917 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>drag & drop - no special cursor for draggable item</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: navy; + left: 250px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<div draggable='true'></div><div></div> + +<!-- In theory a "move" cursor would be better, but browsers have decided to allow the author to choose that +- this test checks for browser compatibility. --> +<p>Move your mouse over the orange box and blue box. It should show the same default mouse cursor in both cases.</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/002.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/002.html new file mode 100644 index 0000000000..9cca00077f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>drag & drop - CSS cursor must be settable on draggable item</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + cursor: pointer; + } + body > div + div { + background-color: navy; + left: 250px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<div draggable='true'></div><div></div> + +<p>Move your mouse over the orange box and blue box. It should show the same "pointer" mouse cursor in both cases (the one normally used for links).</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/003.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/003.html new file mode 100644 index 0000000000..3e4407ff69 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/003.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>drag & drop - should show no-drop for non-dropzones</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: navy; + left: 250px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script type="text/javascript"> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + +</script> + +<div draggable='true'></div><div></div> + +<p>Use your mouse to drag the orange box over the blue box. While dragging, the mouse cursor should appear as a "no-drop" cursor.<br> +Release the drag. The cursor should revert to the default mouse cursor.</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/004.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/004.html new file mode 100644 index 0000000000..8bd8dbfd5e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>drag & drop - no-drop should override CSS cursor when dragging</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div:first-child { + cursor: pointer; + } + body > div + div { + background-color: navy; + left: 250px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script type="text/javascript"> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + +</script> + +<div draggable='true'></div><div></div> + +<p>Move your mouse over the orange box. It should show the "pointer" cursor (normally used for links).<br> +Use your mouse to drag the orange box over the blue box. While dragging, the mouse cursor should appear as a "no-drop" cursor.<br> +Release the drag. The cursor should revert to the default mouse cursor.</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/005.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/005.html new file mode 100644 index 0000000000..d5b3378827 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/005.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>drag & drop - should show no-drop for refused-dropzones</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: navy; + left: 250px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script type="text/javascript"> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; + blue.ondragenter = blue.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'none'; + }; + blue.ondrop = function(e) { + e.preventDefault(); + }; +}; + +</script> + +<div draggable='true'></div><div></div> + +<p>Use your mouse to drag the orange box over the blue box. While dragging, the mouse cursor should appear as a "no-drop" cursor.<br> +Release the drag. The cursor should revert to the default mouse cursor.</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/006.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/006.html new file mode 100644 index 0000000000..1d36e2e6ad --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/006.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>drag & drop - should show drop-allowed for dropzones</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: navy; + left: 250px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script type="text/javascript"> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; + blue.ondragenter = blue.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + blue.ondrop = function(e) { + e.preventDefault(); + }; +}; + +</script> + +<div draggable='true'></div><div></div> + +<p>Use your mouse to drag the orange box over the blue box. While dragging over the blue box, the mouse cursor should appear as a "drop-allowed" or "drop-clopy-allowed" cursor.<br> +Release the drag. The cursor should revert to the default mouse cursor.</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/007.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/007.html new file mode 100644 index 0000000000..70b9506637 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/007.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>drag & drop - should show drop-allowed for move dropzones</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: navy; + left: 250px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script type="text/javascript"> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('Text', 'dummy text'); + }; + blue.ondragenter = blue.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'move'; + }; + blue.ondrop = function(e) { + e.preventDefault(); + }; +}; + +</script> + +<div draggable='true'></div><div></div> + +<p>Use your mouse to drag the orange box over the blue box. While dragging over the blue box, the mouse cursor should appear as a "drop-allowed" or "drop-move-allowed" cursor.<br> +Release the drag. The cursor should revert to the default mouse cursor.</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/008.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/008.html new file mode 100644 index 0000000000..827e636cee --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/008.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>drag & drop - cursor should show drop-allowed for file drops</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + 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 type="text/javascript"> + +window.onload = function() { + var blue = document.getElementsByTagName('div')[1], fuchsia = document.getElementsByTagName('div')[2]; + blue.ondragenter = blue.ondragover = function(e) { + //this test assumes the browser will default to opening the file if the page does not want it + e.preventDefault(); + e.dataTransfer.dropEffect = 'none'; + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + }; +}; + +</script> + +<div></div><div></div><div></div> + +<p>Use your mouse to drag a *.html file from your computer's desktop over the three coloured squares on this page. The mouse cursor should appear as a "drop-allowed" cursor over all three squares.<br> +Release the drag over the pink square. If a prompt appears, accept it. The cursor should revert to the default mouse cursor.</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<p>This test assumes the browser will open dropped files natively if they are not handled by a script.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/009.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/009.html new file mode 100644 index 0000000000..7917ba320e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/009.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>drag & drop - should show drop-allowed for link dropzones</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: navy; + left: 250px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script type="text/javascript"> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'link'; + e.dataTransfer.setData('Text', 'dummy text'); + }; + blue.ondragenter = blue.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'link'; + }; + blue.ondrop = function(e) { + e.preventDefault(); + }; +}; + +</script> + +<div draggable='true'></div><div></div> + +<p>Use your mouse to drag the orange box over the blue box. While dragging over the blue box, the mouse cursor should appear as a "drop-allowed" or "drop-link-allowed" cursor.<br> +Release the drag. The cursor should revert to the default mouse cursor.</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/010.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/010.html new file mode 100644 index 0000000000..d62bcba27a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/010.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>drag & drop - drag ending over draggable element</title> +<style> + body > div { + height: 200px; + width: 200px; + background: orange url(../../resources/100x100-navy.png) repeat-y scroll right top; + } +</style> + +<script type="text/javascript"> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'link'; + e.dataTransfer.setData('Text', 'dummy text'); + }; +}; + +</script> + +<div draggable='true'></div> + +<p>Use your mouse to drag the orange box over the blue box, and release. While dragging over the blue box, the mouse cursor should appear as a "no-drop" cursor.<br> +Release the drag. The cursor should revert to the default mouse cursor.</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/cursors/011.html b/testing/web-platform/tests/html/editing/dnd/platform/cursors/011.html new file mode 100644 index 0000000000..657245ebae --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/cursors/011.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title>drag & drop - cursors after dragging outside window</title> +<style> + body > div { + height: 100px; + width: 100px; + display: inline-block; + background: orange; + } + body > div + div { + background: blue; + color: black; + } +</style> + +<script type="text/javascript"> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'all'; + e.dataTransfer.setData('Text', 'dummy text'); + }; + var copydiv = document.getElementsByTagName('div')[1]; + copydiv.ondragenter = copydiv.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + var movediv = document.getElementsByTagName('div')[2]; + movediv.ondragenter = movediv.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'move'; + }; + var linkdiv = document.getElementsByTagName('div')[3]; + linkdiv.ondragenter = linkdiv.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'link'; + }; + var nodrop = document.getElementsByTagName('div')[4]; + nodrop.ondragenter = nodrop.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'none'; + }; +}; + +</script> + +<div draggable='true'> </div> +<div>Copy</div> +<div>Move</div> +<div>Link</div> +<div>No-drop</div> + +<p>Use your mouse to drag the orange box out of the browser window (not over the system taskbar), then back into the browser window, and over each of the blue squares in turn. +While dragging over the squares, the mouse cursor should be the one given by the text in the relevant square.</p> +<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/drag-keypress-manual.html b/testing/web-platform/tests/html/editing/dnd/platform/drag-keypress-manual.html new file mode 100644 index 0000000000..113c10dc68 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/drag-keypress-manual.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>drag & drop - pressing tab while dragging</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } + body { + height: 5000px; + } + p { + margin-top: 1000px; + } +</style> + +<script> +window.onload = function() { + window.scrollBy(0,1000); + document.getElementsByTagName('div')[0].ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text', 'dummy text'); + }; +}; +</script> +<noscript>Enable JavaScript and reload</noscript> +<p>Drag the orange square. While still dragging, press the Tab key on your keyboard. Fail if the page scrolls.</p> +<div draggable="true"></div> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/drag-link-manual.html b/testing/web-platform/tests/html/editing/dnd/platform/drag-link-manual.html new file mode 100644 index 0000000000..2da4195083 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/drag-link-manual.html @@ -0,0 +1,12 @@ +<!doctype html> +<html> + <head> + <title>Dragging vs selecting links</title> + </head> + <body> + + <p><a href="">Test link, test link, test link, test link, test link, test link, test link, test link, test link</a></p> + <p>Drag the test link above. When dragging vertically, it should drag the link. When dragging horizontally, it should select the text within the link.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/drag-to-title-manual.html b/testing/web-platform/tests/html/editing/dnd/platform/drag-to-title-manual.html new file mode 100644 index 0000000000..fee1299b83 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/drag-to-title-manual.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>Dropping onto the title bar and UI</title> +<script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('ul')[0].ondragstart = function () { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','c'); + }; +}; +</script> +<ul draggable="true"> + <li>Drag this text upwards to the browser window's title bar.</li> + <li>Release the drag. Fail if the drag placeholder does not disappear.</li> + <li>Start dragging again over a blank part of the page (below the text). Fail if the placeholder starts following the mouse again.</li> + <li>Release the drag over the browser's UI (e.g. the address bar). Fail if the browser crashes.</li> +</ul> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/file-drop-position.html b/testing/web-platform/tests/html/editing/dnd/platform/file-drop-position.html new file mode 100644 index 0000000000..7657f359b6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/file-drop-position.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>drag & drop - mouse coordinates during drop</title> +<style> + body > div { + height: 5px; + width: 5px; + background-color: orange; + } +</style> + +<script> +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragover = orange.ondragenter = orange.ondrop = function(e) { + e.preventDefault(); + }; +}; +</script> + +<div></div> + +<p>Save <a href="../resources/fail.png">this image</a> to your desktop. Minimise your browser. Use your pointing device to drag the saved file from your desktop <strong>via your browser's button on your operating system's taskbar</strong> (so that it maximises your browser), onto the small orange box above this text, and release it. If a confirmation dialog appears, accept it. Fail if the browser simply displays the image.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/file-os-to-os.html b/testing/web-platform/tests/html/editing/dnd/platform/file-os-to-os.html new file mode 100644 index 0000000000..a67905d888 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/file-os-to-os.html @@ -0,0 +1,13 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - dragging items from the OS to the OS, via the browser window</title> + </head> + <body> + + <p>This test is only relevant on platforms where it is possible to switch applications in mid-drag (eg. alt+tab, dragging over taskbar buttons, dragging between restored windows).</p> + <p>This testcase requires an external application that accepts dragging and dropping of files - eg. your system's file manager. Ensure that two application windows are open for the external application, showing different folders.</p> + <p>Select a file in the first external application window. Drag the file over the browser window, then over the other external application window and release it. Pass if the file is copied/moved to the second window, as expected by the system.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/file-to-system.html b/testing/web-platform/tests/html/editing/dnd/platform/file-to-system.html new file mode 100644 index 0000000000..f80d5f43c2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/file-to-system.html @@ -0,0 +1,50 @@ +<!doctype html> +<html> + <head> + <title>Dragging a file to the system</title> + <style type="text/css"> +span { display: inline-block; height: 100px; width: 100px; background: orange; } + </style> + <script type="text/javascript"> +window.onload = function () { + var drag = document.getElementsByTagName('span')[0]; + drag.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'copy'; + var filein = document.getElementsByTagName('input')[0]; + if( !filein.files ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.'; + return; + } + if( !filein.files[0] ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.'; + return; + } + var thefile = filein.files[0]; + try { + e.dataTransfer.items.add(thefile); + } catch(err) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file'; + e.preventDefault(); + return; + } + if( e.dataTransfer.files.length != 1 ) { + document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store'; + e.preventDefault(); + } + }; +}; + </script> + </head> + <body> + <div>This test only applies to platforms where dropping a file onto a folder in the system's file manager copies/moves the file to that folder.</div> + <ol> + <li>Open an empty folder in your system's file manager.</li> + <li>Select a non-empty file on your computer using the following input: <input type="file"></li> + <li>Drag the orange square onto the folder in your system's file manager, and release it:<br><span draggable="true"></span></li> + <li>Pass if the file is copied to the folder.</li> + </ol> + <p></p> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/html-to-os-HELPER-FILE.html b/testing/web-platform/tests/html/editing/dnd/platform/html-to-os-HELPER-FILE.html new file mode 100644 index 0000000000..56fa975d43 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/html-to-os-HELPER-FILE.html @@ -0,0 +1,14 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - dragging HTML onto the OS - helper file</title> + </head> + <body> + + <p>This is the helper file. Drop the paragraph here --></p> + <script type="text/javascript"> +document.body.contentEditable = true; + </script> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/html-to-os.html b/testing/web-platform/tests/html/editing/dnd/platform/html-to-os.html new file mode 100644 index 0000000000..5aaf33b42b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/html-to-os.html @@ -0,0 +1,20 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - dragging HTML onto the OS</title> + </head> + <body> + + <p>This test is only relevant on platforms where it is possible to switch applications in mid-drag (eg. alt+tab, dragging over taskbar buttons, dragging between restored windows).</p> + <p>This testcase requires an external application that accepts dropping of HTML from other applications - eg. Google Chrome and Internet Explorer (not Firefox). Load <a href="html-to-os-HELPER-FILE.html">the helper file</a> in the external application.</p> + <p draggable="true">Drag this paragraph to the other application and release it. De-select the text in that application if it is selected. Pass if "Pass if this text is on a green background" appears in the other application, and if it has a green background, and if the drag placeholder disappears when the drag is released.</p> + <script type="text/javascript"> +document.getElementsByTagName('p')[2].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/html', '<span style="background:lime;color:black;">Pass if this text is on a green background</span>'); +}; + </script> + <p>Disable JavaScript in this browser and repeat the test. Pass if the entire dragged paragraph appears in the other application. Vendors may optionally choose to ignore this requirement.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/html-unicode-to-os.html b/testing/web-platform/tests/html/editing/dnd/platform/html-unicode-to-os.html new file mode 100644 index 0000000000..433d59d103 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/html-unicode-to-os.html @@ -0,0 +1,19 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - dragging HTML onto the OS</title> + </head> + <body> + + <p>This test is only relevant on platforms where it is possible to switch applications in mid-drag (eg. alt+tab, dragging over taskbar buttons, dragging between restored windows).</p> + <p>This testcase requires an external application that accepts dropping of unicode HTML from other applications - eg. Google Chrome (not Firefox or Internet Explorer). Load <a href="html-to-os-HELPER-FILE.html">the helper file</a> in the external application.</p> + <p draggable="true">Drag this paragraph to the other application and release it. De-select the text in that application if it is selected. Pass if "Pass if this text is on a green background 中文אידישрусский" appears in the other application, and if it has a green background, and if the drag placeholder disappears when the drag is released.</p> + <script type="text/javascript"> +document.getElementsByTagName('p')[2].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/html', '<span style="background:lime;color:black;">Pass if this text is on a green background 中文אידישрусский</span>'); +}; + </script> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/inputs-no-js.html b/testing/web-platform/tests/html/editing/dnd/platform/inputs-no-js.html new file mode 100644 index 0000000000..f5f2fbc402 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/inputs-no-js.html @@ -0,0 +1,15 @@ +<!doctype html> +<html> + <head> + <title>Dropping selections with JS disabled</title> + </head> + <body> + + <ol> + <li>Disable JavaScript</li> + <li>Select some text in <input type="text" value="this input"> and drag it into the following input: <input type="text" value=""> - the text you dragged should appear in there.</li> + <li>Select some text in this sentence and drag it into the following input: <input type="text" value=""> - the text you dragged should appear in there.</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/001.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/001.html new file mode 100644 index 0000000000..563cee9ea5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/001.html @@ -0,0 +1,47 @@ +<!doctype html> +<title>Interrupted drag with second drag attempt</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } + body > div + div + div { + background-color: fuchsia; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], fuchsia = document.getElementsByTagName('div')[2]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = function (e) { + alert('JS alert'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function (e) { + e.preventDefault(); + }; + fuchsia.ondrop = function (e) { + document.getElementsByTagName('ol')[0].textContent = e.dataTransfer.getData('text'); + e.preventDefault(); + }; +}; +</script> +<div draggable="true"></div> +<div></div> +<div></div> + +<ol> + <li>Drag the orange square over the blue square.</li> + <li>An alert may appear. Do not dismiss it. If an alert does not appear, PASS, and ignore any further steps.</li> + <li>Drag a file that your browser cannot open natively from your computer onto a blank part of the page. If a download dialog appears at any point after this, cancel it, and return to this page.</li> + <li>Dismiss the alert without using the left mouse button (eg. use keyboard, or mouse gestures such as gesture-down,gesture-right).</li> + <li>Do a short drag and drop within the pink square. If nothing happens, PASS, and ignore any further steps.</li> + <li>The word "PASS" should appear in place of this text.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/002.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/002.html new file mode 100644 index 0000000000..2091f39a7f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/002.html @@ -0,0 +1,49 @@ +<!doctype html> +<title>Interrupted drag with second drag attempt and tab change</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } + body > div + div + div { + background-color: fuchsia; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], fuchsia = document.getElementsByTagName('div')[2]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = function (e) { + alert('JS alert'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function (e) { + e.preventDefault(); + }; + fuchsia.ondrop = function (e) { + document.getElementsByTagName('ol')[0].textContent = e.dataTransfer.getData('text'); + e.preventDefault(); + }; +}; +</script> +<div draggable="true"></div> +<div></div> +<div></div> + +<ol> + <li>Make sure at least one other tab is open.</li> + <li>Drag the orange square over the blue square.</li> + <li>An alert may appear. Do not dismiss it. If an alert does not appear, PASS, and ignore any further steps.</li> + <li>Click the other tab to focus it (or focus it in whatever way works). If you cannot change tabs, PASS, and ignore any further steps.</li> + <li>Drag a file that your browser cannot open natively from your computer and drop onto that page, then click the tab for this page to return here. If a download dialog appears at any point after this, cancel it, and return to this page.</li> + <li>Dismiss the alert without using the left mouse button (eg. use keyboard, or mouse gestures such as gesture-down,gesture-right).</li> + <li>Do a short drag and drop within the pink square. If nothing happens, PASS, and ignore any further steps.</li> + <li>The word "PASS" should appear in place of this text.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/003.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/003.html new file mode 100644 index 0000000000..c09f9a53ec --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/003.html @@ -0,0 +1,59 @@ +<!doctype html> +<title>Interrupted drag with second in-document drag attempt</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } + body > div + div + div { + background-color: yellow; + } + body > div + div + div + div { + background-color: fuchsia; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], yellow = document.getElementsByTagName('div')[2], fuchsia = document.getElementsByTagName('div')[3]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + yellow.ondragstart = function (e) { + e.dataTransfer.setData('text','FAIL'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = function (e) { + alert('JS alert'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function (e) { + e.preventDefault(); + }; + fuchsia.ondrop = function (e) { + document.getElementsByTagName('ol')[0].textContent = e.dataTransfer.getData('text'); + e.preventDefault(); + }; +}; +</script> +<div draggable="true"></div> +<div></div> +<div draggable="true"></div> +<div></div> + +<ol> + <li>Open this page in two separate tabs, and start on tab #1.</li> + <li>Drag the orange square over the blue square.</li> + <li>An alert may appear. Do not dismiss it. If an alert does not appear, PASS, and ignore any further steps.</li> + <li>Click the other tab to focus it (or focus it in whatever way works). If you cannot change tabs, PASS, and ignore any further steps.</li> + <li>On tab #2, drag the yellow square over the blue square. If you cannot drag the yellow square, PASS, and ignore any further steps.</li> + <li>An alert may appear. Do not dismiss it.</li> + <li>Return to tab #1.</li> + <li>Dismiss the alert without using the left mouse button (eg. use keyboard, or mouse gestures such as gesture-down,gesture-right).</li> + <li>Do a short drag and drop within the pink square. If nothing happens, PASS, and ignore any further steps.</li> + <li>The word "PASS" should appear in place of this text.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/004.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/004.html new file mode 100644 index 0000000000..41492fe992 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/004.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>File drag during prompt for upload</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragenter = orange.ondragover = function (e) { + e.preventDefault(); + }; + orange.ondrop = function (e) { + e.preventDefault(); + document.getElementsByTagName('ol')[0].innerHTML = ( e.dataTransfer.files[0] && e.dataTransfer.files[0].name == 'pass.txt' ) ? 'PASS' : 'FAIL'; + }; +}; +</script> +<div draggable="true"></div> + +<ol> + <li>Save <a href="pass.txt">pass.txt</a> and <a href="fail.txt">fail.txt</a> onto your computer.</li> + <li>Drag pass.txt from your computer onto the orange square.</li> + <li>A prompt should appear. Do not dismiss it. If a prompt does not appear, ignore any further steps, and check the tests in ../../file/</li> + <li>Drag fail.txt from your computer onto a blank part of this page. Fail if this page is replaced.</li> + <li>Accept the prompt. Fail if nothing happens.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/005.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/005.html new file mode 100644 index 0000000000..a0bdae3f49 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/005.html @@ -0,0 +1,35 @@ +<!doctype html> +<title>File drag and tab change during prompt for upload</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragenter = orange.ondragover = function (e) { + e.preventDefault(); + }; + orange.ondrop = function (e) { + e.preventDefault(); + document.getElementsByTagName('ol')[0].innerHTML = ( e.dataTransfer.files[0] && e.dataTransfer.files[0].name ); + }; +}; +</script> +<div draggable="true"></div> + +<ol> + <li>Save <a href="file1.txt">file1.txt</a> and <a href="file2.txt">file2.txt</a> onto your computer.</li> + <li>Open this page in two separate tabs, and start on tab #1.</li> + <li>Drag file1.txt from your computer onto the orange square.</li> + <li>A prompt should appear. Do not dismiss it. If a prompt does not appear, ignore any further steps, and check the tests in ../../file/</li> + <li>Click the other tab to focus it (or focus it in whatever way works). If you cannot change tabs, PASS, and ignore any further steps.</li> + <li>Drag file2.txt from your computer onto the orange square. Fail if this text (but not the orange square) is replaced without any prompt.</li> + <li>If a prompt appears, do not dismiss it.</li> + <li>Return to tab #1.</li> + <li>Accept the prompt. Fail if it cannot be accepted. Pass if this text (but not the orange square) is replaced with the text: file1.txt</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/006.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/006.html new file mode 100644 index 0000000000..73cfb2d696 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/006.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>Alert during dragstart</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], hasfired = false; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + if( hasfired ) { return; } + hasfired = true; + alert('JS alert'); + }; +}; +</script> +<div draggable="true"></div> + +<ol> + <li>Drag the orange square downwards until the drag placeholder appears.</li> + <li>An alert may appear - release the mouse over the page, not the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards again. Fail if that is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/007.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/007.html new file mode 100644 index 0000000000..6c8daba200 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/007.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>Alert during drag</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], hasfired = false; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + orange.ondrag = function (e) { + if( hasfired ) { return; } + hasfired = true; + alert('JS alert'); + }; +}; +</script> +<div draggable="true"></div> + +<ol> + <li>Drag the orange square downwards until the drag placeholder appears.</li> + <li>An alert may appear - release the mouse over the page, not the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards again. Fail if that is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/008.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/008.html new file mode 100644 index 0000000000..2339e29431 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/008.html @@ -0,0 +1,40 @@ +<!doctype html> +<title>Alert during dragenter</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = function (e) { + e.preventDefault(); + alert('JS alert'); + }; + blue.ondragover = function (e) { + e.preventDefault(); + }; +}; +</script> +<div draggable="true"></div> +<div></div> + +<ol> + <li>Drag the orange square over the blue square.</li> + <li>An alert may appear - release the mouse over the page, not the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards. Fail if it is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/009.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/009.html new file mode 100644 index 0000000000..e19b1c5d72 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/009.html @@ -0,0 +1,42 @@ +<!doctype html> +<title>Alert during dragover</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], hasfired = false; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = function (e) { + e.preventDefault(); + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( hasfired ) { return; } + hasfired = true; + alert('JS alert'); + }; +}; +</script> +<div draggable="true"></div> +<div></div> + +<ol> + <li>Drag the orange square over the blue square.</li> + <li>An alert may appear - release the mouse over the page, not the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards. Fail if it is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/010.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/010.html new file mode 100644 index 0000000000..583746bbad --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/010.html @@ -0,0 +1,39 @@ +<!doctype html> +<title>Alert during dragleave</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = blue.ondragover = function (e) { + e.preventDefault(); + }; + blue.ondragleave = function (e) { + alert('JS alert'); + }; +}; +</script> +<div draggable="true"></div> +<div></div> + +<ol> + <li>Drag the orange square over the blue square, then back over the orange square.</li> + <li>An alert may appear - release the mouse over the page, not the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards. Fail if it is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/011.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/011.html new file mode 100644 index 0000000000..8b72b63768 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/011.html @@ -0,0 +1,40 @@ +<!doctype html> +<title>Alert during drop</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = blue.ondragover = function (e) { + e.preventDefault(); + }; + blue.ondrop = function (e) { + e.preventDefault(); + alert('JS alert'); + }; +}; +</script> +<div draggable="true"></div> +<div></div> + +<ol> + <li>Drag the orange square over the blue square, then release it.</li> + <li>An alert may appear - release the mouse over the page, not the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right).</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards. Fail if it is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/012.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/012.html new file mode 100644 index 0000000000..1b31468b43 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/012.html @@ -0,0 +1,44 @@ +<!doctype html> +<title>Alert during dragend</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], hasfired = false; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = blue.ondragover = function (e) { + e.preventDefault(); + }; + blue.ondrop = function (e) { + e.preventDefault(); + }; + orange.ondragend = function (e) { + if( hasfired ) { return; } + hasfired = true; + alert('JS alert'); + }; +}; +</script> +<div draggable="true"></div> +<div></div> + +<ol> + <li>Drag the orange square over the blue square, then release it.</li> + <li>An alert may appear - release the mouse over the page, not the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right).</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards. Fail if it is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/013.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/013.html new file mode 100644 index 0000000000..9e9747601a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/013.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>drag & drop - drag interrupted by alert must not break mouse interaction with UI</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } + body > div + div { + margin-top: 10px; + height: 200px; + width: 200px; + background-color: blue; + } +</style> + +<script> +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text', 'dummy text'); + }; + blue.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + if( !window.doneonce ) { + alert('2. It should also ideally be possible to dismiss this dialog with your mouse/pointing device (do not use mouse gestures).'); + } + window.doneonce = true; + }; + blue.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + alert('1. It should ideally be possible to dismiss this dialog with your mouse/pointing device (do not use mouse gestures).'); + }; + blue.ondrop = function(e) { + e.preventDefault(); + }; +}; +</script> + +<p>Drag the orange square onto the blue square.</p> +<div draggable="true"></div> +<div></div> + +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/014.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/014.html new file mode 100644 index 0000000000..23f6a3e4db --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/014.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>drag & drop - drop interrupted by alert must not break mouse interaction with UI</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + } + body > div + div { + margin-top: 10px; + height: 200px; + width: 200px; + background-color: blue; + } +</style> + +<script> +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text', 'dummy text'); + }; + blue.ondragover = blue.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + blue.ondrop = function(e) { + e.preventDefault(); + alert('It should ideally be possible to dismiss this dialog with your mouse/pointing device (do not use mouse gestures).'); + }; +}; +</script> + +<p>Drag the orange square onto the blue square.</p> +<div draggable="true"></div> +<div></div> + +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/015.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/015.html new file mode 100644 index 0000000000..650c15ac3e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/015.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>Alert during dragstart with release over dialog</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], hasfired = false; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + if( hasfired ) { return; } + hasfired = true; + alert('Release the mouse over this dialog'); + }; +}; +</script> +<div draggable="true"></div> + +<ol> + <li>Drag the orange square downwards until the drag placeholder appears.</li> + <li>An alert may appear - release the mouse over the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards again. Fail if that is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/016.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/016.html new file mode 100644 index 0000000000..d4c42941e3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/016.html @@ -0,0 +1,34 @@ +<!doctype html> +<title>Alert during drag with release over dialog</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], hasfired = false; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + orange.ondrag = function (e) { + if( hasfired ) { return; } + hasfired = true; + alert('Release the mouse over this dialog'); + }; +}; +</script> +<div draggable="true"></div> + +<ol> + <li>Drag the orange square downwards until the drag placeholder appears.</li> + <li>An alert may appear - release the mouse over the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards again. Fail if that is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/017.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/017.html new file mode 100644 index 0000000000..1c10d8a370 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/017.html @@ -0,0 +1,40 @@ +<!doctype html> +<title>Alert during dragenter with release over dialog</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = function (e) { + e.preventDefault(); + alert('Release the mouse over this dialog'); + }; + blue.ondragover = function (e) { + e.preventDefault(); + }; +}; +</script> +<div draggable="true"></div> +<div></div> + +<ol> + <li>Drag the orange square over the blue square.</li> + <li>An alert may appear - release the mouse over the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards. Fail if it is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/018.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/018.html new file mode 100644 index 0000000000..c0067d00d8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/018.html @@ -0,0 +1,42 @@ +<!doctype html> +<title>Alert during dragover with release over dialog</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], hasfired = false; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = function (e) { + e.preventDefault(); + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( hasfired ) { return; } + hasfired = true; + alert('Release the mouse over this dialog'); + }; +}; +</script> +<div draggable="true"></div> +<div></div> + +<ol> + <li>Drag the orange square over the blue square.</li> + <li>An alert may appear - release the mouse over the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards. Fail if it is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/019.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/019.html new file mode 100644 index 0000000000..dca273d9d4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/019.html @@ -0,0 +1,39 @@ +<!doctype html> +<title>Alert during dragleave with release over dialog</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } + body > div + div { + background-color: navy; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','PASS'); + e.dataTransfer.effectAllowed = 'all'; + }; + blue.ondragenter = blue.ondragover = function (e) { + e.preventDefault(); + }; + blue.ondragleave = function (e) { + alert('Release the mouse over this dialog'); + }; +}; +</script> +<div draggable="true"></div> +<div></div> + +<ol> + <li>Drag the orange square over the blue square, then back over the orange square.</li> + <li>An alert may appear - release the mouse over the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> + <li>Try to drag the orange square downwards. Fail if it is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/020.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/020.html new file mode 100644 index 0000000000..e10fa46f2a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/020.html @@ -0,0 +1,33 @@ +<!doctype html> +<title>Alert during dragenter for file drag</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragenter = function (e) { + e.preventDefault(); + alert('JS alert'); + }; + orange.ondragover = orange.ondrop = function (e) { + e.preventDefault(); + }; +}; +</script> +<div draggable="true"></div> + +<ol> + <li>Drag a file (one that your browser cannot open natively, such as an executable file) from your system file manager over the orange square.</li> + <li>An alert may appear - release the mouse over a blank part of the page, not the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag and accept any prompt to upload the file.</li> + <li>If a file download dialog appears, cancel it and return to this page.</li> + <li>Fail if the alert reappears.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/021.html b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/021.html new file mode 100644 index 0000000000..d393e0846c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/021.html @@ -0,0 +1,33 @@ +<!doctype html> +<title>Alert during dragenter for file drag with release over dialog</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragenter = function (e) { + e.preventDefault(); + alert('JS alert'); + }; + orange.ondragover = orange.ondrop = function (e) { + e.preventDefault(); + }; +}; +</script> +<div draggable="true"></div> + +<ol> + <li>Drag a file (one that your browser cannot open natively, such as an executable file) from your system file manager over the orange square.</li> + <li>An alert may appear - release the mouse over the dialog. Dismiss it (you may need to use keyboard or mouse gestures such as gesture-down,gesture-right). If it does not appear, release the drag and accept any prompt to upload the file.</li> + <li>If a file download dialog appears, cancel it and return to this page.</li> + <li>Fail if the alert reappears.</li> + <li>The mouse cursor may continue to show that a drag is in operation. If so, attempt to select some of this text with the mouse before continuing to the text step.</li> + <li>Fail if the mouse continues to show that a drag is in operation.</li> + <li>Try to select some text in this sentence. Fail if it is not possible.</li> +</ol> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/fail.txt b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/fail.txt new file mode 100644 index 0000000000..fc26162516 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/fail.txt @@ -0,0 +1 @@ +FAIL
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/file1.txt b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/file1.txt new file mode 100644 index 0000000000..6c8db5df2b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/file1.txt @@ -0,0 +1 @@ +file 1
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/file2.txt b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/file2.txt new file mode 100644 index 0000000000..dd4128ed9e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/file2.txt @@ -0,0 +1 @@ +file 2
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/interrupt/pass.txt b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/pass.txt new file mode 100644 index 0000000000..fc26162516 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/interrupt/pass.txt @@ -0,0 +1 @@ +FAIL
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/keyboardshortcuts.html b/testing/web-platform/tests/html/editing/dnd/platform/keyboardshortcuts.html new file mode 100644 index 0000000000..441ffd3df1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/keyboardshortcuts.html @@ -0,0 +1,18 @@ +<!doctype html> +<html> + <head> + <title>Keyboard shortcuts during drag/drop</title> + </head> + <body> + + <ol> + <li>Select some text in this sentence and begin dragging it.</li> + <li>While dragging, use your keyboard shortcut to reload the page. It should work without cancelling the drag.</li> + <li>While dragging, use your keyboard shortcut to select all text on the page. It should work without cancelling the drag.</li> + <li>While dragging, use your keyboard shortcut to open a new tab. It should work without cancelling the drag.</li> + <li>While dragging, use your keyboard shortcut to switch to another tab. It should work without cancelling the drag.</li> + <li>While dragging, use your keyboard shortcuts to go back and forward in history (<a href="#next">use this link first to add a history entry if needed</a>). It should work without cancelling the drag.</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/all.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/all.html new file mode 100644 index 0000000000..bb76d3a0cd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/all.html @@ -0,0 +1,175 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys selecting dropEffect with 'all'</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var countedDrops = 0, bde, bdo, bdo2, fde, fdo, fdr; + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','http://example.com/'); + e.dataTransfer.effectAllowed = 'all'; + bde = bdo = bdo2 = fde = fdo = fdr = ''; + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = function (e) { + e.preventDefault(); + if( !bde ) { bde = e.dataTransfer.dropEffect; } + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( !bdo ) { + bdo = e.dataTransfer.dropEffect; + } + //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers + //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 + bdo2 = e.dataTransfer.dropEffect; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondragenter = function (e) { + e.preventDefault(); + if( !fde ) { fde = e.dataTransfer.dropEffect; } + }; + fuchsia.ondragover = function (e) { + e.preventDefault(); + if( !fdo ) { fdo = e.dataTransfer.dropEffect; } + }; + fuchsia.ondrop = function (e) { + e.preventDefault(); + fdr = e.dataTransfer.dropEffect; + }; + orange.ondragend = function (e) { + var ode = e.dataTransfer.dropEffect, temparray; + if( bde == bdo && bdo2 == fdr && fde == fdr && fdo == fdr && ode == fdr ) { + if( bde == fdr ) { + tmparray = [fdr]; + } else { + tmparray = [bde,fdr]; + } + } else if( bde == bdo && bdo2 == fdo && fde == fdo && !fdr ) { + tmparray = [bde,fdo,ode]; + } else { + tmparray = [bde,bdo,bdo2,fde,fdo,fdr,ode]; + } + tmparray[ tmparray.length - 1 ] = '<strong>' + tmparray[ tmparray.length - 1 ] + '<\/strong>'; + document.getElementsByTagName('div')[3].innerHTML = (++countedDrops) + '. ' + tmparray.join('=>'); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div></div> + <div><strong> </strong></div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform</li> + <li>Continue dragging over the pink square</li> + <li>Release the drag, then the keys</li> + <li>Check that the correct drop effect is produced in each case. If the mouse cursor can change to indicate the final type of drop effect that will take place, it should change to the relevant type (the one in bold) once the modifier keys are pressed.</li> + </ol> + <!-- Windows Explorer uses Ctrl for copy, Shift for move, Alt or Ctrl+Shift for link. --> + <!-- Anything else invalidates the modifiers, and reverts to default. --> + <table> + <caption>Windows</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td>None</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Alt</td><td>copy=><strong>link</strong></td></tr> + <tr><td>Ctrl+Shift</td><td>copy=><strong>link</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Alt+Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td><strong>copy</strong></td></tr> + </tbody> + </table> + <!-- KDE Konqueror uses Ctrl for copy, Shift for move, Ctrl+Shift for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <!-- Gnome Nautilus uses Ctrl for copy, Shift for move, Ctrl+Shift for link (and Alt to open a context menu). --> + <!-- Anything else (including Alt when combined with other modifiers) is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Unix/Linux</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td>None</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Shift</td><td>copy=><strong>link</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Alt+Shift</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td>copy=><strong>link</strong></td></tr> + </tbody> + </table> + <!-- Mac Finder uses Option for copy, Command for move, Command+Option for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Mac</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td>None</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Option/alt</td><td><strong>copy</strong></td></tr> + <tr><td>Command</td><td>copy=><strong>move</strong></td></tr> + + <tr><td>Ctrl+Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Command</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Shift+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Shift+Command</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Command+Option</td><td>copy=><strong>link</strong></td></tr> + + <tr><td>Ctrl+Shift+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Shift+Command</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Ctrl+Command+Option</td><td>copy=><strong>link</strong></td></tr> + <tr><td>Shift+Command+Option</td><td>copy=><strong>link</strong></td></tr> + + <tr><td>Ctrl+Shift+Command+Option</td><td>copy=><strong>link</strong></td></tr> + </tbody> + </table> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/copy.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/copy.html new file mode 100644 index 0000000000..597fdc03a9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/copy.html @@ -0,0 +1,175 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys selecting dropEffect with 'copy'</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var countedDrops = 0, bde, bdo, bdo2, fde, fdo, fdr; + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','http://example.com/'); + e.dataTransfer.effectAllowed = 'copy'; + bde = bdo = bdo2 = fde = fdo = fdr = ''; + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = function (e) { + e.preventDefault(); + if( !bde ) { bde = e.dataTransfer.dropEffect; } + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( !bdo ) { + bdo = e.dataTransfer.dropEffect; + } + //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers + //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 + bdo2 = e.dataTransfer.dropEffect; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondragenter = function (e) { + e.preventDefault(); + if( !fde ) { fde = e.dataTransfer.dropEffect; } + }; + fuchsia.ondragover = function (e) { + e.preventDefault(); + if( !fdo ) { fdo = e.dataTransfer.dropEffect; } + }; + fuchsia.ondrop = function (e) { + e.preventDefault(); + fdr = e.dataTransfer.dropEffect; + }; + orange.ondragend = function (e) { + var ode = e.dataTransfer.dropEffect, temparray; + if( bde == bdo && bdo2 == fdr && fde == fdr && fdo == fdr && ode == fdr ) { + if( bde == fdr ) { + tmparray = [fdr]; + } else { + tmparray = [bde,fdr]; + } + } else if( bde == bdo && bdo2 == fdo && fde == fdo && !fdr ) { + tmparray = [bde,fdo,ode]; + } else { + tmparray = [bde,bdo,bdo2,fde,fdo,fdr,ode]; + } + tmparray[ tmparray.length - 1 ] = '<strong>' + tmparray[ tmparray.length - 1 ] + '<\/strong>'; + document.getElementsByTagName('div')[3].innerHTML = (++countedDrops) + '. ' + tmparray.join('=>'); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div></div> + <div><strong> </strong></div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform</li> + <li>Continue dragging over the pink square</li> + <li>Release the drag, then the keys</li> + <li>Check that the correct drop effect is produced in each case. If the mouse cursor can change to indicate the final type of drop effect that will take place, it should change to the relevant type (the one in bold) once the modifier keys are pressed.</li> + </ol> + <!-- Windows Explorer uses Ctrl for copy, Shift for move, Alt or Ctrl+Shift for link. --> + <!-- Anything else invalidates the modifiers, and reverts to default. --> + <table> + <caption>Windows</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td>None</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Alt</td><td>copy=>link=><strong>none</strong></td></tr> + <tr><td>Ctrl+Shift</td><td>copy=>link=><strong>none</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Alt+Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td><strong>copy</strong></td></tr> + </tbody> + </table> + <!-- KDE Konqueror uses Ctrl for copy, Shift for move, Ctrl+Shift for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <!-- Gnome Nautilus uses Ctrl for copy, Shift for move, Ctrl+Shift for link (and Alt to open a context menu). --> + <!-- Anything else (including Alt when combined with other modifiers) is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Unix/Linux</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Shift</td><td>copy=>link=><strong>none</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Alt+Shift</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td>copy=>link=><strong>none</strong></td></tr> + </tbody> + </table> + <!-- Mac Finder uses Option for copy, Command for move, Command+Option for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Mac</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Option/alt</td><td><strong>copy</strong></td></tr> + <tr><td>Command</td><td>copy=>move=><strong>none</strong></td></tr> + + <tr><td>Ctrl+Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Command</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Shift+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Shift+Command</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Command+Option</td><td>copy=>link=><strong>none</strong></td></tr> + + <tr><td>Ctrl+Shift+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Shift+Command</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Ctrl+Command+Option</td><td>copy=>link=><strong>none</strong></td></tr> + <tr><td>Shift+Command+Option</td><td>copy=>link=><strong>none</strong></td></tr> + + <tr><td>Ctrl+Shift+Command+Option</td><td>copy=>link=><strong>none</strong></td></tr> + </tbody> + </table> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/copylink.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/copylink.html new file mode 100644 index 0000000000..042031d004 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/copylink.html @@ -0,0 +1,175 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys selecting dropEffect with 'copyLink'</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var countedDrops = 0, bde, bdo, bdo2, fde, fdo, fdr; + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','http://example.com/'); + e.dataTransfer.effectAllowed = 'copyLink'; + bde = bdo = bdo2 = fde = fdo = fdr = ''; + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = function (e) { + e.preventDefault(); + if( !bde ) { bde = e.dataTransfer.dropEffect; } + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( !bdo ) { + bdo = e.dataTransfer.dropEffect; + } + //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers + //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 + bdo2 = e.dataTransfer.dropEffect; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondragenter = function (e) { + e.preventDefault(); + if( !fde ) { fde = e.dataTransfer.dropEffect; } + }; + fuchsia.ondragover = function (e) { + e.preventDefault(); + if( !fdo ) { fdo = e.dataTransfer.dropEffect; } + }; + fuchsia.ondrop = function (e) { + e.preventDefault(); + fdr = e.dataTransfer.dropEffect; + }; + orange.ondragend = function (e) { + var ode = e.dataTransfer.dropEffect, temparray; + if( bde == bdo && bdo2 == fdr && fde == fdr && fdo == fdr && ode == fdr ) { + if( bde == fdr ) { + tmparray = [fdr]; + } else { + tmparray = [bde,fdr]; + } + } else if( bde == bdo && bdo2 == fdo && fde == fdo && !fdr ) { + tmparray = [bde,fdo,ode]; + } else { + tmparray = [bde,bdo,bdo2,fde,fdo,fdr,ode]; + } + tmparray[ tmparray.length - 1 ] = '<strong>' + tmparray[ tmparray.length - 1 ] + '<\/strong>'; + document.getElementsByTagName('div')[3].innerHTML = (++countedDrops) + '. ' + tmparray.join('=>'); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div></div> + <div><strong> </strong></div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform</li> + <li>Continue dragging over the pink square</li> + <li>Release the drag, then the keys</li> + <li>Check that the correct drop effect is produced in each case. If the mouse cursor can change to indicate the final type of drop effect that will take place, it should change to the relevant type (the one in bold) once the modifier keys are pressed.</li> + </ol> + <!-- Windows Explorer uses Ctrl for copy, Shift for move, Alt or Ctrl+Shift for link. --> + <!-- Anything else invalidates the modifiers, and reverts to default. --> + <table> + <caption>Windows</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td>None</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Alt</td><td>copy=><strong>link</strong></td></tr> + <tr><td>Ctrl+Shift</td><td>copy=><strong>link</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Alt+Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td><strong>copy</strong></td></tr> + </tbody> + </table> + <!-- KDE Konqueror uses Ctrl for copy, Shift for move, Ctrl+Shift for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <!-- Gnome Nautilus uses Ctrl for copy, Shift for move, Ctrl+Shift for link (and Alt to open a context menu). --> + <!-- Anything else (including Alt when combined with other modifiers) is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Unix/Linux</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Shift</td><td>copy=><strong>link</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Alt+Shift</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td>copy=><strong>link</strong></td></tr> + </tbody> + </table> + <!-- Mac Finder uses Option for copy, Command for move, Command+Option for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Mac</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Option/alt</td><td><strong>copy</strong></td></tr> + <tr><td>Command</td><td>copy=>move=><strong>none</strong></td></tr> + + <tr><td>Ctrl+Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Command</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Shift+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Shift+Command</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Command+Option</td><td>copy=><strong>link</strong></td></tr> + + <tr><td>Ctrl+Shift+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Shift+Command</td><td>copy=>move=><strong>none</strong></td></tr> + <tr><td>Ctrl+Command+Option</td><td>copy=><strong>link</strong></td></tr> + <tr><td>Shift+Command+Option</td><td>copy=><strong>link</strong></td></tr> + + <tr><td>Ctrl+Shift+Command+Option</td><td>copy=><strong>link</strong></td></tr> + </tbody> + </table> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/copymove.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/copymove.html new file mode 100644 index 0000000000..b03e4f2677 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/copymove.html @@ -0,0 +1,175 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys selecting dropEffect with 'copyMove'</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var countedDrops = 0, bde, bdo, bdo2, fde, fdo, fdr; + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','http://example.com/'); + e.dataTransfer.effectAllowed = 'copyMove'; + bde = bdo = bdo2 = fde = fdo = fdr = ''; + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = function (e) { + e.preventDefault(); + if( !bde ) { bde = e.dataTransfer.dropEffect; } + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( !bdo ) { + bdo = e.dataTransfer.dropEffect; + } + //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers + //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 + bdo2 = e.dataTransfer.dropEffect; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondragenter = function (e) { + e.preventDefault(); + if( !fde ) { fde = e.dataTransfer.dropEffect; } + }; + fuchsia.ondragover = function (e) { + e.preventDefault(); + if( !fdo ) { fdo = e.dataTransfer.dropEffect; } + }; + fuchsia.ondrop = function (e) { + e.preventDefault(); + fdr = e.dataTransfer.dropEffect; + }; + orange.ondragend = function (e) { + var ode = e.dataTransfer.dropEffect, temparray; + if( bde == bdo && bdo2 == fdr && fde == fdr && fdo == fdr && ode == fdr ) { + if( bde == fdr ) { + tmparray = [fdr]; + } else { + tmparray = [bde,fdr]; + } + } else if( bde == bdo && bdo2 == fdo && fde == fdo && !fdr ) { + tmparray = [bde,fdo,ode]; + } else { + tmparray = [bde,bdo,bdo2,fde,fdo,fdr,ode]; + } + tmparray[ tmparray.length - 1 ] = '<strong>' + tmparray[ tmparray.length - 1 ] + '<\/strong>'; + document.getElementsByTagName('div')[3].innerHTML = (++countedDrops) + '. ' + tmparray.join('=>'); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div></div> + <div><strong> </strong></div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform</li> + <li>Continue dragging over the pink square</li> + <li>Release the drag, then the keys</li> + <li>Check that the correct drop effect is produced in each case. If the mouse cursor can change to indicate the final type of drop effect that will take place, it should change to the relevant type (the one in bold) once the modifier keys are pressed.</li> + </ol> + <!-- Windows Explorer uses Ctrl for copy, Shift for move, Alt or Ctrl+Shift for link. --> + <!-- Anything else invalidates the modifiers, and reverts to default. --> + <table> + <caption>Windows</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td>None</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Alt</td><td>copy=>link=><strong>none</strong></td></tr> + <tr><td>Ctrl+Shift</td><td>copy=>link=><strong>none</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Alt+Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td><strong>copy</strong></td></tr> + </tbody> + </table> + <!-- KDE Konqueror uses Ctrl for copy, Shift for move, Ctrl+Shift for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <!-- Gnome Nautilus uses Ctrl for copy, Shift for move, Ctrl+Shift for link (and Alt to open a context menu). --> + <!-- Anything else (including Alt when combined with other modifiers) is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Unix/Linux</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Shift</td><td>copy=>link=><strong>none</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>copy</strong></td></tr> + <tr><td>Alt+Shift</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td>copy=>link=><strong>none</strong></td></tr> + </tbody> + </table> + <!-- Mac Finder uses Option for copy, Command for move, Command+Option for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Mac</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl</td><td><strong>copy</strong></td></tr> + <tr><td>Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Option/alt</td><td><strong>copy</strong></td></tr> + <tr><td>Command</td><td>copy=><strong>move</strong></td></tr> + + <tr><td>Ctrl+Shift</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Command</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Shift+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Shift+Command</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Command+Option</td><td>copy=>link=><strong>none</strong></td></tr> + + <tr><td>Ctrl+Shift+Option</td><td><strong>copy</strong></td></tr> + <tr><td>Ctrl+Shift+Command</td><td>copy=><strong>move</strong></td></tr> + <tr><td>Ctrl+Command+Option</td><td>copy=>link=><strong>none</strong></td></tr> + <tr><td>Shift+Command+Option</td><td>copy=>link=><strong>none</strong></td></tr> + + <tr><td>Ctrl+Shift+Command+Option</td><td>copy=>link=><strong>none</strong></td></tr> + </tbody> + </table> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/link.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/link.html new file mode 100644 index 0000000000..db13709f65 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/link.html @@ -0,0 +1,175 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys selecting dropEffect with 'link'</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var countedDrops = 0, bde, bdo, bdo2, fde, fdo, fdr; + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','http://example.com/'); + e.dataTransfer.effectAllowed = 'link'; + bde = bdo = bdo2 = fde = fdo = fdr = ''; + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = function (e) { + e.preventDefault(); + if( !bde ) { bde = e.dataTransfer.dropEffect; } + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( !bdo ) { + bdo = e.dataTransfer.dropEffect; + } + //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers + //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 + bdo2 = e.dataTransfer.dropEffect; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondragenter = function (e) { + e.preventDefault(); + if( !fde ) { fde = e.dataTransfer.dropEffect; } + }; + fuchsia.ondragover = function (e) { + e.preventDefault(); + if( !fdo ) { fdo = e.dataTransfer.dropEffect; } + }; + fuchsia.ondrop = function (e) { + e.preventDefault(); + fdr = e.dataTransfer.dropEffect; + }; + orange.ondragend = function (e) { + var ode = e.dataTransfer.dropEffect, temparray; + if( bde == bdo && bdo2 == fdr && fde == fdr && fdo == fdr && ode == fdr ) { + if( bde == fdr ) { + tmparray = [fdr]; + } else { + tmparray = [bde,fdr]; + } + } else if( bde == bdo && bdo2 == fdo && fde == fdo && !fdr ) { + tmparray = [bde,fdo,ode]; + } else { + tmparray = [bde,bdo,bdo2,fde,fdo,fdr,ode]; + } + tmparray[ tmparray.length - 1 ] = '<strong>' + tmparray[ tmparray.length - 1 ] + '<\/strong>'; + document.getElementsByTagName('div')[3].innerHTML = (++countedDrops) + '. ' + tmparray.join('=>'); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div></div> + <div><strong> </strong></div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform</li> + <li>Continue dragging over the pink square</li> + <li>Release the drag, then the keys</li> + <li>Check that the correct drop effect is produced in each case. If the mouse cursor can change to indicate the final type of drop effect that will take place, it should change to the relevant type (the one in bold) once the modifier keys are pressed.</li> + </ol> + <!-- Windows Explorer uses Ctrl for copy, Shift for move, Alt or Ctrl+Shift for link. --> + <!-- Anything else invalidates the modifiers, and reverts to default. --> + <table> + <caption>Windows</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td>None</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Shift</td><td>link=>move=><strong>none</strong></td></tr> + <tr><td>Alt</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Shift</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>link</strong></td></tr> + <tr><td>Alt+Shift</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td><strong>link</strong></td></tr> + </tbody> + </table> + <!-- KDE Konqueror uses Ctrl for copy, Shift for move, Ctrl+Shift for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <!-- Gnome Nautilus uses Ctrl for copy, Shift for move, Ctrl+Shift for link (and Alt to open a context menu). --> + <!-- Anything else (including Alt when combined with other modifiers) is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Unix/Linux</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Shift</td><td>link=>move=><strong>none</strong></td></tr> + <tr><td>Alt</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Shift</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Alt</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Alt+Shift</td><td>link=>move=><strong>none</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td><strong>link</strong></td></tr> + </tbody> + </table> + <!-- Mac Finder uses Option for copy, Command for move, Command+Option for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Mac</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl</td><td><strong>link</strong></td></tr> + <tr><td>Shift</td><td><strong>link</strong></td></tr> + <tr><td>Option/alt</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Command</td><td>link=>move=><strong>none</strong></td></tr> + + <tr><td>Ctrl+Shift</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Option</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Ctrl+Command</td><td>link=>move=><strong>none</strong></td></tr> + <tr><td>Shift+Option</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Shift+Command</td><td>link=>move=><strong>none</strong></td></tr> + <tr><td>Command+Option</td><td><strong>link</strong></td></tr> + + <tr><td>Ctrl+Shift+Option</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Ctrl+Shift+Command</td><td>link=>move=><strong>none</strong></td></tr> + <tr><td>Ctrl+Command+Option</td><td><strong>link</strong></td></tr> + <tr><td>Shift+Command+Option</td><td><strong>link</strong></td></tr> + + <tr><td>Ctrl+Shift+Command+Option</td><td><strong>link</strong></td></tr> + </tbody> + </table> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/linkmove.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/linkmove.html new file mode 100644 index 0000000000..ed564a0f3a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/linkmove.html @@ -0,0 +1,175 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys selecting dropEffect with 'linkMove'</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var countedDrops = 0, bde, bdo, bdo2, fde, fdo, fdr; + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','http://example.com/'); + e.dataTransfer.effectAllowed = 'linkMove'; + bde = bdo = bdo2 = fde = fdo = fdr = ''; + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = function (e) { + e.preventDefault(); + if( !bde ) { bde = e.dataTransfer.dropEffect; } + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( !bdo ) { + bdo = e.dataTransfer.dropEffect; + } + //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers + //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 + bdo2 = e.dataTransfer.dropEffect; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondragenter = function (e) { + e.preventDefault(); + if( !fde ) { fde = e.dataTransfer.dropEffect; } + }; + fuchsia.ondragover = function (e) { + e.preventDefault(); + if( !fdo ) { fdo = e.dataTransfer.dropEffect; } + }; + fuchsia.ondrop = function (e) { + e.preventDefault(); + fdr = e.dataTransfer.dropEffect; + }; + orange.ondragend = function (e) { + var ode = e.dataTransfer.dropEffect, temparray; + if( bde == bdo && bdo2 == fdr && fde == fdr && fdo == fdr && ode == fdr ) { + if( bde == fdr ) { + tmparray = [fdr]; + } else { + tmparray = [bde,fdr]; + } + } else if( bde == bdo && bdo2 == fdo && fde == fdo && !fdr ) { + tmparray = [bde,fdo,ode]; + } else { + tmparray = [bde,bdo,bdo2,fde,fdo,fdr,ode]; + } + tmparray[ tmparray.length - 1 ] = '<strong>' + tmparray[ tmparray.length - 1 ] + '<\/strong>'; + document.getElementsByTagName('div')[3].innerHTML = (++countedDrops) + '. ' + tmparray.join('=>'); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div></div> + <div><strong> </strong></div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform</li> + <li>Continue dragging over the pink square</li> + <li>Release the drag, then the keys</li> + <li>Check that the correct drop effect is produced in each case. If the mouse cursor can change to indicate the final type of drop effect that will take place, it should change to the relevant type (the one in bold) once the modifier keys are pressed.</li> + </ol> + <!-- Windows Explorer uses Ctrl for copy, Shift for move, Alt or Ctrl+Shift for link. --> + <!-- Anything else invalidates the modifiers, and reverts to default. --> + <table> + <caption>Windows</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td>None</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Shift</td><td>link=><strong>move</strong></td></tr> + <tr><td>Alt</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Shift</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>link</strong></td></tr> + <tr><td>Alt+Shift</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td><strong>link</strong></td></tr> + </tbody> + </table> + <!-- KDE Konqueror uses Ctrl for copy, Shift for move, Ctrl+Shift for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <!-- Gnome Nautilus uses Ctrl for copy, Shift for move, Ctrl+Shift for link (and Alt to open a context menu). --> + <!-- Anything else (including Alt when combined with other modifiers) is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Unix/Linux</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Shift</td><td>link=><strong>move</strong></td></tr> + <tr><td>Alt</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Shift</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Alt</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Alt+Shift</td><td>link=><strong>move</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td><strong>link</strong></td></tr> + </tbody> + </table> + <!-- Mac Finder uses Option for copy, Command for move, Command+Option for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Mac</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl</td><td><strong>link</strong></td></tr> + <tr><td>Shift</td><td><strong>link</strong></td></tr> + <tr><td>Option/alt</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Command</td><td>link=><strong>move</strong></td></tr> + + <tr><td>Ctrl+Shift</td><td><strong>link</strong></td></tr> + <tr><td>Ctrl+Option</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Ctrl+Command</td><td>link=><strong>move</strong></td></tr> + <tr><td>Shift+Option</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Shift+Command</td><td>link=><strong>move</strong></td></tr> + <tr><td>Command+Option</td><td><strong>link</strong></td></tr> + + <tr><td>Ctrl+Shift+Option</td><td>link=>copy=><strong>none</strong></td></tr> + <tr><td>Ctrl+Shift+Command</td><td>link=><strong>move</strong></td></tr> + <tr><td>Ctrl+Command+Option</td><td><strong>link</strong></td></tr> + <tr><td>Shift+Command+Option</td><td><strong>link</strong></td></tr> + + <tr><td>Ctrl+Shift+Command+Option</td><td><strong>link</strong></td></tr> + </tbody> + </table> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/move.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/move.html new file mode 100644 index 0000000000..7e9caf12ca --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/move.html @@ -0,0 +1,175 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys selecting dropEffect with 'move'</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var countedDrops = 0, bde, bdo, bdo2, fde, fdo, fdr; + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','http://example.com/'); + e.dataTransfer.effectAllowed = 'move'; + bde = bdo = bdo2 = fde = fdo = fdr = ''; + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = function (e) { + e.preventDefault(); + if( !bde ) { bde = e.dataTransfer.dropEffect; } + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( !bdo ) { + bdo = e.dataTransfer.dropEffect; + } + //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers + //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 + bdo2 = e.dataTransfer.dropEffect; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondragenter = function (e) { + e.preventDefault(); + if( !fde ) { fde = e.dataTransfer.dropEffect; } + }; + fuchsia.ondragover = function (e) { + e.preventDefault(); + if( !fdo ) { fdo = e.dataTransfer.dropEffect; } + }; + fuchsia.ondrop = function (e) { + e.preventDefault(); + fdr = e.dataTransfer.dropEffect; + }; + orange.ondragend = function (e) { + var ode = e.dataTransfer.dropEffect, temparray; + if( bde == bdo && bdo2 == fdr && fde == fdr && fdo == fdr && ode == fdr ) { + if( bde == fdr ) { + tmparray = [fdr]; + } else { + tmparray = [bde,fdr]; + } + } else if( bde == bdo && bdo2 == fdo && fde == fdo && !fdr ) { + tmparray = [bde,fdo,ode]; + } else { + tmparray = [bde,bdo,bdo2,fde,fdo,fdr,ode]; + } + tmparray[ tmparray.length - 1 ] = '<strong>' + tmparray[ tmparray.length - 1 ] + '<\/strong>'; + document.getElementsByTagName('div')[3].innerHTML = (++countedDrops) + '. ' + tmparray.join('=>'); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div></div> + <div><strong> </strong></div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform</li> + <li>Continue dragging over the pink square</li> + <li>Release the drag, then the keys</li> + <li>Check that the correct drop effect is produced in each case. If the mouse cursor can change to indicate the final type of drop effect that will take place, it should change to the relevant type (the one in bold) once the modifier keys are pressed.</li> + </ol> + <!-- Windows Explorer uses Ctrl for copy, Shift for move, Alt or Ctrl+Shift for link. --> + <!-- Anything else invalidates the modifiers, and reverts to default. --> + <table> + <caption>Windows</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td>None</td><td><strong>move</strong></td></tr> + <tr><td>Ctrl</td><td>move=>copy=><strong>none</strong></td></tr> + <tr><td>Shift</td><td><strong>move</strong></td></tr> + <tr><td>Alt</td><td>move=>link=><strong>none</strong></td></tr> + <tr><td>Ctrl+Shift</td><td>move=>link=><strong>none</strong></td></tr> + <tr><td>Ctrl+Alt</td><td><strong>move</strong></td></tr> + <tr><td>Alt+Shift</td><td><strong>move</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td><strong>move</strong></td></tr> + </tbody> + </table> + <!-- KDE Konqueror uses Ctrl for copy, Shift for move, Ctrl+Shift for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <!-- Gnome Nautilus uses Ctrl for copy, Shift for move, Ctrl+Shift for link (and Alt to open a context menu). --> + <!-- Anything else (including Alt when combined with other modifiers) is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Unix/Linux</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>move</strong></td></tr> + <tr><td>Ctrl</td><td>move=>copy=><strong>none</strong></td></tr> + <tr><td>Shift</td><td><strong>move</strong></td></tr> + <tr><td>Alt</td><td><strong>move</strong></td></tr> + <tr><td>Ctrl+Shift</td><td>move=>link=><strong>none</strong></td></tr> + <tr><td>Ctrl+Alt</td><td>move=>copy=><strong>none</strong></td></tr> + <tr><td>Alt+Shift</td><td><strong>move</strong></td></tr> + <tr><td>Ctrl+Alt+Shift</td><td>move=>link=><strong>none</strong></td></tr> + </tbody> + </table> + <!-- Mac Finder uses Option for copy, Command for move, Command+Option for link. --> + <!-- Anything else is ignored completely, and has no effect on the modifier sequence. --> + <table> + <caption>Mac</caption> + <thead> + <tr><th>Modifier</th><th>Drop effect</th></tr> + </thead> + <tbody> + <tr><td><strong>none</td><td><strong>move</strong></td></tr> + <tr><td>Ctrl</td><td><strong>move</strong></td></tr> + <tr><td>Shift</td><td><strong>move</strong></td></tr> + <tr><td>Option/alt</td><td>move=>copy=><strong>none</strong></td></tr> + <tr><td>Command</td><td><strong>move</strong></td></tr> + + <tr><td>Ctrl+Shift</td><td><strong>move</strong></td></tr> + <tr><td>Ctrl+Option</td><td>move=>copy=><strong>none</strong></td></tr> + <tr><td>Ctrl+Command</td><td><strong>move</strong></td></tr> + <tr><td>Shift+Option</td><td>move=>copy=><strong>none</strong></td></tr> + <tr><td>Shift+Command</td><td><strong>move</strong></td></tr> + <tr><td>Command+Option</td><td>move=>link=><strong>none</strong></td></tr> + + <tr><td>Ctrl+Shift+Option</td><td>move=>copy=><strong>none</strong></td></tr> + <tr><td>Ctrl+Shift+Command</td><td><strong>move</strong></td></tr> + <tr><td>Ctrl+Command+Option</td><td>move=>link=><strong>none</strong></td></tr> + <tr><td>Shift+Command+Option</td><td>move=>link=><strong>none</strong></td></tr> + + <tr><td>Ctrl+Shift+Command+Option</td><td>move=>link=><strong>none</strong></td></tr> + </tbody> + </table> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/onlydropzone.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/onlydropzone.html new file mode 100644 index 0000000000..973d240878 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/onlydropzone.html @@ -0,0 +1,70 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys being used with a dropzone attribute</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text/plain','http://example.com/'); + e.dataTransfer.effectAllowed = 'copy'; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondrop = function (e) { + //dropzone overrides the modifier, always, and ignores effectAllowed + e.preventDefault(); + document.getElementsByTagName('div')[3].innerHTML = ( e.dataTransfer.dropEffect == 'link' ) ? 'PASS' : 'FAIL'; + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div dropzone="link string:text/plain"></div> + <div> </div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform to request a "move" drop effect (eg. Shift on Windows/Unix/Linux, Command on Mac)</li> + <li>Continue dragging over the pink square</li> + <li>If supported by the platform, the mouse cursor should show that a "link" drop effect will be used</li> + <li>Release the drag, then the keys</li> + <li>Fail if no new text appears above this list</li> + </ol> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/onlydropzoneevents.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/onlydropzoneevents.html new file mode 100644 index 0000000000..8c5d5334e1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/onlydropzoneevents.html @@ -0,0 +1,82 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys being used with a dropzone attribute and dragenter/dragover events</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text/plain','http://example.com/'); + e.dataTransfer.effectAllowed = 'copy'; + }; + var fuchsia = document.getElementsByTagName('div')[2], fde, fdo; + fuchsia.ondragenter = function (e) { + fde = e.dataTransfer.dropEffect; + }; + fuchsia.ondragover = function (e) { + fdo = e.dataTransfer.dropEffect; + }; + fuchsia.ondrop = function (e) { + //dropzone overrides the modifier, always, and ignores effectAllowed + e.preventDefault(); + var sequence = ([fde,fdo,e.dataTransfer.dropEffect]).join('=>') + var desiredsequence = (['move','move','link']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[3].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[3].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div dropzone="link string:text/plain"></div> + <div> </div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform to request a "move" drop effect (eg. Shift on Windows/Unix/Linux, Command on Mac)</li> + <li>Continue dragging over the pink square</li> + <li>If supported by the platform, the mouse cursor should show that a "link" drop effect will be used</li> + <li>Release the drag, then the keys</li> + <li>Fail if no new text appears above this list</li> + </ol> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/releasemodifiersdrag-manual.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/releasemodifiersdrag-manual.html new file mode 100644 index 0000000000..91c0c584bb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/releasemodifiersdrag-manual.html @@ -0,0 +1,125 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys being released before end of drag</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +div:first-child + div + div + div { + height: 100px; + width: 100px; + background: yellow; + display: inline-block; +} +div { + font-family: monospace; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var bde, bdo, bdo2, fde, fdo, fdo2, yde, ydo, ydr; + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','http://example.com/'); + e.dataTransfer.effectAllowed = 'linkMove'; + bde = bdo = bdo2 = fde = fdo = fdo2 = yde = ydo = ydr = ''; + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = function (e) { + e.preventDefault(); + bde = e.dataTransfer.dropEffect; + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( !bdo ) { + bdo = e.dataTransfer.dropEffect; + } + //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers + //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 + bdo2 = e.dataTransfer.dropEffect; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondragenter = function (e) { + e.preventDefault(); + fde = e.dataTransfer.dropEffect; + }; + fuchsia.ondragover = function (e) { + e.preventDefault(); + if( !fdo ) { fdo = e.dataTransfer.dropEffect; } + fdo2 = e.dataTransfer.dropEffect; + }; + var yellow = document.getElementsByTagName('div')[3]; + yellow.ondragenter = function (e) { + e.preventDefault(); + yde = e.dataTransfer.dropEffect; + }; + yellow.ondragover = function (e) { + e.preventDefault(); + if( !ydo ) { ydo = e.dataTransfer.dropEffect; } + }; + yellow.ondrop = function (e) { + e.preventDefault(); + ydr = e.dataTransfer.dropEffect; + }; + orange.ondragend = function (e) { + var sequence = ([bde,bdo,bdo2,fde,fdo,fdo2,yde,ydo,ydr,e.dataTransfer.dropEffect]).join('=>') + var desiredsequence = (['link','link','move','move','move','link','link','link','link','link']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[4].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[4].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div></div> + <div></div> + <div><strong> </strong></div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform to request a "move" drop effect (eg. Shift on Windows/Unix/Linux, Command on Mac)</li> + <li>If supported by the platform, the mouse cursor should show that a "move" drop effect will be used</li> + <li>Continue dragging over the pink square</li> + <li>Release the modifier keys</li> + <li>If supported by the platform, the mouse cursor should show that a "link" drop effect will be used</li> + <li>Continue dragging over the yellow square</li> + <li>Release the drag</li> + <li>Fail if no new text appears above this list</li> + </ol> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/releasemodifiersdrop.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/releasemodifiersdrop.html new file mode 100644 index 0000000000..adaa92e8e2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/releasemodifiersdrop.html @@ -0,0 +1,108 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys being released before drop</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +div { + font-family: monospace; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var bde, bdo, bdo2, fde, fdo, fdo2, fdr; + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','http://example.com/'); + e.dataTransfer.effectAllowed = 'linkMove'; + bde = bdo = bdo2 = fde = fdo = fdo2 = fdr = ''; + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = function (e) { + e.preventDefault(); + bde = e.dataTransfer.dropEffect; + }; + blue.ondragover = function (e) { + e.preventDefault(); + if( !bdo ) { + bdo = e.dataTransfer.dropEffect; + } + //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers + //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 + bdo2 = e.dataTransfer.dropEffect; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondragenter = function (e) { + e.preventDefault(); + fde = e.dataTransfer.dropEffect; + }; + fuchsia.ondragover = function (e) { + e.preventDefault(); + if( !fdo ) { fdo = e.dataTransfer.dropEffect; } + fdo2 = e.dataTransfer.dropEffect; + }; + fuchsia.ondrop = function (e) { + e.preventDefault(); + fdr = e.dataTransfer.dropEffect; + }; + orange.ondragend = function (e) { + var sequence = ([bde,bdo,bdo2,fde,fdo,fdo2,fdr,e.dataTransfer.dropEffect]).join('=>') + var desiredsequence = (['link','link','move','move','move','link','link','link']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[3].innerHTML = 'PASS'; + } else { + document.getElementsByTagName('div')[3].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; + } + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div></div> + <div><strong> </strong></div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform to request a "move" drop effect (eg. Shift on Windows/Unix/Linux, Command on Mac)</li> + <li>If supported by the platform, the mouse cursor should show that a "move" drop effect will be used</li> + <li>Continue dragging over the pink square</li> + <li>Release the modifier keys, and wait for at least half a second</li> + <li>If supported by the platform, the mouse cursor should show that a "link" drop effect will be used</li> + <li>Release the drag, then the keys</li> + <li>Fail if no new text appears above this list</li> + </ol> + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/scriptmodified.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/scriptmodified.html new file mode 100644 index 0000000000..c5b17b463f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/scriptmodified.html @@ -0,0 +1,99 @@ +<!doctype html> +<html> + <head> + <title>Modifier keys selecting dropEffect with script overriding it</title> + <style type="text/css"> +div:first-child { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +div:first-child + div { + height: 100px; + width: 100px; + background: blue; + display: inline-block; +} +div:first-child + div + div { + height: 100px; + width: 100px; + background: fuchsia; + display: inline-block; +} +table { + display: inline-table; + margin-right: 1em; + border-collapse: collapse; +} +table, th, td { + border: 1px solid black; +} +thead th { + background: silver; + color: black; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var dragenterbefore = '', dragenterafter = '', dragoverbefore = '', dragoverafter = ''; + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','http://example.com/'); + e.dataTransfer.effectAllowed = 'all'; + }; + var fuchsia = document.getElementsByTagName('div')[2]; + fuchsia.ondragenter = function (e) { + e.preventDefault(); + if( e.dataTransfer.dropEffect != 'link' ) { + dragenterbefore = e.dataTransfer.dropEffect; + } + try { + e.dataTransfer.dropEffect = 'move'; + } catch(e) {} + if( e.dataTransfer.dropEffect != 'move' ) { + dragenterafter = e.dataTransfer.dropEffect; + } + }; + fuchsia.ondragover = function (e) { + e.preventDefault(); + if( e.dataTransfer.dropEffect != 'link' ) { + dragoverbefore = e.dataTransfer.dropEffect; + } + try { + e.dataTransfer.dropEffect = 'move'; + } catch(e) {} + if( e.dataTransfer.dropEffect != 'move' ) { + dragoverafter = e.dataTransfer.dropEffect; + } + }; + fuchsia.ondrop = function (e) { + e.preventDefault(); + document.getElementsByTagName('div')[3].innerHTML = ( dragenterbefore || dragenterafter || dragoverbefore || dragoverafter || e.dataTransfer.dropEffect != 'move' ) ? ( 'FAIL' + + ( dragenterbefore ? ( '<br>dragenter.dropEffect was '+dragenterbefore+' instead of link' ) : '' ) + + ( dragenterafter ? ( '<br>dragenter.dropEffect after writing was '+dragenterafter+' instead of move' ) : '' ) + + ( dragoverbefore ? ( '<br>dragover.dropEffect was '+dragoverbefore+' instead of link' ) : '' ) + + ( dragoverafter ? ( '<br>dragover.dropEffect after writing was '+dragoverafter+' instead of move' ) : '' ) + + ( ( e.dataTransfer.dropEffect != 'move' ) ? ( '<br>drop.dropEffect was '+e.dataTransfer.dropEffect+' instead of move' ) : '' ) + ) : 'PASS'; + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + <div></div> + <div></div> + <div> </div> + <ol> + <li>Drag the orange square over the blue square</li> + <li>Press the relevant modifier keys for your platform to request a "link" drop effect (eg. Alt on Windows, Ctrl+Shift on Unix/Linux, Command+Option on Mac)</li> + <li>Continue dragging over the pink square</li> + <li>If supported by the platform, the mouse cursor should show that a "move" drop effect will be used</li> + <li>Release the drag, then the keys</li> + <li>Fail if no new text appears above this list</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/moving-window.html b/testing/web-platform/tests/html/editing/dnd/platform/moving-window.html new file mode 100644 index 0000000000..a11c101800 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/moving-window.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>drag & drop - moving windows must not start a drag</title> +<script type="text/javascript"> + +window.onload = function() { + var li1 = document.getElementsByTagName('li')[3], li2 = document.getElementsByTagName('li')[4]; + li1.ondragstart = li2.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + this.innerHTML = 'FAIL'; + }; + li1.onmousedown = function () { window.moveBy(0,10); }; + li2.onmousedown = function () { setTimeout(function () { + window.moveBy(0,10); + },10); }; +}; + +</script> +<p></p> +<ol> + <li onclick="window.open(location.href,'_blank','width=500,height=300');">Click here to open this page in a popup window.</li> + <li>Ensure that this popup window is not maximised (or tab, in the case of tabs being rendered as an MDI).</li> + <li>Ensure that your browser settings allow browser windows to be moved by scripts.</li> + <li draggable='true'>Press your mouse down on this text but do not move it afterwards. Fail if a drag operation has started (eg. if the mouse cursor shows that you are dragging something, or if some drag placeholder text appears, or if this text changes).</li> + <li draggable='true'>Press your mouse down on this text but do not move it afterwards. Fail if a drag operation has started (eg. if the mouse cursor shows that you are dragging something, or if some drag placeholder text appears, or if this text changes).</li> +</ol> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/overlappingwindows.html b/testing/web-platform/tests/html/editing/dnd/platform/overlappingwindows.html new file mode 100644 index 0000000000..ed707478da --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/overlappingwindows.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>Dropping on always-on-top application windows that overlay the browser</title> +<style> + html, body, ol { + margin: 0; + padding: 0; + height: 100%; + width: 100%; + background: blue; + color: black; + list-style-position: inside; + } + div { + height: 100px; + width: 100px; + position: absolute; + top: 50%; + left: 50%; + margin-top: -50px; + margin-left: -50px; + background: orange; + } +</style> + +<script type="text/javascript"> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0]; + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'dummy text'); + }; + var blue = document.getElementsByTagName('ol')[0]; + blue.ondragenter = blue.ondragover = function(e) { + e.preventDefault(); + }; + blue.ondrop = function(e) { + e.preventDefault(); + this.innerHTML = 'FAIL'; + }; +}; + +</script> + +<ol> + <li>Position the browser window so that the blue part of this page extends behind the system taskbar.</li> + <li>Use your mouse to drag the orange box over a part of the taskbar that overlays the blue part of this page.</li> + <li>If supported by the platform, the mouse cursor should <em>not</em> show the browser's custom "copy" cursor, and should instead show the system's expected cursor for dropping on that part of the taskbar.</li> + <li>Release the drag. Fail if the text on this page changes.</li> + <li>Reload and repeat this test for:<ul> + <li>Where the blue part of this page extends under an always-on-top window (eg. the Windows Task Manager).</li> + <li>Where the blue part of this page extends under an always-on-top notification (eg. a system tray info balloon).</li> + </ul></li> +</ol> +<div draggable='true'></div> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/placeholderposition1.html b/testing/web-platform/tests/html/editing/dnd/platform/placeholderposition1.html new file mode 100644 index 0000000000..b79bd4fbce --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/placeholderposition1.html @@ -0,0 +1,14 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - position of the placeholder for a dragged element</title> + <style type="text/css"> +div { background: orange; color: black; width: 200px; padding: 10px; border: 10px solid orange; margin: 10px; } + </style> + </head> + <body> + + <div draggable="true">Drag the orange block around the page (and only over the page), using the pixel in its top-left corner. When dragging, the top-left corner of the dragged placeholder should exactly match the position of the mouse cursor.</div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/placeholderposition2.html b/testing/web-platform/tests/html/editing/dnd/platform/placeholderposition2.html new file mode 100644 index 0000000000..373309d1a9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/placeholderposition2.html @@ -0,0 +1,14 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - position of the placeholder for a dragged selection</title> + <style type="text/css"> +p { cursor: default; } + </style> + </head> + <body> + + <p>Select the first word in this sentence. Drag the selection downwards, using the pixel in the top-left corner of the selection highlight. When dragging, the top-left corner of the dragged placeholder should exactly match the position of the mouse cursor.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugindrop.html b/testing/web-platform/tests/html/editing/dnd/platform/plugindrop.html new file mode 100644 index 0000000000..c34e60c4a9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugindrop.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> + <head> + <title>drag and drop sequence should end when dropping over a plugin</title> + <style type="text/css"> +div { + background: orange; + height: 100px; + width: 100px; +} +object { + height: 100px; + width: 100px; +} + </style> + </head> + <body> + + <p>Use your pointing device to drag the orange square onto the blue square, and release it. The drag placeholder should disappear after releasing (or as the pointer moves over the blue square). Try dragging the orange square again. Fail if it does not respond when trying to drag it.</p> + <div draggable="true" ondragstart="event.dataTransfer.setData('Text','dummy text');"></div> + <p><object data="../resources/boxnavy.swf"></object></p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/selection-between-ui.html b/testing/web-platform/tests/html/editing/dnd/platform/selection-between-ui.html new file mode 100644 index 0000000000..e2fc81089d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/selection-between-ui.html @@ -0,0 +1,20 @@ +<!doctype html> +<html> + <head> + <title>Dragging text from UI widgets to each other</title> + </head> + <body> + + <ol> + <li>Select some text in the address bar.</li> + <li>Drag the selection to another text input in the UI, and release it.</li> + <li>Pass if:<ol> + <li>A visible representation of the selected text appears to be dragged.</li> + <li>The mouse cursor shows that the drop will be allowed over the input.</li> + <li>The selected text appears in the input.</li> + </ol></li> + <li>Repeat the test with other UI text inputs as drag source/destination.</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/selection-from-os.html b/testing/web-platform/tests/html/editing/dnd/platform/selection-from-os.html new file mode 100644 index 0000000000..cdda1f40ca --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/selection-from-os.html @@ -0,0 +1,17 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - dragging a selection from the OS</title> + </head> + <body> + + <p>This test is only relevant on platforms where it is possible to switch applications in mid-drag (eg. alt+tab, dragging over taskbar buttons, dragging between restored windows).</p> + <p>This testcase requires an external application that allows dragging of selections into other applications - eg. Wordpad (write.exe) on Windows. Ensure that the external application is open.</p> + <p>Move the browser window so it sits about 200 pixels down from the top of the screen.</p> + <p>Subtest 1. Write some text into the external application (if needed), containing both unicode and Latin characters. Select the text in the external application, and drag the selection into the following input:<br><textarea rows="3" cols="50"></textarea><br>Pass if the text you selected appears in the input.</p> + <p>Subtest 2. Select the text in the external application, and drag the selection into the following block: + <span style="background:orange;display:block;min-height:100px;width:300px;" ondragenter="return false;" ondragover="return false;" ondrop="this.innerHTML = arguments[0].dataTransfer.getData('text/plain');return false;"></span> + Pass if the text you selected appears in the block.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/selection-from-ui.html b/testing/web-platform/tests/html/editing/dnd/platform/selection-from-ui.html new file mode 100644 index 0000000000..a2a5d09f96 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/selection-from-ui.html @@ -0,0 +1,20 @@ +<!doctype html> +<html> + <head> + <title>Dragging text from UI widgets</title> + </head> + <body> + + <ol> + <li>Select some text in the address bar.</li> + <li>Drag the selection to the following textarea, and release it: <br><textarea rows="3" cols="50"></textarea></li> + <li>Pass if:<ol> + <li>A visible representation of the selected text appears to be dragged.</li> + <li>The mouse cursor shows that the drop will be allowed over the textarea.</li> + <li>The selected text appears in the textarea.</li> + </ol></li> + <li>Repeat the test with other UI text inputs, including ones that allow linebreaks (if any).</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/selection-to-os.html b/testing/web-platform/tests/html/editing/dnd/platform/selection-to-os.html new file mode 100644 index 0000000000..d596014695 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/selection-to-os.html @@ -0,0 +1,14 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - dragging a selection onto the OS</title> + </head> + <body> + + <p>This test is only relevant on platforms where it is possible to switch applications in mid-drag (eg. alt+tab, dragging over taskbar buttons, dragging between restored windows).</p> + <p>This testcase requires an external application that accepts dropping of text from other applications - eg. Wordpad (write.exe) on Windows. Ensure that the external application is open.</p> + <p>Select this text. Drag the selection to the other application and release it. Pass if the text you selected appears in the other application, and the drag placeholder disappears when the drag is released.</p> + <p>Disable JavaScript and repeat the test. It should still pass.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/selection-to-ui-via.html b/testing/web-platform/tests/html/editing/dnd/platform/selection-to-ui-via.html new file mode 100644 index 0000000000..11eb2092e2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/selection-to-ui-via.html @@ -0,0 +1,19 @@ +<!doctype html> +<html> + <head> + <title>Dragging text to UI widgets via window decoration</title> + </head> + <body> + + <p>This test assumes that the address bar is positioned below the window's title bar, and above the page. If your browser uses an alternative layout, adjust your testing accordingly to ensure that the testing interacts with the edges of the window decoration.</p> + <ol> + <li>Select some text on this page.</li> + <li>Drag the selection to your browser's title bar.</li> + <li>Drag the selection back to your browser's address field. Fail if the mouse cursor shows that the text cannot be dropped.</li> + <li>Fail if the cursor and/or input focus caret respond in the wrong position (ie. if the drag operation seems to think the address field is offset from its actual location).</li> + <li>Release it. Pass if the selected text appears in the address field.</li> + <li>Repeat the test with other UI text inputs.</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/selection-to-ui.html b/testing/web-platform/tests/html/editing/dnd/platform/selection-to-ui.html new file mode 100644 index 0000000000..43b0877f8b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/selection-to-ui.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> + <head> + <title>Dragging text to UI widgets</title> + </head> + <body> + + <ol> + <li>Select some text on this page.</li> + <li>Drag the selection to your browser's address field. Fail if the mouse cursor shows that the text cannot be dropped.</li> + <li>Release it. Pass if the selected text appears in the address field.</li> + <li>Repeat the test with other UI text inputs.</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/selection-ui-to-self.html b/testing/web-platform/tests/html/editing/dnd/platform/selection-ui-to-self.html new file mode 100644 index 0000000000..897a258838 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/selection-ui-to-self.html @@ -0,0 +1,21 @@ +<!doctype html> +<html> + <head> + <title>Dragging text from UI widgets to themselves</title> + </head> + <body> + + <ol> + <li>Select all text in the address bar.</li> + <li>Drag the selection around a little, and release it over the address bar again.</li> + <li>Try to select the text in this sentence.</li> + <li>Pass if:<ol> + <li>A visible representation of the selected text appears to be dragged.</li> + <li>The mouse cursor shows that the drop will be allowed over the address bar.</li> + <li>The text on this page can be selected afterwards.</li> + </ol></li> + <li>Repeat the test with other UI text inputs as drag source/destination.</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/selection-unicode-to-os.html b/testing/web-platform/tests/html/editing/dnd/platform/selection-unicode-to-os.html new file mode 100644 index 0000000000..e43fac6173 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/selection-unicode-to-os.html @@ -0,0 +1,13 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - dragging a selection containing unicode onto the OS</title> + </head> + <body> + + <p>This test is only relevant on platforms where it is possible to switch applications in mid-drag (eg. alt+tab, dragging over taskbar buttons, dragging between restored windows).</p> + <p>This testcase requires an external application that accepts dropping of text from other applications, and supports unicode - eg. Wordpad (write.exe) on Windows. Ensure that the external application is open.</p> + <p>Select the following non-English text --> 中文אידישрусский <-- Drag the selection to the other application and release it. Pass if the text you selected appears in the other application, and the drag placeholder disappears when the drag is released.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/taskbardrop.html b/testing/web-platform/tests/html/editing/dnd/platform/taskbardrop.html new file mode 100644 index 0000000000..b96606cd37 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/taskbardrop.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - dropping on the taskbar</title> + </head> + <body> + + <p>This test is only relevant on platforms where dragging over taskbar buttons will switch between applications.</p> + <p>Ensure that at least one other application is open and visible on the taskbar. Maximise this browser window. Select this text. Drag the selection downwards, over a blank part of the system taskbar, and release the drag. Drag the selection again, over the taskbar button for the other application (without passing over any other buttons on the taskbar). Fail if the drag placeholder does not appear when dragging the selection. Pass if the other application becomes focused.</p> + <p>Repeat this test while dropping on other parts of the taskbar, such as:</p> + <ul> + <li>The Start menu button (or your system's equivalent)</li> + <li>The Quick Launch bar (or your system's equivalent)</li> + <li>The System Tray (or your system's equivalent)</li> + <li>The expander button for the System Tray (or your system's equivalent)</li> + <li>The button for another application</li> + <li>The label for a folder toolbar - drop a folder onto the Windows taskbar to create one (or your system's equivalent)</li> + <li>The menu button for a folder toolbar (or your system's equivalent)</li> + </ul> + <p><strong>WARNING: different operating system versions handle this differently - Windows XP Taskbar in particular can cause several more problems than the Windows 7 Taskbar</strong></p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/taskbarminimise.html b/testing/web-platform/tests/html/editing/dnd/platform/taskbarminimise.html new file mode 100644 index 0000000000..36ffe2f5c9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/taskbarminimise.html @@ -0,0 +1,12 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - minimising using the taskbar</title> + </head> + <body> + + <p>This test is only relevant on platforms where dragging over the taskbar (or a specific button on it) will minimise all applications.</p> + <p>Select this text. Drag the selection downwards, over a blank part of the system taskbar (or a minimise-all button if provided by the system). Hold the drag until all applications have minimised, then drag upwards over the desktop. Pass if the drag placeholder is still visible.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/text-os-to-os.html b/testing/web-platform/tests/html/editing/dnd/platform/text-os-to-os.html new file mode 100644 index 0000000000..95ca8b597c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/text-os-to-os.html @@ -0,0 +1,13 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - dragging items from the OS to the OS, via the browser window</title> + </head> + <body> + + <p>This test is only relevant on platforms where it is possible to switch applications in mid-drag (eg. alt+tab, dragging over taskbar buttons, dragging between restored windows).</p> + <p>This testcase requires an external application that accepts dropping of text from other applications - eg. Wordpad (write.exe) on Windows. Ensure that the external application is open.</p> + <p>Select some text in the external application. Drag the selection over the browser window, then back to the other application and release it. Pass if the text you selected appears in the other application.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/platform/text-to-os.html b/testing/web-platform/tests/html/editing/dnd/platform/text-to-os.html new file mode 100644 index 0000000000..1bf754e2c3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/text-to-os.html @@ -0,0 +1,19 @@ +<!doctype html> +<html> + <head> + <title>drag and drop - dragging plain text onto the OS</title> + </head> + <body> + + <p>This test is only relevant on platforms where it is possible to switch applications in mid-drag (eg. alt+tab, dragging over taskbar buttons, dragging between restored windows).</p> + <p>This testcase requires an external application that accepts dropping of text from other applications - eg. Wordpad (write.exe) on Windows. Ensure that the external application is open.</p> + <p draggable="true">Drag this paragraph to the other application and release it. Pass if "PASS" appears in the other application, and the drag placeholder disappears when the drag is released.</p> + <script type="text/javascript"> +document.getElementsByTagName('p')[2].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('Text', 'PASS'); +}; + </script> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/reload/001.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/001.xhtml new file mode 100644 index 0000000000..a4c0cba89e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/001.xhtml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during canvas drag and drop roundtrip</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png')); + window.location.reload();} +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondragenter="event.preventDefault()" ondragover="return false" ondrop="addImage(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern around page and then drag it back and drop on itself. It should be duplicated once you drop it.</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/reload/002.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/002.xhtml new file mode 100644 index 0000000000..19ba5d0373 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/002.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during PNG image drag and drop roundtrip</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +</script> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location.reload()" ondragenter="event.preventDefault()" ondrop="addImage(event)" ondragover="return false" 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> +<p>Drag circle around page and then drag it back and drop on itself. It should be duplicated once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/reload/003.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/003.xhtml new file mode 100644 index 0000000000..133df3525c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/003.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during SVG image drag and drop roundtrip</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +</script> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location.reload()" ondragenter="event.preventDefault()" ondrop="addImage(event)" ondragover="return false" 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> +<p>Drag circle around page and then drag it back and drop on itself. It should be duplicated once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/reload/004.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/004.xhtml new file mode 100644 index 0000000000..26489b5626 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/004.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during text input selection drag and drop roundtrip</title> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="window.location.reload()" ondragenter="event.preventDefault();" ondragover="return false" ondrop="event.preventDefault();this.value = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"/></p> +<p>Drag selected text around page and then drag it back and drop on itself. You should see word PASS once you drop it.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/reload/005.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/005.xhtml new file mode 100644 index 0000000000..1e0e1bb828 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/005.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during selection drag and drop roundtrip</title> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="window.location.reload()" ondragenter="event.preventDefault()" ondragover="return false" ondrop="document.querySelector('span').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'">Drag me</span></p> +<p>Drag selected text around page and then drag it back and drop on itself. You should see word PASS once you drop it.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/reload/006.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/006.xhtml new file mode 100644 index 0000000000..9d633554f1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/006.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during link drag and drop roundtrip</title> +<script type="application/ecmascript"> +function checkLink(event) + {document.querySelector('a').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy';window.location.reload()" ondragenter="event.preventDefault()" ondrop="checkLink(event)" ondragover="return false">Drag me</a></p> +<p>Drag link around page and then drag it back and drop on itself. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/reload/007.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/007.xhtml new file mode 100644 index 0000000000..b5ab3e785c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/007.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during drag and drop roundtrip with text/plain data</title> +<style type="text/css"> +div[ondragenter] + {width:40px; + min-height:40px; + margin-top:20px; + padding:40px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div + draggable="true" + ondragstart="event.dataTransfer.effectAllowed = 'copy';event.dataTransfer.setData('text/plain',' PASS ');window.location.reload();" + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +<p>Drag blue box around page and then drag it back and drop on itself. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/reload/008.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/008.xhtml new file mode 100644 index 0000000000..1da66103e4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/008.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during drag and drop roundtrip with text/uri-list data</title> +<style type="text/css"> +div[ondragenter] + {width:40px; + min-height:40px; + margin-top:20px; + padding:40px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div + draggable="true" + ondragstart="event.dataTransfer.effectAllowed = 'copy';event.dataTransfer.setData('text/uri-list','data:text/plain,PASS');window.location.reload()" + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/uri-list').substr(16,4) + ' '))" +/> +<p>Drag blue box around page and then drag it back and drop on itself. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/reload/009-1.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/009-1.xhtml new file mode 100644 index 0000000000..9e98b93204 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/009-1.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during drag and drop: helper file</title> +</head> +<body ondragleave="window.location.reload()"> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy'">Drag me</a></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/reload/009.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/009.xhtml new file mode 100644 index 0000000000..421e562dc7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/009.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during link drag and drop from object</title> +<style type="text/css"> +object + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body dropzone="copy string:text/uri-list" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'"> +<object type="application/xhtml+xml" data="009-1.xhtml">XHTML document</object> +<p>Drag link above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/reload/010-1.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/010-1.xhtml new file mode 100644 index 0000000000..51d2012f79 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/010-1.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during drag and drop: helper file</title> +</head> +<body onload="document.querySelector('input').select()" ondragleave="window.location.reload()"> +<p><input value="Drag me"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/reload/010.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/010.xhtml new file mode 100644 index 0000000000..c214dff6de --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/010.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during text input selection drag and drop from object</title> +<style type="text/css"> +object + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body dropzone="copy string:text/plain" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<object type="application/xhtml+xml" data="010-1.xhtml">XHTML document</object> +<p>Drag selection above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/reload/011-1.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/011-1.xhtml new file mode 100644 index 0000000000..61c46c57ff --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/011-1.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during drag and drop: helper file</title> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))" ondragleave="window.location.reload()"> +<p>Drag me</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/reload/011.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/011.xhtml new file mode 100644 index 0000000000..d24f5003fd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/011.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during selection drag and drop from object</title> +<style type="text/css"> +object + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body dropzone="copy string:text/plain" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<object type="application/xhtml+xml" data="011-1.xhtml">XHTML document</object> +<p>Drag selection above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/reload/012-1.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/012-1.xhtml new file mode 100644 index 0000000000..b7f0ab11a1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/012-1.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during drag and drop: helper file</title> +</head> +<body ondragleave="window.location.reload()"> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/reload/012-2.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/012-2.xhtml new file mode 100644 index 0000000000..84bd41f9e4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/012-2.xhtml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during drag and drop: helper file</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/reload/012.xhtml b/testing/web-platform/tests/html/editing/dnd/reload/012.xhtml new file mode 100644 index 0000000000..d4028cc720 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/reload/012.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Reload during drag and drop of image between frames</title> +</head> +<frameset rows="50%, 50%"> +<frame src="012-1.xhtml"/> +<frame src="012-2.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/001.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/001.xhtml new file mode 100644 index 0000000000..f8cd7575f8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/001.xhtml @@ -0,0 +1,43 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing canvas element during drag and drop</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png')); + document.querySelector('p').removeChild(canvas);} +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern to the silver box below and drop it. It should be copied to the box once you drop it there.</p> +<div ondragover="return false" ondrop="addImage(event)"/> +<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/remove/002.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/002.xhtml new file mode 100644 index 0000000000..8ebf1e2b8a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/002.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing image element during drag and drop of PNG image</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy';document.querySelector('p').removeChild(document.querySelector('img'))" 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> +<p>Drag green circle to the silver box below and drop it. It should be copied to the box once you drop it there.</p> +<div ondragover="return false" ondrop="addImage(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/003.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/003.xhtml new file mode 100644 index 0000000000..e7a88093a6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/003.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing image element during drag and drop of SVG image</title> +<style type="text/css"> +div + {height:100px; + width:100px; + padding:20px; + background-color:silver;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy';document.querySelector('p').removeChild(document.querySelector('img'))" 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> +<p>Drag green circle to the silver box below and drop it. It should be copied to the box once you drop it there.</p> +<div ondragover="return false" ondrop="addImage(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/004.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/004.xhtml new file mode 100644 index 0000000000..4544b2e0a0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/004.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing input element during drag and drop of selection</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="document.querySelector('p').removeChild(document.querySelector('input'))"/></p> +<p>Drag selection above to the navy box below and drop it. You should see word PASS once you drop it in the box.</p> +<div ondragover="return false" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'))"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/005.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/005.xhtml new file mode 100644 index 0000000000..da07f5bdd4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/005.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing span element during drag and drop of selection</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="document.querySelector('p').removeChild(document.querySelector('span'))">Drag me</span></p> +<p>Drag selection above to the navy box below and drop it. You should see word PASS once you drop it in the box.</p> +<div ondragover="return false" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'))"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/006.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/006.xhtml new file mode 100644 index 0000000000..86c1e66c39 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/006.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing a element during drag and drop of link</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy';document.querySelector('p').removeChild(document.querySelector('a'))">Drag me</a></p> +<p>Drag link above to the navy box below and drop it. You should see word PASS once you drop it in the box.</p> +<div ondragover="return false" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'))"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/007.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/007.xhtml new file mode 100644 index 0000000000..e82c29bc75 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/007.xhtml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing div element during drag and drop with text/plain data</title> +<style type="text/css"> +div + {width:40px; + height:40px; + margin-top:20px; + padding:40px; + color:white; + background-color:gray;} +p + div + {background-color:navy;} +</style> +</head> +<body> +<div + draggable="true" + ondragstart="event.dataTransfer.effectAllowed = 'copy';event.dataTransfer.setData('text/plain','PASS');document.querySelector('body').removeChild(document.querySelector('div'))" +/> +<p>Drag gray box above to the navy box below and drop it. You should see word PASS once you drop it.</p> +<div + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/008.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/008.xhtml new file mode 100644 index 0000000000..c52a1c9cf0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/008.xhtml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing div element during drag and drop with text/uri-list data</title> +<style type="text/css"> +div + {width:40px; + height:40px; + margin-top:20px; + padding:40px; + color:white; + background-color:gray;} +p + div + {background-color:navy;} +</style> +</head> +<body> +<div + draggable="true" + ondragstart="event.dataTransfer.effectAllowed = 'copy';event.dataTransfer.setData('text/uri-list','data:text/plain,PASS');document.querySelector('body').removeChild(document.querySelector('div'))" +/> +<p>Drag gray box above to the navy box below and drop it. You should see word PASS once you drop it.</p> +<div + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/uri-list').substr(16,4)))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/009.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/009.xhtml new file mode 100644 index 0000000000..7ccf07402e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/009.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Changing iframe content during drag and drop of link</title> +<style type="text/css"> +iframe + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('iframe').src = 'data:text/plain,Drop%20link%20outside%20this%20frame'" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'"> +<iframe src="helper-drag-me-link.xhtml">XHTML document</iframe> +<p>Drag link above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/010.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/010.xhtml new file mode 100644 index 0000000000..151cbaeec8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/010.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Changing object content during drag and drop of link</title> +<style type="text/css"> +object + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('object').setAttribute('data','data:text/plain,Drop%20link%20outside%20this%20frame')" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'"> +<object type="application/xhtml+xml" data="helper-drag-me-link.xhtml">XHTML document</object> +<p>Drag link above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/011.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/011.xhtml new file mode 100644 index 0000000000..43b04516a6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/011.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Changing iframe content during drag and drop of text input selection</title> +<style type="text/css"> +iframe + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('iframe').src = 'data:text/plain,Drop%20selection%20outside%20this%20frame'" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<iframe src="helper-drag-me-input.xhtml">XHTML document</iframe> +<p>Drag selection above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/012.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/012.xhtml new file mode 100644 index 0000000000..1bff73a477 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/012.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Changing object content during drag and drop of text input selection</title> +<style type="text/css"> +object + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('object').setAttribute('data','data:text/plain,Drop%20selection%20outside%20this%20frame')" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<object type="application/xhtml+xml" data="helper-drag-me-input.xhtml">XHTML document</object> +<p>Drag selection above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/013.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/013.xhtml new file mode 100644 index 0000000000..8567afc52f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/013.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Changing iframe content during drag and drop of selection</title> +<style type="text/css"> +iframe + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('iframe').src = 'data:text/plain,Drop%20selection%20outside%20this%20frame'" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<iframe src="helper-drag-me-p.xhtml">XHTML document</iframe> +<p>Drag selection above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/014.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/014.xhtml new file mode 100644 index 0000000000..c3da31ef5e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/014.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Changing object content during drag and drop of selection</title> +<style type="text/css"> +object + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('object').setAttribute('data','data:text/plain,Drop%20selection%20outside%20this%20frame')" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<object type="application/xhtml+xml" data="helper-drag-me-p.xhtml">XHTML document</object> +<p>Drag selection above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/015.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/015.xhtml new file mode 100644 index 0000000000..59f2db7982 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/015.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing iframe during drag and drop of link</title> +<style type="text/css"> +iframe + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('body').removeChild(document.querySelector('iframe'))" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'"> +<iframe src="helper-drag-me-link.xhtml">XHTML document</iframe> +<p>Drag link above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/016.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/016.xhtml new file mode 100644 index 0000000000..2f71d92f30 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/016.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing object during drag and drop of link</title> +<style type="text/css"> +object + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('body').removeChild(document.querySelector('object'))" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'"> +<object type="application/xhtml+xml" data="helper-drag-me-link.xhtml">XHTML document</object> +<p>Drag link above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/017.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/017.xhtml new file mode 100644 index 0000000000..dfc8ed8cc0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/017.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing iframe during drag and drop of text input selection</title> +<style type="text/css"> +iframe + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('body').removeChild(document.querySelector('iframe'))" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<iframe src="helper-drag-me-input.xhtml">XHTML document</iframe> +<p>Drag selection above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/018.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/018.xhtml new file mode 100644 index 0000000000..aaa35b7b47 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/018.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing object during drag and drop of text input selection</title> +<style type="text/css"> +object + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('body').removeChild(document.querySelector('object'))" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<object type="application/xhtml+xml" data="helper-drag-me-input.xhtml">XHTML document</object> +<p>Drag selection above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/019.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/019.xhtml new file mode 100644 index 0000000000..d8df327f33 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/019.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing iframe during drag and drop of selection</title> +<style type="text/css"> +iframe + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('body').removeChild(document.querySelector('iframe'))" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<iframe src="helper-drag-me-p.xhtml">XHTML document</iframe> +<p>Drag selection above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/020.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/020.xhtml new file mode 100644 index 0000000000..6e56c4b8ff --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/020.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing object during drag and drop of selection</title> +<style type="text/css"> +object + {height:100px; + width:300px; + border:solid medium navy;} +</style> +</head> +<body ondragenter="event.preventDefault();document.querySelector('body').removeChild(document.querySelector('object'))" ondragover="return false" ondrop="document.querySelector('p').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"> +<object type="application/xhtml+xml" data="helper-drag-me-p.xhtml">XHTML document</object> +<p>Drag selection above out of frame and drop it somewhere on the page. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/021.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/021.xhtml new file mode 100644 index 0000000000..51d7c22015 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/021.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Removing a element during drag and drop of url</title> +<style type="text/css"> +div + {min-height:100px; + width:100px; + padding:20px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy';document.querySelector('p').removeChild(document.querySelector('a'))">Drag me</a></p> +<p>Drag selection above to the navy box below and drop it. You should see word PASS once you drop it in the box.</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('url') == 'data:text/plain,1')?'PASS':'FAIL'))"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/022-1.html b/testing/web-platform/tests/html/editing/dnd/remove/022-1.html new file mode 100644 index 0000000000..fe65c60453 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/022-1.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>Removing drop targetted document before the queue is processed</title> +<style> + html, body, div { + height: 100%; + width: 100%; + margin: 0; + padding: 0; + background-color: blue; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var blue = document.getElementsByTagName('div')[0]; + blue.ondragenter = blue.ondragover = blue.ondrop = function (e) { + e.preventDefault(); + }; + window.addEventListener('message',function (){ + var xhr = new XMLHttpRequest(); + xhr.open('GET','/common/blank.html?pipe=trickle(d5)',false); + xhr.send(null); //should not end within the lifetime of this document + },false); +}; +</script> +<div></div> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/022.html b/testing/web-platform/tests/html/editing/dnd/remove/022.html new file mode 100644 index 0000000000..17e8e0c449 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/022.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>Removing drop targetted document before the queue is processed</title> +<style> + span, iframe { + height: 200px; + width: 200px; + background-color: orange; + display: inline-block; + border: none; + } +</style> +<script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('span')[0]; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','dummy text'); + e.dataTransfer.effectAllowed = 'all'; + document.getElementsByTagName('iframe')[0].contentWindow.postMessage('dummy message','*'); + setTimeout(function () { + document.getElementsByTagName('p')[0].removeChild(document.getElementsByTagName('iframe')[0]); + },4000); + }; +}; +</script> +<p><span draggable="true"></span> <iframe height="200" width="200" src="022-1.html"></iframe></p> + +<p>Drag the orange square over the blue square, then release it. Wait 5 seconds for the blue square to disappear. Pass if you can select this text.</li> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/remove/helper-drag-me-input.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/helper-drag-me-input.xhtml new file mode 100644 index 0000000000..ca87466cd2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/helper-drag-me-input.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/remove/helper-drag-me-link.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/helper-drag-me-link.xhtml new file mode 100644 index 0000000000..9062014b45 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/helper-drag-me-link.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: helper file</title> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy'">Drag me</a></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/remove/helper-drag-me-p.xhtml b/testing/web-platform/tests/html/editing/dnd/remove/helper-drag-me-p.xhtml new file mode 100644 index 0000000000..5e11544c4e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/remove/helper-drag-me-p.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/resources/100x100-navy.png b/testing/web-platform/tests/html/editing/dnd/resources/100x100-navy.png Binary files differnew file mode 100644 index 0000000000..ee8f953c00 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/100x100-navy.png diff --git a/testing/web-platform/tests/html/editing/dnd/resources/1x1-transparent.gif b/testing/web-platform/tests/html/editing/dnd/resources/1x1-transparent.gif Binary files differnew file mode 100644 index 0000000000..e565824aaf --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/1x1-transparent.gif diff --git a/testing/web-platform/tests/html/editing/dnd/resources/32mb.py b/testing/web-platform/tests/html/editing/dnd/resources/32mb.py new file mode 100644 index 0000000000..8513f227e9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/32mb.py @@ -0,0 +1,12 @@ +thirty_two_megabytes = 32 * 1024 * 1024 +chunk = b'ab' * 512 * 512 +chunk_length = len(chunk) + +def main(request, response): + def content(): + bytes_sent = 0 + while bytes_sent < thirty_two_megabytes: + yield chunk + bytes_sent += chunk_length + + return [(b"Content-Type", b"text/plain")], content() diff --git a/testing/web-platform/tests/html/editing/dnd/resources/boxnavy.swf b/testing/web-platform/tests/html/editing/dnd/resources/boxnavy.swf Binary files differnew file mode 100644 index 0000000000..c4ef5889a3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/boxnavy.swf diff --git a/testing/web-platform/tests/html/editing/dnd/resources/circle.png b/testing/web-platform/tests/html/editing/dnd/resources/circle.png Binary files differnew file mode 100644 index 0000000000..8bb141cb8c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/circle.png diff --git a/testing/web-platform/tests/html/editing/dnd/resources/crossorigin.sub.js b/testing/web-platform/tests/html/editing/dnd/resources/crossorigin.sub.js new file mode 100644 index 0000000000..d6aaa18ad7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/crossorigin.sub.js @@ -0,0 +1,13 @@ +var httpHostMain = '{{domains[]}}'; //name of the server that this page must accessed over port 80 +var httpHostAlias = '{{domains[www]}}'; //another hostname (must be a subdomain so document.domain can be set to a higher domain) that accesses the same content, over HTTP +var httpsHostAlias = httpHostAlias; //another hostname (can be same as httpHostAlias) that accesses the same content, over HTTPS port +var httpPortAlias = {{ports[http][0]}}; //another port that accesses the same content on the current hostname, over HTTP +//XXX HTTPS +//var httpsPortAlias = ports[https][0]; //another port that accesses the same content on the httpsHostAlias, over HTTPS +var httpsPortAlias = 8443; + +function crossOriginUrl(subdomain, relative_url) { + var a = document.createElement("a"); + a.href = relative_url; + return a.href.replace(location.href.replace("://", "://" + subdomain + ".")); +} diff --git a/testing/web-platform/tests/html/editing/dnd/resources/dragdrop_support.js b/testing/web-platform/tests/html/editing/dnd/resources/dragdrop_support.js new file mode 100644 index 0000000000..f5a1d6417f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/dragdrop_support.js @@ -0,0 +1,9 @@ +function AddEventListenersForElement(evt, callback, capture, element) +{ + element.addEventListener(evt, callback, capture); +} + +function LogTestResult(result) +{ + document.getElementById("test_result").firstChild.data = result; +} diff --git a/testing/web-platform/tests/html/editing/dnd/resources/fail.png b/testing/web-platform/tests/html/editing/dnd/resources/fail.png Binary files differnew file mode 100644 index 0000000000..b593380333 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/fail.png diff --git a/testing/web-platform/tests/html/editing/dnd/resources/filler.html b/testing/web-platform/tests/html/editing/dnd/resources/filler.html new file mode 100644 index 0000000000..6ca9868ac2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/filler.html @@ -0,0 +1,109 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Filler text</title> +</head> +<body> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text</p> + <p>Filler text (end)</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/resources/pass.png b/testing/web-platform/tests/html/editing/dnd/resources/pass.png Binary files differnew file mode 100644 index 0000000000..2fa1e0ac06 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/pass.png diff --git a/testing/web-platform/tests/html/editing/dnd/resources/test-helper.js b/testing/web-platform/tests/html/editing/dnd/resources/test-helper.js new file mode 100644 index 0000000000..fa9ec20c62 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/resources/test-helper.js @@ -0,0 +1,50 @@ +'use strict'; + +// Moves the pointer to the center of `element`. If `element` is contained within an `iframe`, use +// the `iframe` parameter to indicate which `iframe` contains `element`. This function +// returns a promise that will resolve once the pointer has been moved. + +const mouseMoveToCenter = (element, iframe = undefined) => { + let clientRect = element.getBoundingClientRect(); + let centerX = (clientRect.left + clientRect.right) / 2; + let centerY = (clientRect.top + clientRect.bottom) / 2; + if(iframe != undefined) { + clientRect = iframe.getBoundingClientRect(); + centerX += clientRect.left; + centerY += clientRect.top; + } + return new test_driver.Actions() + .pointerMove(Math.ceil(centerX), Math.ceil(centerY)) + .send(); +}; + +// The dragDropTest function can be used for tests which require the drag and drop movement. +// `dragElement` takes the element that needs to be dragged and `dropElement` is the element which +// you want to drop the `dragElement` on. `onDropCallback` is called on the onDrop handler and the +// test will only pass if this functions returns true. Also, if the `dropElement` is inside an +// iframe, use the optional `iframe` parameter to specify an iframe element that contains the +// `dropElement` to ensure that tests with an iframe pass. + +function dragDropTest(dragElement, dropElement, onDropCallBack, testDescription, iframe = undefined) { + promise_test((t) => new Promise(async (resolve, reject) => { + dropElement.addEventListener('drop', t.step_func((event) => { + if (onDropCallBack(event) == true) { + resolve(); + } else { + reject(); + } + })); + try { + await mouseMoveToCenter(dragElement); + await new test_driver.Actions() + .pointerDown() + .send(); + await mouseMoveToCenter(dropElement, iframe); + await new test_driver.Actions() + .pointerUp() + .send(); + } catch (e) { + reject(e); + } + }, testDescription)); +} diff --git a/testing/web-platform/tests/html/editing/dnd/roundtrip/001.xhtml b/testing/web-platform/tests/html/editing/dnd/roundtrip/001.xhtml new file mode 100644 index 0000000000..235eca64a1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/roundtrip/001.xhtml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop roundtrip</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png'));} +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondragenter="event.preventDefault()" ondragover="return false" ondrop="addImage(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern outside browser window and then drag it back and drop on itself. It should be duplicated once you drop it.</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/roundtrip/002.xhtml b/testing/web-platform/tests/html/editing/dnd/roundtrip/002.xhtml new file mode 100644 index 0000000000..84bfda2d09 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/roundtrip/002.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>PNG image drag and drop roundtrip</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +</script> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy'" ondragenter="event.preventDefault()" ondrop="addImage(event)" ondragover="return false" 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> +<p>Drag circle outside browser window and then drag it back and drop on itself. It should be duplicated once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/roundtrip/003.xhtml b/testing/web-platform/tests/html/editing/dnd/roundtrip/003.xhtml new file mode 100644 index 0000000000..6cbdbf3bb8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/roundtrip/003.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG image drag and drop roundtrip</title> +<style type="text/css"> +img + {margin:0 2px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); + document.querySelector('p').appendChild(c);} +</script> +</head> +<body> +<p><img ondragstart="event.dataTransfer.effectAllowed = 'copy'" ondragenter="event.preventDefault()" ondrop="addImage(event)" ondragover="return false" 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> +<p>Drag circle outside browser window and then drag it back and drop on itself. It should be duplicated once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/roundtrip/004.xhtml b/testing/web-platform/tests/html/editing/dnd/roundtrip/004.xhtml new file mode 100644 index 0000000000..0b31a5989b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/roundtrip/004.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Text input selection drag and drop roundtrip</title> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragenter="event.preventDefault()" ondragover="return false" ondrop="event.preventDefault();this.value = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'"/></p> +<p>Drag selected text outside browser window and then drag it back and drop on itself. You should see word PASS once you drop it.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/roundtrip/005.xhtml b/testing/web-platform/tests/html/editing/dnd/roundtrip/005.xhtml new file mode 100644 index 0000000000..e482fb2a0f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/roundtrip/005.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop roundtrip</title> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragenter="event.preventDefault()" ondragover="return false" ondrop="document.querySelector('span').firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'">Drag me</span></p> +<p>Drag selected text outside browser window and then drag it back and drop on itself. You should see word PASS once you drop it.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/roundtrip/006.xhtml b/testing/web-platform/tests/html/editing/dnd/roundtrip/006.xhtml new file mode 100644 index 0000000000..45e477aa29 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/roundtrip/006.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop roundtrip</title> +<script type="application/ecmascript"> +function checkLink(event) + {document.querySelector('a').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="event.dataTransfer.effectAllowed = 'copy'" ondragenter="event.preventDefault()" ondrop="checkLink(event)" ondragover="return false">Drag me</a></p> +<p>Drag link outside browser window and then drag it back and drop on itself. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/roundtrip/007.xhtml b/testing/web-platform/tests/html/editing/dnd/roundtrip/007.xhtml new file mode 100644 index 0000000000..a46cb33ee6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/roundtrip/007.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop roundtrip with text/plain data</title> +<style type="text/css"> +div[ondragenter] + {width:40px; + min-height:40px; + margin-top:20px; + padding:40px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div + draggable="true" + ondragstart="event.dataTransfer.effectAllowed = 'copy';event.dataTransfer.setData('text/plain',' PASS ')" + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +<p>Drag blue box outside browser window and then drag it back and drop on itself. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/roundtrip/008.xhtml b/testing/web-platform/tests/html/editing/dnd/roundtrip/008.xhtml new file mode 100644 index 0000000000..33caeebefe --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/roundtrip/008.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop roundtrip with text/uri-list data</title> +<style type="text/css"> +div[ondragenter] + {width:40px; + min-height:40px; + margin-top:20px; + padding:40px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div + draggable="true" + ondragstart="event.dataTransfer.effectAllowed = 'copy';event.dataTransfer.setData('text/uri-list','data:text/plain,PASS')" + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/uri-list').substr(16,4) + ' '))" +/> +<p>Drag blue box outside browser window and then drag it back and drop on itself. You should see word PASS once you drop it.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/001.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/001.xhtml new file mode 100644 index 0000000000..37122c8251 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/001.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input value="Drag me"/></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/002.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/002.xhtml new file mode 100644 index 0000000000..c96a5e62a6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/002.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from search input to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input type="search" value="Selection"/></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/003.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/003.xhtml new file mode 100644 index 0000000000..eed4491a1c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/003.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from tel input to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input type="tel" value="123456789"/></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/004.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/004.xhtml new file mode 100644 index 0000000000..a27dad9f42 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/004.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from url input to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected url to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input type="url" value="http://example.org"/></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/005.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/005.xhtml new file mode 100644 index 0000000000..3ef9f805f2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/005.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from email input to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected email to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input type="email" value="mail@example.org"/></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/006.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/006.xhtml new file mode 100644 index 0000000000..fe5cdf40e3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/006.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from number input to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input type="number" value="123456789"/></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/007.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/007.xhtml new file mode 100644 index 0000000000..ad7379b72e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/007.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from short text input to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected date to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input size="5" value="Drag me"/></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/008.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/008.xhtml new file mode 100644 index 0000000000..4d0437213e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/008.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from password input to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>You should not be able to drag and drop selection from password field to the blue box.</p> +<p><input type="password" value="FAIL"/></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/009.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/009.xhtml new file mode 100644 index 0000000000..3bc8b7b654 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/009.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from readonly text input to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input readonly="readonly" value="Drag me"/></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/010.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/010.xhtml new file mode 100644 index 0000000000..220edea2eb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/010.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from texarea to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +textarea + {height:1.5em; + width:7em;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/011.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/011.xhtml new file mode 100644 index 0000000000..df75fc964b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/011.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the textarea. Selected text should be moved to the textarea once you drop it there.</p> +<p><input value="Drag me"/></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/012.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/012.xhtml new file mode 100644 index 0000000000..c6cf54ea98 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/012.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from search input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the textarea. Selected text should be moved to the textarea once you drop it there.</p> +<p><input type="search" value="Selection"/></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/013.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/013.xhtml new file mode 100644 index 0000000000..9799480ee9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/013.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from tel input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the textarea. Selected text should be moved to the textarea once you drop it there.</p> +<p><input type="tel" value="123456789"/></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/014.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/014.xhtml new file mode 100644 index 0000000000..75bfed79c0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/014.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from url input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected url to the textarea. Selected text should be moved to the textarea once you drop it there.</p> +<p><input type="url" value="http://opera.com"/></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/015.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/015.xhtml new file mode 100644 index 0000000000..546502a5e4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/015.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from email input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected email to the textarea. Selected text should be moved to the textarea once you drop it there.</p> +<p><input type="email" value="mail@example.org"/></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/016.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/016.xhtml new file mode 100644 index 0000000000..d2767c4f7a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/016.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from number input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><input type="number" value="123456789"/></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/017.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/017.xhtml new file mode 100644 index 0000000000..58e7de831d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/017.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from short text input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected date to the textarea. Selected text should be moved to the textarea once you drop it there.</p> +<p><input size="5" value="Drag me"/></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/018.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/018.xhtml new file mode 100644 index 0000000000..76483483c3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/018.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from password input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>You should not be able to drag and drop selection from password field to the textarea.</p> +<p><input type="password" value="FAIL"/></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/019.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/019.xhtml new file mode 100644 index 0000000000..63de9a58df --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/019.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from readonly input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the textarea. Selected text should be moved to the textarea once you drop it there.</p> +<p><input readonly="readonly" value="Drag me"/></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/020.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/020.xhtml new file mode 100644 index 0000000000..98c263abb9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/020.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop between textareas</title> +<style type="text/css"> +p:last-child > textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +p:first-child + p > textarea + {height:1.5em; + width:7em;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the textarea. Selected text should be moved to the textarea once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/021.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/021.xhtml new file mode 100644 index 0000000000..9f44f264b0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/021.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<p><input value="Drag me"/></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/022.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/022.xhtml new file mode 100644 index 0000000000..434e989a85 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/022.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from search input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<p><input type="search" value="Selection"/></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/023.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/023.xhtml new file mode 100644 index 0000000000..d1e3f5dff5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/023.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from tel input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<p><input type="tel" value="123456789"/></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/024.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/024.xhtml new file mode 100644 index 0000000000..4b3b024370 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/024.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from url input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected url to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<p><input type="url" value="http://example.org"/></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/025.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/025.xhtml new file mode 100644 index 0000000000..2f5391eb45 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/025.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from email input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected email to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<p><input type="email" value="mail@example.org"/></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/026.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/026.xhtml new file mode 100644 index 0000000000..6c376c38e2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/026.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from number input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input type="number" value="123456789"/></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/027.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/027.xhtml new file mode 100644 index 0000000000..2a7a067901 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/027.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from short input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected date to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<p><input size="5" value="Drag me"/></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/028.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/028.xhtml new file mode 100644 index 0000000000..e422a18497 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/028.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from password input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>You should not be able to drag and drop selection from password field to the blue box.</p> +<p><input type="password" value="FAIL"/></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/029.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/029.xhtml new file mode 100644 index 0000000000..e101dda24d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/029.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from readonly input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<p><input readonly="readonly" value="Drag me"/></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/030.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/030.xhtml new file mode 100644 index 0000000000..deec97e5e8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/030.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +textarea + {height:1.5em; + width:7em;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/031.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/031.xhtml new file mode 100644 index 0000000000..b3b3be923c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/031.xhtml @@ -0,0 +1,34 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging two lines of text selection from textarea to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +textarea + {width:300px; + height:100px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(25,56)"> +<p> +<textarea> +Here is textarea +with selection that +spans two lines. +Drag selected text to the blue box. +Selected text should be moved to the blue box once you drop it there. +</textarea> +</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/032.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/032.xhtml new file mode 100644 index 0000000000..55358f98cf --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/032.xhtml @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging multiline text selection from textarea to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +textarea + {width:300px; + height:100px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(24,58)"> +<p> +<textarea> +Here is textarea with selection +that spans +three lines. Drag selected text to the blue box. +Copy of selection should end up in the blue box once you drop it there. +</textarea> +</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/033.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/033.xhtml new file mode 100644 index 0000000000..a8011e54b8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/033.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging two lines of text selection between textareas</title> +<style type="text/css"> +textarea + {width:300px; + height:100px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(25,56)"> +<p> +<textarea> +Here is textarea +with selection that +spans two lines. +Drag selected text to the textarea below. +Selected text should be moved to second textarea once you drop it there. +</textarea> +</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/034.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/034.xhtml new file mode 100644 index 0000000000..34ceec09a0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/034.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging multiline text selection between textareas</title> +<style type="text/css"> +textarea + {width:300px; + height:100px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(24,58)"> +<p> +<textarea> +Here is textarea with selection +that spans +three lines. Drag selected text to the textarea below. +Selected text should be moved to second textarea once you drop it there. +</textarea> +</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/035.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/035.xhtml new file mode 100644 index 0000000000..54259f8a10 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/035.xhtml @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging two lines of text selection from textarea to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +textarea + {width:300px; + height:100px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(25,56)"> +<p> +<textarea> +Here is textarea +with selection that +spans two lines. +Drag selected text to the blue box. +Selected text should be moved to the blue box once you drop it there. +</textarea> +</p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/036.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/036.xhtml new file mode 100644 index 0000000000..7c152a21e3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/036.xhtml @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging multiline text selection from textarea to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +textarea + {width:300px; + height:100px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(24,58)"> +<p> +<textarea> +Here is textarea with selection +that spans +three lines. Drag selected text to the blue box. +Selected text should be moved to the blue box once you drop it there. +</textarea> +</p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/037.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/037.xhtml new file mode 100644 index 0000000000..fc06f3a069 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/037.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame selection drag and drop from text input to block element</title> +</head> +<frameset rows="50%, 50%"> +<frame src="helper-drag-me-input.xhtml"/> +<frame src="helper-drop-here-blue-box.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/038.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/038.xhtml new file mode 100644 index 0000000000..5843f5830c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/038.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame selection drag and drop from textarea input to block element</title> +</head> +<frameset rows="50%, 50%"> +<frame src="helper-drag-me-textarea-to-other-blue-box.xhtml"/> +<frame src="helper-drop-here-blue-box.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/039.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/039.xhtml new file mode 100644 index 0000000000..f5f823b956 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/039.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame selection drag and drop from text input to textarea</title> +</head> +<frameset rows="50%, 50%"> +<frame src="helper-drag-me-input-to-other-textarea.xhtml"/> +<frame src="helper-drop-here-textarea.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/040.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/040.xhtml new file mode 100644 index 0000000000..91605aff79 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/040.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame selection drag and drop between textareas</title> +</head> +<frameset rows="50%, 50%"> +<frame src="helper-drag-me-textarea-to-other-textarea.xhtml"/> +<frame src="helper-drop-here-textarea.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/041.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/041.xhtml new file mode 100644 index 0000000000..73a8834722 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/041.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame selection drag and drop from text input to contenteditable element</title> +</head> +<frameset rows="50%, 50%"> +<frame src="helper-drag-me-input.xhtml"/> +<frame src="helper-drop-here-blue-box-contenteditable.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/042.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/042.xhtml new file mode 100644 index 0000000000..686accb246 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/042.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame selection drag and drop from textarea to contenteditable element</title> +</head> +<frameset rows="50%, 50%"> +<frame src="helper-drag-me-textarea-to-other-blue-box.xhtml"/> +<frame src="helper-drop-here-blue-box-contenteditable.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/043.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/043.xhtml new file mode 100644 index 0000000000..bc296d5bc5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/043.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame selection drag and drop between text inputs</title> +</head> +<frameset rows="50%, 50%"> +<frame src="helper-drag-me-input-to-other-input.xhtml"/> +<frame src="helper-drop-here-input.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/044.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/044.xhtml new file mode 100644 index 0000000000..0dd958edc8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/044.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross frame selection drag and drop from textarea to text input</title> +</head> +<frameset rows="50%, 50%"> +<frame src="helper-drag-me-textarea-to-other-input.xhtml"/> +<frame src="helper-drop-here-input.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/045.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/045.xhtml new file mode 100644 index 0000000000..fe48994f40 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/045.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input to iframe</title> +<style type="text/css"> +iframe + {width:350px; + height:150px; + border-style:none;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input value="Drag me"/></p> +<p><iframe src="helper-drop-here-blue-box.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/046.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/046.xhtml new file mode 100644 index 0000000000..1743473882 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/046.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea to iframe</title> +<style type="text/css"> +iframe + {width:350px; + height:150px; + border-style:none;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +<p><iframe src="helper-drop-here-blue-box.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/047.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/047.xhtml new file mode 100644 index 0000000000..420269282e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/047.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input to textarea in iframe</title> +<style type="text/css"> +iframe + {width:500px; + height:400px; + border-style:none;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><input value="Drag me"/></p> +<p><iframe src="helper-drop-here-textarea.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/048.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/048.xhtml new file mode 100644 index 0000000000..7b2610cfc7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/048.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea to another textarea in iframe</title> +<style type="text/css"> +iframe + {width:500px; + height:400px; + border-style:none;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +<p><iframe src="helper-drop-here-textarea.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/049.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/049.xhtml new file mode 100644 index 0000000000..791c0180eb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/049.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input to contenteditable element in iframe</title> +<style type="text/css"> +iframe + {width:350px; + height:150px; + border-style:none;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input value="Drag me"/></p> +<p><iframe src="helper-drop-here-blue-box-contenteditable.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/050.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/050.xhtml new file mode 100644 index 0000000000..53b3997400 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/050.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea to contenteditable element in iframe</title> +<style type="text/css"> +iframe + {width:350px; + height:150px; + border-style:none;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +<p><iframe src="helper-drop-here-blue-box-contenteditable.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/051.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/051.xhtml new file mode 100644 index 0000000000..3cd1145f1a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/051.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input in iframe to block element</title> +<style type="text/css"> +iframe + {width:500px; + height:200px; + border-style:none;} +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-input.xhtml">XHTML document</iframe></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/052.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/052.xhtml new file mode 100644 index 0000000000..843115017a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/052.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea in iframe to block element</title> +<style type="text/css"> +iframe + {width:500px; + height:200px; + border-style:none;} +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-textarea-to-other-blue-box.xhtml">XHTML document</iframe></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/053.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/053.xhtml new file mode 100644 index 0000000000..f5f9c44a11 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/053.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input in iframe to textarea</title> +<style type="text/css"> +iframe + {width:500px; + height:200px; + border-style:none;} +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-input-to-other-textarea.xhtml">XHTML document</iframe></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/054.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/054.xhtml new file mode 100644 index 0000000000..ebc9fcf0da --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/054.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea in iframe to another textarea</title> +<style type="text/css"> +iframe + {width:500px; + height:200px; + border-style:none;} +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-textarea-to-other-textarea.xhtml">XHTML document</iframe></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/055.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/055.xhtml new file mode 100644 index 0000000000..29488c3a60 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/055.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input in iframe to contenteditable element</title> +<style type="text/css"> +iframe + {width:500px; + height:200px; + border-style:none;} +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-input.xhtml">XHTML document</iframe></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/056.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/056.xhtml new file mode 100644 index 0000000000..72a51c64b8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/056.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea in iframe to contenteditable element</title> +<style type="text/css"> +iframe + {width:500px; + height:200px; + border-style:none;} +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-textarea-to-other-blue-box.xhtml">XHTML document</iframe></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/057.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/057.xhtml new file mode 100644 index 0000000000..950bccbdd0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/057.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input in iframe to another input element</title> +<style type="text/css"> +iframe + {width:500px; + height:200px; + border-style:none;} +textarea + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-input-to-other-input.xhtml">XHTML document</iframe></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/058.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/058.xhtml new file mode 100644 index 0000000000..d8a6380c38 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/058.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea in iframe to input element</title> +<style type="text/css"> +iframe + {width:500px; + height:200px; + border-style:none;} +textarea + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-textarea-to-other-input.xhtml">XHTML document</iframe></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/059.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/059.xhtml new file mode 100644 index 0000000000..b67547d482 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/059.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross iframe selection drag and drop from text input to block element</title> +<style type="text/css"> +iframe + {width:100%; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-input.xhtml">XHTML document</iframe></p> +<p><iframe src="helper-drop-here-blue-box.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/060.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/060.xhtml new file mode 100644 index 0000000000..7ad6952222 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/060.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross iframe selection drag and drop from textarea to block element</title> +<style type="text/css"> +iframe + {width:100%; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-textarea-to-other-blue-box.xhtml">XHTML document</iframe></p> +<p><iframe src="helper-drop-here-blue-box.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/061.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/061.xhtml new file mode 100644 index 0000000000..371673ffa1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/061.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross iframe selection drag and drop from text input to textarea</title> +<style type="text/css"> +iframe + {width:100%; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-input-to-other-textarea.xhtml">XHTML document</iframe></p> +<p><iframe src="helper-drop-here-textarea.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/062.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/062.xhtml new file mode 100644 index 0000000000..5f38444f90 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/062.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross iframe selection drag and drop between textareas</title> +<style type="text/css"> +iframe + {width:100%; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-textarea-to-other-textarea.xhtml">XHTML document</iframe></p> +<p><iframe src="helper-drop-here-textarea.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/063.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/063.xhtml new file mode 100644 index 0000000000..68d4f33509 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/063.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross iframe selection drag and drop from text input to contenteditable element</title> +<style type="text/css"> +iframe + {width:100%; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-input.xhtml">XHTML document</iframe></p> +<p><iframe src="helper-drop-here-blue-box-contenteditable.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/064-1.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/064-1.xhtml new file mode 100644 index 0000000000..bf4df42290 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/064-1.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +textarea + {height:1.5em; + width:7em;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the blue box. Selection should be moved to the blue box once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/064.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/064.xhtml new file mode 100644 index 0000000000..9e6be0d034 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/064.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross iframe selection drag and drop from textarea to contenteditable element</title> +<style type="text/css"> +iframe + {width:100%; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="064-1.xhtml">XHTML document</iframe></p> +<p><iframe src="helper-drop-here-blue-box-contenteditable.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/065.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/065.xhtml new file mode 100644 index 0000000000..0d8d21f04c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/065.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross iframe selection drag and drop between text inputs</title> +<style type="text/css"> +iframe + {width:100%; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-input-to-other-input.xhtml">XHTML document</iframe></p> +<p><iframe src="helper-drop-here-input.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/066.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/066.xhtml new file mode 100644 index 0000000000..36907bc492 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/066.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross iframe selection drag and drop from textarea to text input</title> +<style type="text/css"> +iframe + {width:100%; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-textarea-to-other-input.xhtml">XHTML document</iframe></p> +<p><iframe src="helper-drop-here-input.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/067-1.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/067-1.xhtml new file mode 100644 index 0000000000..a908282bb7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/067-1.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +iframe + {width:100%; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-input.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/067-2.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/067-2.xhtml new file mode 100644 index 0000000000..22f8b55020 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/067-2.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +iframe + {width:100%; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drop-here-blue-box.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/067.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/067.xhtml new file mode 100644 index 0000000000..2d33465fd4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/067.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Nested cross frame selection drag and drop from text input to block element</title> +</head> +<frameset rows="50%, 50%"> +<frame src="067-1.xhtml"/> +<frame src="067-2.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/068-1.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/068-1.xhtml new file mode 100644 index 0000000000..c9fc41b478 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/068-1.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +</head> +<frameset rows="100%, 0%"> +<frame src="helper-drag-me-textarea-to-other-textarea.xhtml"/> +<frame src="data:text/plain,1"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/068-2.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/068-2.xhtml new file mode 100644 index 0000000000..b639b16fc1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/068-2.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +</head> +<frameset rows="100%, 0%"> +<frame src="helper-drop-here-textarea.xhtml"/> +<frame src="data:text/plain,2"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/068.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/068.xhtml new file mode 100644 index 0000000000..5f051697cd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/068.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Nested cross frame selection drag and drop between textareas</title> +</head> +<frameset rows="50%, 50%"> +<frame src="068-1.xhtml"/> +<frame src="068-2.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/069.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/069.xhtml new file mode 100644 index 0000000000..149a41df08 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/069.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop to textarea in iframe</title> +<style type="text/css"> +iframe + {width:500px; + height:400px; + border-style:none;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><iframe src="helper-drop-here-textarea.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/070.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/070.xhtml new file mode 100644 index 0000000000..7255b2b21e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/070.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop to contenteditable element in iframe</title> +<style type="text/css"> +iframe + {width:500px; + height:400px; + border-style:none;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><iframe src="helper-drop-here-blue-box-contenteditable.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/071.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/071.xhtml new file mode 100644 index 0000000000..73e6722c00 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/071.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop between text inputs of different size</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the input below. Selected text should be moved to the input once you drop it there.</p> +<p><input value="Drag me"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/072.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/072.xhtml new file mode 100644 index 0000000000..343cc3fc0c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/072.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from search to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the input below. Selected text should be moved to the input once you drop it there.</p> +<p><input type="search" value="Selection"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/073.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/073.xhtml new file mode 100644 index 0000000000..2a082b8a11 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/073.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from tel to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the input below. Selected text should be moved to the input once you drop it there.</p> +<p><input type="tel" value="123456789"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/074.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/074.xhtml new file mode 100644 index 0000000000..b8966e71ba --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/074.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from url to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected url to the input below. Selected text should be moved to the input once you drop it there.</p> +<p><input type="url" value="http://example.org"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/075.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/075.xhtml new file mode 100644 index 0000000000..75af080efc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/075.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from email to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected email to the input below. Selected text should be moved to the input once you drop it there.</p> +<p><input type="email" value="mail@example.org"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/076.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/076.xhtml new file mode 100644 index 0000000000..c9c732e7e1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/076.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from number to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the input below. Copy of selection should end up in the input once you drop it there.</p> +<p><input type="number" value="123456789"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/077.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/077.xhtml new file mode 100644 index 0000000000..ecd4ab3801 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/077.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from short text input to another text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected date to the input below. Selected text should be moved to the input once you drop it there.</p> +<p><input size="5" value="Drag me"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/078.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/078.xhtml new file mode 100644 index 0000000000..853cf63b60 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/078.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from password to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>You should not be able to drag and drop selection from password field to the input below.</p> +<p><input type="password" value="FAIL"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/079.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/079.xhtml new file mode 100644 index 0000000000..1ad458df4b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/079.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from readonly text input to another text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the input below. Selected text should be moved to the input once you drop it there.</p> +<p><input readonly="readonly" value="Drag me"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/080.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/080.xhtml new file mode 100644 index 0000000000..3ebc0aafd2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/080.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea to text input</title> +<style type="text/css"> +input + {width:300px; + height:100px; + margin-top:20px;} +textarea + {height:1.5em; + width:7em;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the input below. Selected text should be moved to the input once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/081.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/081.xhtml new file mode 100644 index 0000000000..c65dd26a3f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/081.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Events during selection drag and drop to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:50px; + margin-top:20px;} +.hidden + {visibility:hidden;} +</style> +<script type="application/ecmascript"> +function evtChange() + {document.querySelectorAll('tt')[0].firstChild.nodeValue = 'PASS'} +function evtInput() + {document.querySelectorAll('tt')[1].firstChild.nodeValue = 'PASS'} +function evtDrop() + {document.querySelectorAll('tt')[2].firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL (selection is not properly added to data store)'} +function evtKeypress() + {document.querySelectorAll('tt')[3].firstChild.nodeValue = 'FAIL (even is not supposed to fire)'} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<p>Drag selected text to the input below. Follow check results link once you drop selection in the input.</p> +<p><input placeholder="Drop selection here" onchange="evtChange()" oninput="evtInput()" onkeypress="evtKeypress()" ondrop="evtDrop()"/></p> +<p><a href="javascript:document.querySelector('ul').removeAttribute('class')">Check results</a></p> +<ul class="hidden"> +<li>Change event: <tt>FAIL (even did not fire)</tt></li> +<li>Input event: <tt>FAIL (even did not fire)</tt></li> +<li>Drop event: <tt>FAIL (even did not fire)</tt></li> +<li>Keypress event: <tt>PASS</tt></li> +</ul> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/082.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/082.xhtml new file mode 100644 index 0000000000..57c2a53f4d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/082.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Events during selection drag and drop to search input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:50px; + margin-top:20px;} +.hidden + {visibility:hidden;} +</style> +<script type="application/ecmascript"> +function evtChange() + {document.querySelectorAll('tt')[0].firstChild.nodeValue = 'PASS'} +function evtInput() + {document.querySelectorAll('tt')[1].firstChild.nodeValue = 'PASS'} +function evtDrop() + {document.querySelectorAll('tt')[2].firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL (selection is not properly added to data store)'} +function evtKeypress() + {document.querySelectorAll('tt')[3].firstChild.nodeValue = 'FAIL (even is not supposed to fire)'} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<p>Drag selected text to the input below. Follow check results link once you drop selection in the input.</p> +<p><input type="search" placeholder="Drop selection here" onchange="evtChange()" oninput="evtInput()" onkeypress="evtKeypress()" ondrop="evtDrop()"/></p> +<p><a href="javascript:document.querySelector('ul').removeAttribute('class')">Check results</a></p> +<ul class="hidden"> +<li>Change event: <tt>FAIL (even did not fire)</tt></li> +<li>Input event: <tt>FAIL (even did not fire)</tt></li> +<li>Drop event: <tt>FAIL (even did not fire)</tt></li> +<li>Keypress event: <tt>PASS</tt></li> +</ul> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/083.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/083.xhtml new file mode 100644 index 0000000000..ba527ae4e2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/083.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Events during selection drag and drop to tel input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:50px; + margin-top:20px;} +.hidden + {visibility:hidden;} +</style> +<script type="application/ecmascript"> +function evtChange() + {document.querySelectorAll('tt')[0].firstChild.nodeValue = 'PASS'} +function evtInput() + {document.querySelectorAll('tt')[1].firstChild.nodeValue = 'PASS'} +function evtDrop() + {document.querySelectorAll('tt')[2].firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == '123456789')?'PASS':'FAIL (selection is not properly added to data store)'} +function evtKeypress() + {document.querySelectorAll('tt')[3].firstChild.nodeValue = 'FAIL (even is not supposed to fire)'} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>123456789</p> +<p>Drag selected number to the input below. Follow check results link once you drop selection in the input.</p> +<p><input type="tel" placeholder="Drop selection here" onchange="evtChange()" oninput="evtInput()" onkeypress="evtKeypress()" ondrop="evtDrop()"/></p> +<p><a href="javascript:document.querySelector('ul').removeAttribute('class')">Check results</a></p> +<ul class="hidden"> +<li>Change event: <tt>FAIL (even did not fire)</tt></li> +<li>Input event: <tt>FAIL (even did not fire)</tt></li> +<li>Drop event: <tt>FAIL (even did not fire)</tt></li> +<li>Keypress event: <tt>PASS</tt></li> +</ul> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/084.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/084.xhtml new file mode 100644 index 0000000000..f602d712bd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/084.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Events during selection drag and drop to url input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:50px; + margin-top:20px;} +.hidden + {visibility:hidden;} +</style> +<script type="application/ecmascript"> +function evtChange() + {document.querySelectorAll('tt')[0].firstChild.nodeValue = 'PASS'} +function evtInput() + {document.querySelectorAll('tt')[1].firstChild.nodeValue = 'PASS'} +function evtDrop() + {document.querySelectorAll('tt')[2].firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'http://example.org')?'PASS':'FAIL (selection is not properly added to data store)'} +function evtKeypress() + {document.querySelectorAll('tt')[3].firstChild.nodeValue = 'FAIL (even is not supposed to fire)'} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>http://example.org</p> +<p>Drag selected url to the input below. Follow check results link once you drop selection in the input.</p> +<p><input type="url" placeholder="Drop selection here" onchange="evtChange()" oninput="evtInput()" onkeypress="evtKeypress()" ondrop="evtDrop()"/></p> +<p><a href="javascript:document.querySelector('ul').removeAttribute('class')">Check results</a></p> +<ul class="hidden"> +<li>Change event: <tt>FAIL (even did not fire)</tt></li> +<li>Input event: <tt>FAIL (even did not fire)</tt></li> +<li>Drop event: <tt>FAIL (even did not fire)</tt></li> +<li>Keypress event: <tt>PASS</tt></li> +</ul> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/085.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/085.xhtml new file mode 100644 index 0000000000..842288f558 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/085.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Events during selection drag and drop to email input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:50px; + margin-top:20px;} +.hidden + {visibility:hidden;} +</style> +<script type="application/ecmascript"> +function evtChange() + {document.querySelectorAll('tt')[0].firstChild.nodeValue = 'PASS'} +function evtInput() + {document.querySelectorAll('tt')[1].firstChild.nodeValue = 'PASS'} +function evtDrop() + {document.querySelectorAll('tt')[2].firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'mail@example.org')?'PASS':'FAIL (selection is not properly added to data store)'} +function evtKeypress() + {document.querySelectorAll('tt')[3].firstChild.nodeValue = 'FAIL (even is not supposed to fire)'} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>mail@example.org</p> +<p>Drag selected address to the input below. Follow check results link once you drop selection in the input.</p> +<p><input type="email" placeholder="Drop selection here" onchange="evtChange()" oninput="evtInput()" onkeypress="evtKeypress()" ondrop="evtDrop()"/></p> +<p><a href="javascript:document.querySelector('ul').removeAttribute('class')">Check results</a></p> +<ul class="hidden"> +<li>Change event: <tt>FAIL (even did not fire)</tt></li> +<li>Input event: <tt>FAIL (even did not fire)</tt></li> +<li>Drop event: <tt>FAIL (even did not fire)</tt></li> +<li>Keypress event: <tt>PASS</tt></li> +</ul> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/086.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/086.xhtml new file mode 100644 index 0000000000..349d7795e7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/086.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Events during selection drag and drop to number input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:50px; + margin-top:20px;} +.hidden + {visibility:hidden;} +</style> +<script type="application/ecmascript"> +function evtChange() + {document.querySelectorAll('tt')[0].firstChild.nodeValue = 'PASS'} +function evtInput() + {document.querySelectorAll('tt')[1].firstChild.nodeValue = 'PASS'} +function evtDrop() + {document.querySelectorAll('tt')[2].firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == '123456789')?'PASS':'FAIL (selection is not properly added to data store)'} +function evtKeypress() + {document.querySelectorAll('tt')[3].firstChild.nodeValue = 'FAIL (even is not supposed to fire)'} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>123456789</p> +<p>Drag selected address to the input below. Follow check results link once you drop selection in the input.</p> +<p><input type="number" placeholder="Drop selection here" onchange="evtChange()" oninput="evtInput()" onkeypress="evtKeypress()" ondrop="evtDrop()"/></p> +<p><a href="javascript:document.querySelector('ul').removeAttribute('class')">Check results</a></p> +<ul class="hidden"> +<li>Change event: <tt>FAIL (even did not fire)</tt></li> +<li>Input event: <tt>FAIL (even did not fire)</tt></li> +<li>Drop event: <tt>FAIL (even did not fire)</tt></li> +<li>Keypress event: <tt>PASS</tt></li> +</ul> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/087.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/087.xhtml new file mode 100644 index 0000000000..64e02c1ef7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/087.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Scrolling during selection drag and drop to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:50px; + margin-top:200px;} +div + {height:150px; + width:500px; + overflow-y:scroll;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<div> +<p>You should be able to drag selected text to the input at the bottom of scrollable container (dragging towards the bottom edge triggers scrolling).</p> +<input placeholder="Drop selection here"/> +<p>Copy of selection should end up in the input once you drop it there.</p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/088.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/088.xhtml new file mode 100644 index 0000000000..4900b13c24 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/088.xhtml @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Vertical scrolling during selection drag and drop to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:50px;} +div > p:first-child + {margin-bottom:200px;} +body > div + {height:150px; + width:500px; + overflow-y:scroll;} +div > div + {height:400px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<div> + <div> + <p>You should be able to drag selected text to the input at the bottom of scrollable container (dragging towards the bottom edge triggers scrolling).</p> + <input placeholder="Drop selection here"/> + <p>Copy of selection should end up in the input once you drop it there.</p> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/089.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/089.xhtml new file mode 100644 index 0000000000..26185e3389 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/089.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Scrolling during selection drag and drop to iframe</title> +<style type="text/css"> +iframe + {width:350px; + height:150px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<p><iframe src="helper-scroll-then-drop-input.xhtml">XHTML document</iframe></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/090.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/090.xhtml new file mode 100644 index 0000000000..62dfa0c6ef --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/090.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Scrolling during selection drag and drop to object</title> +<style type="text/css"> +object + {width:350px; + height:150px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<p><object type="application/xhtml+xml" data="helper-scroll-then-drop-input.xhtml">XHTML document</object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/091-1.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/091-1.xhtml new file mode 100644 index 0000000000..5e11544c4e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/091-1.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/091-2.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/091-2.xhtml new file mode 100644 index 0000000000..12d5cef8a7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/091-2.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:50px;} +p:first-child + {margin-bottom:1000px;} +</style> +</head> +<body> +<p>You should be able to drag selected text to the input at the bottom of scrollable container (dragging towards the bottom edge triggers scrolling).</p> +<input placeholder="Drop selection here"/> +<p>Copy of selection should end up in the input once you drop it there.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/091.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/091.xhtml new file mode 100644 index 0000000000..bc85f2231b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/091.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Scrolling during selection drag and drop to frame</title> +</head> +<frameset rows="50%, 50%"> +<frame src="091-1.xhtml"/> +<frame src="091-2.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/092.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/092.xhtml new file mode 100644 index 0000000000..30d53f0f7d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/092.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input to element in object</title> +<style type="text/css"> +object + {width:350px; + height:150px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input value="Drag me"/></p> +<p><object type="application/xhtml+xml" data="helper-drop-here-blue-box.xhtml">XHTML document</object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/093.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/093.xhtml new file mode 100644 index 0000000000..ffc32ce77e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/093.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea to element in object</title> +<style type="text/css"> +object + {width:350px; + height:150px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +<p><object type="application/xhtml+xml" data="helper-drop-here-blue-box.xhtml">XHTML document</object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/094.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/094.xhtml new file mode 100644 index 0000000000..bd4d63ecf5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/094.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input to textarea in object</title> +<style type="text/css"> +object + {width:500px; + height:400px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><input value="Drag me"/></p> +<p><object type="application/xhtml+xml" data="helper-drop-here-textarea.xhtml">XHTML document</object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/095.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/095.xhtml new file mode 100644 index 0000000000..8035f79900 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/095.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea to another textarea in object</title> +<style type="text/css"> +object + {width:500px; + height:400px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +<p><object type="application/xhtml+xml" data="helper-drop-here-textarea.xhtml">XHTML document</object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/096.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/096.xhtml new file mode 100644 index 0000000000..508d085824 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/096.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input to contenteditable element in object</title> +<style type="text/css"> +object + {width:350px; + height:150px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input value="Drag me"/></p> +<p><object type="application/xhtml+xml" data="helper-drop-here-blue-box-contenteditable.xhtml">XHTML document</object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/097.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/097.xhtml new file mode 100644 index 0000000000..915fa31356 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/097.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea to contenteditable element in object</title> +<style type="text/css"> +object + {width:350px; + height:150px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +<p><object type="application/xhtml+xml" data="helper-drop-here-blue-box-contenteditable.xhtml">XHTML document</object></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/098.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/098.xhtml new file mode 100644 index 0000000000..10dc9b085a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/098.xhtml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input in object to block element</title> +<style type="text/css"> +object + {width:500px; + height:200px;} +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<p><object type="application/xhtml+xml" data="helper-drag-me-input.xhtml">XHTML document</object></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/099.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/099.xhtml new file mode 100644 index 0000000000..79fbd954d8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/099.xhtml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea in object to block element</title> +<style type="text/css"> +object + {width:500px; + height:200px;} +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<p><object type="application/xhtml+xml" data="helper-drag-me-textarea-to-other-blue-box.xhtml">XHTML document</object></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/100.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/100.xhtml new file mode 100644 index 0000000000..8e0ab2567d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/100.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input in object to textarea</title> +<style type="text/css"> +object + {width:500px; + height:200px;} +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<p><object type="application/xhtml+xml" data="helper-drag-me-input-to-other-textarea.xhtml">XHTML document</object></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/101.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/101.xhtml new file mode 100644 index 0000000000..4c712c089f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/101.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea in object to another textarea</title> +<style type="text/css"> +object + {width:500px; + height:200px;} +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<p><object type="application/xhtml+xml" data="helper-drag-me-textarea-to-other-textarea.xhtml">XHTML document</object></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/102.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/102.xhtml new file mode 100644 index 0000000000..1420b35ab6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/102.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input in object to contenteditable element</title> +<style type="text/css"> +object + {width:500px; + height:200px;} +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<p><object type="application/xhtml+xml" data="helper-drag-me-input.xhtml">XHTML document</object></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/103.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/103.xhtml new file mode 100644 index 0000000000..fef3439911 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/103.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea in object to contenteditable element</title> +<style type="text/css"> +object + {width:500px; + height:200px;} +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<p><object type="application/xhtml+xml" data="helper-drag-me-textarea-to-other-blue-box.xhtml">XHTML document</object></p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/104.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/104.xhtml new file mode 100644 index 0000000000..62f174685f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/104.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input in object to another text input</title> +<style type="text/css"> +object + {width:500px; + height:200px;} +textarea + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body> +<p><object type="application/xhtml+xml" data="helper-drag-me-input-to-other-input.xhtml">XHTML document</object></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/105.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/105.xhtml new file mode 100644 index 0000000000..d4b0aa5d6d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/105.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea in object to text input</title> +<style type="text/css"> +object + {width:500px; + height:200px;} +textarea + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body> +<p><object type="application/xhtml+xml" data="helper-drag-me-textarea-to-other-input.xhtml">XHTML document</object></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/106.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/106.xhtml new file mode 100644 index 0000000000..9accdc0758 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/106.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from textarea input in dataURL frame to block element</title> +</head> +<frameset rows="50%, 50%"> +<frame src="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3EDragging%20selection%3C/title%3E%3C/head%3E%3Cbody%20onload%3D%22document.querySelector%28%27input%27%29.select%28%29%22%3E%3Cp%3EDrag%20selected%20text%20to%20the%20blue%20box.%20Copy%20of%20selection%20should%20end%20up%20in%20the%20blue%20box%20once%20you%20drop%20it%20there.%3C/p%3E%3Cp%3E%3Cinput%20value%3D%22Drag%20me%22/%3E%3C/p%3E%3C/body%3E%3C/html%3E"/> +<frame src="helper-drop-here-blue-box.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/107-1.html b/testing/web-platform/tests/html/editing/dnd/selection/107-1.html new file mode 100644 index 0000000000..5dc99143f9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/107-1.html @@ -0,0 +1,8 @@ +<!doctype html> +<title>Dragging selection breaks layout</title> +<p>Select all text in the input below, drag it downwards a little, and release it. Pass if you can still edit the contents of the input.</p> +<p><input value="SelectAndDrag"/></p> +<script type="text/javascript"> +document.getElementsByTagName('input')[0].select(); +</script> +<noscript><p>Enable JavaScript and reload</p></noscript>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/107.html b/testing/web-platform/tests/html/editing/dnd/selection/107.html new file mode 100644 index 0000000000..8a930e665b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/107.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>Dragging selection breaks layout</title> +<frameset rows="100%"> + <frame src="107-1.html"> +</frameset> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/108-1.html b/testing/web-platform/tests/html/editing/dnd/selection/108-1.html new file mode 100644 index 0000000000..9359fed430 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/108-1.html @@ -0,0 +1,3 @@ +<!doctype html> +<title>Dragging custom selection breaks layout</title> +<p>Select this sentence, drag it downwards a little, and release it. Pass if you can now select this sentence instead.</p>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/108.html b/testing/web-platform/tests/html/editing/dnd/selection/108.html new file mode 100644 index 0000000000..8e9ce72301 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/108.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>Dragging custom selection breaks layout</title> +<frameset rows="100%"> + <frame src="108-1.html"> +</frameset> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/109.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/109.xhtml new file mode 100644 index 0000000000..fcf78f0878 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/109.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from text input to RTL textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the textarea. Selected text should be moved to the textarea once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><input dir="rtl" value="‮FAIL|SSAP‬"/></p> +<p><textarea dir="rtl" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/110.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/110.xhtml new file mode 100644 index 0000000000..16d7aebb15 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/110.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from text input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the textarea. Selected text should be moved to the textarea once you drop it there. Text direction should be preserved during drag and drop.</p> +<div dir="rtl"> +<p><input value="‮FAIL|SSAP‬"/></p> +<p><textarea placeholder="Drop selection here"/></p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/111.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/111.xhtml new file mode 100644 index 0000000000..95117474d6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/111.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from RTL element to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p dir="rtl">‮FAIL|SSAP‬</p> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there. Text direction should be preserved during drag and drop.</p> +<p dir="rtl"><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/112.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/112.xhtml new file mode 100644 index 0000000000..f335fc065f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/112.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>‮FAIL|SSAP‬</p> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there. Text direction should be preserved during drag and drop.</p> +<p dir="rtl"><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/113.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/113.xhtml new file mode 100644 index 0000000000..1d66332b6b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/113.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop between textareas</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,11)"> +<p>Drag selected text to the textarea. Selected text should be moved to the textarea once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><textarea>‮FAIL|SSAP‬</textarea></p> +<p><textarea dir="rtl" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/114.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/114.xhtml new file mode 100644 index 0000000000..65a1de5ff9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/114.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop between RTL textareas</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,11)"> +<p>Drag selected text to the textarea. Selected text should be moved to the textarea once you drop it there. Text direction should be preserved during drag and drop.</p> +<div dir="rtl"> +<p><textarea>‮FAIL|SSAP‬</textarea></p> +<p><textarea placeholder="Drop selection here"/></p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/115.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/115.xhtml new file mode 100644 index 0000000000..5eb4ec5b3b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/115.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop between RTL inputs</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the input below. Selected text should be moved to the input once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><input dir="rtl" value="‮FAIL|SSAP‬"/></p> +<p><input dir="rtl" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/116.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/116.xhtml new file mode 100644 index 0000000000..1e57aaf137 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/116.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop between text inputs</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the input below. Selected text should be moved to the input once you drop it there. Text direction should be preserved during drag and drop.</p> +<div dir="rtl"> +<p><input value="‮FAIL|SSAP‬"/></p> +<p><input placeholder="Drop selection here"/></p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/117.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/117.xhtml new file mode 100644 index 0000000000..8be3d0e697 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/117.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from RTL element to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p dir="rtl">‮FAIL|SSAP‬</p> +<p>Drag selected text to the input below. Copy of selection should end up in the input once you drop it there. Text direction should be preserved during drag and drop.</p> +<p dir="rtl"><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/118.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/118.xhtml new file mode 100644 index 0000000000..e5ead99fd0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/118.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>‮FAIL|SSAP‬</p> +<p>Drag selected text to the input below. Copy of selection should end up in the input once you drop it there. Text direction should be preserved during drag and drop.</p> +<p dir="rtl"><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/119.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/119.xhtml new file mode 100644 index 0000000000..71507c1ab6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/119.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from textarea to RTL text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,11)"> +<p>Drag selected text to the input below. Selected text should be moved to the input once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><textarea>‮FAIL|SSAP‬</textarea></p> +<p><input dir="rtl" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/120.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/120.xhtml new file mode 100644 index 0000000000..57be0f7ce7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/120.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from textarea to text input</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,11)"> +<p>Drag selected text to the input below. Selected text should be moved to the input once you drop it there. Text direction should be preserved during drag and drop.</p> +<div dir="rtl"> +<p><textarea>‮FAIL|SSAP‬</textarea></p> +<p><input placeholder="Drop selection here"/></p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/121.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/121.xhtml new file mode 100644 index 0000000000..a5a709c3b9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/121.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from RTL text input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Selected text should be moved to the box once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><input dir="rtl" value="‮FAIL|SSAP‬"/></p> +<p><div dir="rtl" contenteditable="true"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/122.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/122.xhtml new file mode 100644 index 0000000000..84ec8c61ab --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/122.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from text input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Selected text should be moved to the box once you drop it there. Text direction should be preserved during drag and drop.</p> +<div dir="rtl"> +<p><input value="‮FAIL|SSAP‬"/></p> +<p><div contenteditable="true"/></p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/123.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/123.xhtml new file mode 100644 index 0000000000..68ff2e8218 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/123.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from RTL element to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p dir="rtl">‮FAIL|SSAP‬</p> +<p>Drag selected text to the blue box. Copy of selection should end up in the box once you drop it there. Text direction should be preserved during drag and drop.</p> +<p dir="rtl"><div contenteditable="true"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/124.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/124.xhtml new file mode 100644 index 0000000000..5c5c1b822f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/124.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>‮FAIL|SSAP‬</p> +<p>Drag selected text to the blue box. Copy of selection should end up in the box once you drop it there. Text direction should be preserved during drag and drop.</p> +<p dir="rtl"><div contenteditable="true"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/125.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/125.xhtml new file mode 100644 index 0000000000..fc4b686dcc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/125.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from textarea to RTL contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,11)"> +<p>Drag selected text to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<p><textarea>‮FAIL|SSAP‬</textarea></p> +<p><div dir="rtl" contenteditable="true"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/126.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/126.xhtml new file mode 100644 index 0000000000..80b2e415ef --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/126.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from textarea to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,11)"> +<p>Drag selected text to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<div dir="rtl"> +<p><textarea>‮FAIL|SSAP‬</textarea></p> +<p><div contenteditable="true"/></p> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/127.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/127.xhtml new file mode 100644 index 0000000000..20d73973e4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/127.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from text input to RTL element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the box once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><input dir="rtl" value="‮FAIL|SSAP‬"/></p> +<div + dir="rtl" + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/128.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/128.xhtml new file mode 100644 index 0000000000..4814fa29c3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/128.xhtml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from text input to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the box once you drop it there. Text direction should be preserved during drag and drop.</p> +<div dir="rtl"> +<p><input value="‮FAIL|SSAP‬"/></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div > div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/129.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/129.xhtml new file mode 100644 index 0000000000..8bbc4d81e8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/129.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from RTL element to another RTL element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p dir="rtl">‮FAIL|SSAP‬</p> +<p>Drag selected text to the blue box. Copy of selection should end up in the box once you drop it there. Text direction should be preserved during drag and drop.</p> +<div + dir="rtl" + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/130.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/130.xhtml new file mode 100644 index 0000000000..f567e09f99 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/130.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>‮FAIL|SSAP‬</p> +<p>Drag selected text to the blue box. Copy of selection should end up in the box once you drop it there. Text direction should be preserved during drag and drop.</p> +<div + dir="rtl" + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/131.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/131.xhtml new file mode 100644 index 0000000000..9e0539615b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/131.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from textarea to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,11)"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><textarea>‮FAIL|SSAP‬</textarea></p> +<div + dir="rtl" + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/132.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/132.xhtml new file mode 100644 index 0000000000..d3d57dd843 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/132.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>RTL text selection drag and drop from RTL textarea to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,11)"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><textarea dir="rtl">‮FAIL|SSAP‬</textarea></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/133.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/133.xhtml new file mode 100644 index 0000000000..40196315f7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/133.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Multielement selection drag and drop</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('div'))"> +<div> + <p>Drag selected text to the textarea.</p> + <p>Copy of selection should end up in the textarea once you drop it there.</p> +</div> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/134.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/134.xhtml new file mode 100644 index 0000000000..939e295723 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/134.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop after selecting whole page content</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('body'))"> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/135.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/135.xhtml new file mode 100644 index 0000000000..44c8c39dea --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/135.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop after manually selecting whole page content</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<p>Select whole page (Ctrl+A) and try to drag selection to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/136.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/136.xhtml new file mode 100644 index 0000000000..d005718219 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/136.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>BiDi text selection drag and drop to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>PASS|LIAF ‮FAIL|SSAP‬ PASS|LIAF</p> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/137.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/137.xhtml new file mode 100644 index 0000000000..8cec81cb6e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/137.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Multielement BiDi text selection drag and drop to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>PASS|LIAF <span dir="rtl">‮FAIL|SSAP‬</span> PASS|LIAF</p> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/138.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/138.xhtml new file mode 100644 index 0000000000..eda68f1f12 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/138.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>BiDi text selection drag and drop from text input to textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the textarea. Selected text should be moved to the textarea once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><input value="PASS|LIAF ‮FAIL|SSAP‬ PASS|LIAF"/></p> +<p><textarea dir="rtl" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/139.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/139.xhtml new file mode 100644 index 0000000000..03c6a6bc2a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/139.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>BiDi text selection drag and drop between textareas</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,32)"> +<p>Drag selected text to the textarea. Selected text should be moved to the textarea once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><textarea>PASS|LIAF ‮FAIL|SSAP‬ PASS|LIAF</textarea></p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/140.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/140.xhtml new file mode 100644 index 0000000000..fb0c3ca198 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/140.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>BiDi text selection drag and drop between text inputs</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the input below. Selected text should be moved to the input once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><input value="PASS|LIAF ‮FAIL|SSAP‬ PASS|LIAF"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/141.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/141.xhtml new file mode 100644 index 0000000000..79f550f05c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/141.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>BiDi text selection drag and drop to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>PASS|LIAF ‮FAIL|SSAP‬ PASS|LIAF</p> +<p>Drag selected text to the blue box. Copy of selection should end up in the box once you drop it there. Text direction should be preserved during drag and drop.</p> +<p><div contenteditable="true"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/142.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/142.xhtml new file mode 100644 index 0000000000..1522a0cdbd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/142.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>BiDi text selection drag and drop to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>PASS|LIAF ‮FAIL|SSAP‬ PASS|LIAF</p> +<p>Drag selected text to the blue box. Copy of selection should end up in the box once you drop it there. Text direction should be preserved during drag and drop.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/143.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/143.xhtml new file mode 100644 index 0000000000..f38e1bfb4e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/143.xhtml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Large text selection drag and drop</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +<script type="application/ecmascript"> +function start(event) + {var p = document.querySelector('p:last-child'), s = p.firstChild.nodeValue; + for(var i = 0; i != 12; i++) + {s = s + ' ' + s;} + p.firstChild.nodeValue = 'Start of selection. ' + s + ' End of selection'; + window.getSelection().selectAllChildren(p);} +</script> +</head> +<body onload="start()"> +<p>Try to drag selection below to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea placeholder="Drop selection here"/></p> +<p>Large selection.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/144.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/144.xhtml new file mode 100644 index 0000000000..90dd440f6c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/144.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from text input and text/plain aliases</title> +<style type="text/css"> +div + {min-height:40px; + width:40px; + padding:40px; + text-align:center; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain','PASS');} +function checkText(event) + {var a = event.dataTransfer.getData('text/plain'), + b = event.dataTransfer.getData('text'), + c = event.dataTransfer.getData('TEXT'), + d = event.dataTransfer.getData('TexT'); + document.querySelector('div').appendChild(document.createTextNode((a == b && b == c && c == d && d == 'PASS')?' PASS ':' FAIL '))} +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me" ondragstart="start(event)"/></p> +<p>Drag selection above to the navy box below and drop it. You should see word PASS once you drop it.</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="checkText(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/145.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/145.xhtml new file mode 100644 index 0000000000..addc92b412 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/145.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from inline element and text/plain aliases</title> +<style type="text/css"> +div + {min-height:40px; + width:40px; + padding:40px; + text-align:center; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('Text','PASS');} +function checkText(event) + {var a = event.dataTransfer.getData('text/plain'), + b = event.dataTransfer.getData('text'), + c = event.dataTransfer.getData('TEXT'), + d = event.dataTransfer.getData('TexT'); + document.querySelector('div').appendChild(document.createTextNode((a == b && b == c && c == d && d == 'PASS')?'PASS':'FAIL'))} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))"> +<p><span ondragstart="start(event)">Drag me</span></p> +<p>Drag selection above to the navy box below and drop it. You should see word PASS once you drop it.</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="checkText(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/146.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/146.xhtml new file mode 100644 index 0000000000..bc8d1f015c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/146.xhtml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop and text/plain aliases</title> +<style type="text/css"> +div + {min-height:40px; + width:40px; + padding:40px; + text-align:center; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +function checkText(event) + {var a = event.dataTransfer.getData('text/plain'), + b = event.dataTransfer.getData('text'), + c = event.dataTransfer.getData('TEXT'), + d = event.dataTransfer.getData('TexT'); + document.querySelector('div').appendChild(document.createTextNode((a == b && b == c && c == d && d == 'Drag me')?'PASS':'FAIL'))} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<p>Drag selection above to the navy box below and drop it. You should see word PASS once you drop it.</p> +<div ondragenter="event.preventDefault()" ondragover="return false" ondrop="checkText(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/147.html b/testing/web-platform/tests/html/editing/dnd/selection/147.html new file mode 100644 index 0000000000..814fe1b74e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/147.html @@ -0,0 +1,15 @@ +<!doctype html> +<html> + <head> + <title>Selection should not be cleared on failed drop</title> + </head> + <body> + + <ol> + <li>Select some text in this sentence and begin dragging it.</li> + <li>Drop it on this text.</li> + <li>Pass if the text in step 1 is still selected.</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/148.html b/testing/web-platform/tests/html/editing/dnd/selection/148.html new file mode 100644 index 0000000000..3552ad6f2d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/148.html @@ -0,0 +1,15 @@ +<!doctype html> +<html> + <head> + <title>Selection in input should not be cleared on failed drop</title> + </head> + <body> + + <ol> + <li><textarea rows="3" cols="60">Select some text in this sentence and begin dragging it.</textarea></li> + <li>Drop it on this text.</li> + <li>Pass if the text in step 1 is still selected.</li> + </ol> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/149.html b/testing/web-platform/tests/html/editing/dnd/selection/149.html new file mode 100644 index 0000000000..5371121191 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/149.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> + <head> + <title>Dragging selections from multiline inputs should show editing caret</title> + </head> + <body> + + <p>Select one word in the first input. Drag the selection around over the same input, and over the other inputs. It should show the input editing caret at the relevant insertion point within the target input's text.</p> + <p><textarea rows="3" cols="60">Dummy text, dummy text, dummy text, dummy text, dummy text, +dummy text, dummy text, dummy text, dummy text, dummy text</textarea></p> + <p><textarea rows="3" cols="60">Dummy text, dummy text, dummy text, dummy text, dummy text, +dummy text, dummy text, dummy text, dummy text, dummy text</textarea></p> + <p><input value="Dummy text, dummy text"></p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/150.html b/testing/web-platform/tests/html/editing/dnd/selection/150.html new file mode 100644 index 0000000000..2861ad86f7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/150.html @@ -0,0 +1,15 @@ +<!doctype html> +<html> + <head> + <title>Dragging selections from single-line inputs should show editing caret</title> + </head> + <body> + + <p>Select one word in the first input. Drag the selection around over the same input, and over the other inputs. It should show the input editing caret at the relevant insertion point within the target input's text.</p> + <p><input value="Dummy text, dummy text"></p> + <p><textarea rows="3" cols="60">Dummy text, dummy text, dummy text, dummy text, dummy text, +dummy text, dummy text, dummy text, dummy text, dummy text</textarea></p> + <p><input value="Dummy text, dummy text"></p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/151.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/151.xhtml new file mode 100644 index 0000000000..ed06757109 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/151.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropping selection in readonly text input</title> +<style type="text/css"> +input + {padding:1em; + width:300px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<p>Try to drag selected text into the input below. You should not be able to drop it here.</p> +<p><input readonly="readonly" placeholder="Try to drop selected text here" onchange="document.querySelector('p+p').firstChild.nodeValue = 'FAIL'"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/152.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/152.xhtml new file mode 100644 index 0000000000..4bf402cf15 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/152.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropping selection in readonly textarea</title> +<style type="text/css"> +textarea + {padding:1em; + width:300px; + height:100px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<p>Try to drag selected text into the input below. You should not be able to drop it here.</p> +<p><textarea readonly="readonly" placeholder="Try to drop selected text here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/153.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/153.xhtml new file mode 100644 index 0000000000..bb3eb29f0d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/153.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropping selection from text input into readonly text input</title> +<style type="text/css"> +input + {padding:1em; + width:300px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me"/></p> +<p>Try to drag selected text into the input below. You should not be able to drop it here.</p> +<p><input readonly="readonly" placeholder="Try to drop selected text here" onchange="document.querySelector('p+p').firstChild.nodeValue = 'FAIL'"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/154.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/154.xhtml new file mode 100644 index 0000000000..d6a269acfa --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/154.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dropping selection from text input into readonly textarea</title> +<style type="text/css"> +textarea + {padding:1em; + width:300px; + height:100px;} +</style> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me"/></p> +<p>Try to drag selected text into the input below. You should not be able to drop it here.</p> +<p><textarea readonly="readonly" placeholder="Try to drop selected text here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/155.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/155.xhtml new file mode 100644 index 0000000000..c3b4fa5bf6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/155.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop from readonly textarea to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><textarea readonly="readonly">Drag me</textarea></p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/156.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/156.xhtml new file mode 100644 index 0000000000..cbdcdd826c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/156.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop between text inputs</title> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Selected text should be moved to the blue box once you drop it there.</p> +<p><input value="Drag me"/></p> +<p><input placeholder="Drop selection here"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/157.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/157.xhtml new file mode 100644 index 0000000000..e754b67d4e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/157.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop between search inputs</title> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the second input box. Copy of selection should end up in the second input once you drop it there.</p> +<p><input type="search" value="Selection"/></p> +<p><input type="search" placeholder="Drop selection here"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/158.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/158.xhtml new file mode 100644 index 0000000000..a17ac4cf19 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/158.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop between tel inputs</title> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the second input box. Copy of selection should end up in the second input once you drop it there.</p> +<p><input type="tel" value="123456789"/></p> +<p><input type="tel" placeholder="Drop selection here"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/159.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/159.xhtml new file mode 100644 index 0000000000..b8987acc56 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/159.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop between url inputs</title> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the second input box. Copy of selection should end up in the second input once you drop it there.</p> +<p><input type="url" value="http://example.org"/></p> +<p><input type="url" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/160.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/160.xhtml new file mode 100644 index 0000000000..8bb0297e47 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/160.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop between email inputs</title> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the second input box. Copy of selection should end up in the second input once you drop it there.</p> +<p><input type="email" value="mail@example.org"/></p> +<p><input type="email" placeholder="Drop selection here"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/161.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/161.xhtml new file mode 100644 index 0000000000..f292bff1dd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/161.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop between number inputs</title> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the second input box. Copy of selection should end up in the second input once you drop it there.</p> +<p><input type="number" value="123456789"/></p> +<p><input type="number" placeholder="Drop selection here"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/162.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/162.xhtml new file mode 100644 index 0000000000..4c385c922f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/162.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop between contenteditable elements</title> +<style type="text/css"> +div + div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('div'))"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<div contenteditable="true">Drag me</div> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/163.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/163.xhtml new file mode 100644 index 0000000000..51ed45bdf6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/163.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Moving text between text inputs</title> +<script type="application/ecmascript"> +function check() + {var input = document.querySelectorAll('input'); + document.querySelector('p').firstChild.nodeValue = (input[0].value == '' && input[1].value == 'Drag me')?'PASS':'FAIL';} +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. You should see word PASS once you drop it there.</p> +<p><input value="Drag me"/></p> +<p><input ondragenter="event.preventDefault()" ondragover="event.preventDefault();event.dataTransfer.effectAllowed = 'move'" ondrop="window.setTimeout('check()',100)" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/164.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/164.xhtml new file mode 100644 index 0000000000..4b7cb8c048 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/164.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Moving text between search inputs</title> +<script type="application/ecmascript"> +function check() + {var input = document.querySelectorAll('input'); + document.querySelector('p').firstChild.nodeValue = (input[0].value == '' && input[1].value == 'Selection')?'PASS':'FAIL';} +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input type="search" value="Selection"/></p> +<p><input ondragenter="event.preventDefault()" ondragover="event.preventDefault();event.dataTransfer.effectAllowed = 'move'" ondrop="window.setTimeout('check()',100)" type="search" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/165.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/165.xhtml new file mode 100644 index 0000000000..ed6e0c6f98 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/165.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Moving text between tel inputs</title> +<script type="application/ecmascript"> +function check() + {var input = document.querySelectorAll('input'); + document.querySelector('p').firstChild.nodeValue = (input[0].value == '' && input[1].value == '123456789')?'PASS':'FAIL';} +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected number to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input type="tel" value="123456789"/></p> +<p><input ondragenter="event.preventDefault()" ondragover="event.preventDefault();event.dataTransfer.effectAllowed = 'move'" ondrop="window.setTimeout('check()',100)" type="tel" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/166.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/166.xhtml new file mode 100644 index 0000000000..467cf6eeac --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/166.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Moving text between url inputs</title> +<script type="application/ecmascript"> +function check() + {var input = document.querySelectorAll('input'); + document.querySelector('p').firstChild.nodeValue = (input[0].value == '' && input[1].value == 'http://example.org')?'PASS':'FAIL';} +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected url to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input type="url" value="http://example.org"/></p> +<p><input ondragenter="event.preventDefault()" ondragover="event.preventDefault();event.dataTransfer.effectAllowed = 'move'" ondrop="window.setTimeout('check()',100)" type="url" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/167.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/167.xhtml new file mode 100644 index 0000000000..b9f7beb973 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/167.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Moving text between email inputs</title> +<script type="application/ecmascript"> +function check() + {var input = document.querySelectorAll('input'); + document.querySelector('p').firstChild.nodeValue = (input[0].value == '' && input[1].value == 'mail@example.org')?'PASS':'FAIL';} +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected email to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input type="email" value="mail@example.org"/></p> +<p><input ondragenter="event.preventDefault()" ondragover="event.preventDefault();event.dataTransfer.effectAllowed = 'move'" ondrop="window.setTimeout('check()',100)" type="email" placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/168.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/168.xhtml new file mode 100644 index 0000000000..a2c19c453d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/168.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Moving text between contenteditable elements</title> +<style type="text/css"> +div + div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +function check() + {var div = document.querySelectorAll('div'); + document.querySelector('p').firstChild.nodeValue = (!div[0].firstChild.nodeValue && div[1].firstChild.nodeValue == 'Drag me')?'PASS':('FAIL(' + div[0].firstChild.nodeValue + ')');} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('div'))"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<div contenteditable="true" ondragstart="event.dataTransfer.effectAllowed = 'move'">Drag me</div> +<div ondragenter="event.preventDefault()" ondragover="event.preventDefault();" ondrop="window.setTimeout('check()',100)" contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/169.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/169.xhtml new file mode 100644 index 0000000000..ce4dd21399 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/169.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Moving text from text input to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +<script type="application/ecmascript"> +function check() + {document.querySelector('p').firstChild.nodeValue = (document.querySelector('input').value == '' && document.querySelector('div').firstChild.nodeValue == 'Drag me')?'PASS':('FAIL(' + div[0].firstChild.nodeValue + ')');} +</script> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input value="Drag me"/></p> +<div ondragenter="event.preventDefault()" ondragover="event.preventDefault();event.dataTransfer.effectAllowed = 'move'" ondrop="window.setTimeout('check()',100)" contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/170.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/170.xhtml new file mode 100644 index 0000000000..cbcf3dc164 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/170.xhtml @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging multiline text selection from scrolled textarea to block element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +textarea + {width:300px; + height:100px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(163,185)"> +<p> +<textarea> +Here is textarea with selection at the end of it. +Drag selected text to the blue box. +Copy of selection should end up in the blue box once you drop it there. +Try to drag this text. +</textarea> +</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/171.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/171.xhtml new file mode 100644 index 0000000000..c8c16b0b16 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/171.xhtml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging text selection from scrollable container to block element</title> +<style type="text/css"> +div + {width:300px; + height:100px;} +div:first-child + {overflow-y:scroll;} +div[ondragenter] + {margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +textarea + {width:300px; + height:100px;} +p+p + {margin-top:200px; + padding-bottom:50px;} +</style> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p + p'))"> +<div> +<p> +Here is scrollable container with text selection at the end of it. +Drag selected text to the blue box. +Copy of selection should end up in the blue box once you drop it there. +</p> +<p>Try to drag this text.</p> +</div> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div + div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/172.html b/testing/web-platform/tests/html/editing/dnd/selection/172.html new file mode 100644 index 0000000000..3e805e764b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/172.html @@ -0,0 +1,45 @@ +<!doctype html> +<html> + <head> + <title>Selection dragging should drag minimal HTML context</title> + <style type="text/css"> +p + div { + background: orange; + width: 4em; +} +div + div { + border: 1px solid black; + min-height: 5em; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var output = document.getElementsByTagName('div')[1]; + output.ondragenter = output.ondragover = function (e) { e.preventDefault(); }; + output.ondrop = function (e) { + e.preventDefault(); + var drophtml = e.dataTransfer.getData('text/html').toUpperCase().replace(/\sSTYLE="[^"]*"/g,'').replace(/[\r\n]+/g,'\\n'); + var droptext = e.dataTransfer.getData('text/plain').replace(/[\r\n]+/g,'\\n'); + var expectedhtml = '<P><SPAN>C</SPAN>D</P><P>E<SPAN>F</SPAN></P>'; + var expectedtext = 'CD\\nEF'; + if( drophtml != expectedhtml ) { + output.innerHTML = 'FAIL - normalised dropped HTML was:<br>'+drophtml.replace(/</g,'<'); + } else if( droptext != expectedtext ) { + output.innerHTML = 'FAIL - normalised dropped text was:<br>'+droptext.replace(/</g,'<'); + } else { + output.innerHTML = 'PASS'; + } + }; +}; + </script> + </head> + <body> + + <p>Select the text from "C" to "F" (including both of those characters) in the text below.</p> + <div> + <p><span>A</span><span>BC</span>D</p><p>E<span>FG</span><span>H</span></p> + </div> + <div>Drag the selection and drop it here.</div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/173.html b/testing/web-platform/tests/html/editing/dnd/selection/173.html new file mode 100644 index 0000000000..8c074f7c5d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/173.html @@ -0,0 +1,45 @@ +<!doctype html> +<html> + <head> + <title>Selection dragging should drag no HTML when inside a single element</title> + <style type="text/css"> +p + div { + background: orange; + width: 4em; +} +div + div { + border: 1px solid black; + min-height: 5em; +} + </style> + <script type="text/javascript"> +window.onload = function () { + var output = document.getElementsByTagName('div')[1]; + output.ondragenter = output.ondragover = function (e) { e.preventDefault(); }; + output.ondrop = function (e) { + e.preventDefault(); + var drophtml = e.dataTransfer.getData('text/html').toUpperCase().replace(/\sSTYLE="[^"]*"/g,'').replace(/[\r\n]+/g,'\\n'); + var droptext = e.dataTransfer.getData('text/plain').replace(/[\r\n]+/g,'\\n'); + var expectedhtml = 'B'; + var expectedtext = 'B'; + if( drophtml != expectedhtml ) { + output.innerHTML = 'FAIL - normalised dropped HTML was:<br>'+drophtml.replace(/</g,'<'); + } else if( droptext != expectedtext ) { + output.innerHTML = 'FAIL - normalised dropped text was:<br>'+droptext.replace(/</g,'<'); + } else { + output.innerHTML = 'PASS'; + } + }; +}; + </script> + </head> + <body> + + <p>Select "B" in the text below.</p> + <div> + <p>ABC</p> + </div> + <div>Drag the selection and drop it here.</div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-input-to-other-input.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-input-to-other-input.xhtml new file mode 100644 index 0000000000..f005092f6e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-input-to-other-input.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the input field below. Copy of selection should end up in the input once you drop it there.</p> +<p><input value="Drag me"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-input-to-other-textarea.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-input-to-other-textarea.xhtml new file mode 100644 index 0000000000..767e5a43e2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-input-to-other-textarea.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><input value="Drag me"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-input.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-input.xhtml new file mode 100644 index 0000000000..9d12a89dd7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-input.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +</head> +<body onload="document.querySelector('input').select()"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><input value="Drag me"/></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-textarea-to-other-blue-box.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-textarea-to-other-blue-box.xhtml new file mode 100644 index 0000000000..e49967e174 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-textarea-to-other-blue-box.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +textarea + {height:1.5em; + width:7em;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-textarea-to-other-input.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-textarea-to-other-input.xhtml new file mode 100644 index 0000000000..bf37852588 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-textarea-to-other-input.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +textarea + {height:1.5em; + width:7em;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the input field below. Copy of selection should end up in the input once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-textarea-to-other-textarea.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-textarea-to-other-textarea.xhtml new file mode 100644 index 0000000000..e7b72990af --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-drag-me-textarea-to-other-textarea.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +textarea + {height:1.5em; + width:7em;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p>Drag selected text to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea>Drag me</textarea></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-blue-box-contenteditable.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-blue-box-contenteditable.xhtml new file mode 100644 index 0000000000..67601b961c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-blue-box-contenteditable.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-blue-box.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-blue-box.xhtml new file mode 100644 index 0000000000..575db934d8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-blue-box.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-input.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-input.xhtml new file mode 100644 index 0000000000..bca49a016c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-input.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px;} +</style> +</head> +<body> +<p><input placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-textarea.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-textarea.xhtml new file mode 100644 index 0000000000..c7617f5be8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-drop-here-textarea.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/selection/helper-scroll-then-drop-input.xhtml b/testing/web-platform/tests/html/editing/dnd/selection/helper-scroll-then-drop-input.xhtml new file mode 100644 index 0000000000..af2aeae393 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/selection/helper-scroll-then-drop-input.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selection drag and drop: helper file</title> +<style type="text/css"> +input[placeholder] + {width:300px; + height:50px;} +p:first-child + {margin-bottom:200px;} +</style> +</head> +<body> +<p>You should be able to drag selected text to the input at the bottom of scrollable container (dragging towards the bottom edge triggers scrolling).</p> +<input placeholder="Drop selection here"/> +<p>Copy of selection should end up in the input once you drop it there.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/001.svg b/testing/web-platform/tests/html/editing/dnd/svg/001.svg new file mode 100644 index 0000000000..055a7b278b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/001.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from text element to textArea</title> +<text x="10" y="30" font-size="20">Select part of this text and drag selection to</text> +<text x="10" y="60" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="90" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="110" width="480" height="380" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="110" width="480" height="380" stroke="black" stroke-width="1" fill="none"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/002.svg b/testing/web-platform/tests/html/editing/dnd/svg/002.svg new file mode 100644 index 0000000000..45ab566e66 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/002.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from editable text element to textArea</title> +<text x="10" y="30" editable="simple" font-size="20">Select part of this text and drag selection to</text> +<text x="10" y="60" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="90" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="110" width="480" height="380" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="110" width="480" height="380" stroke="black" stroke-width="1" fill="none"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/003.svg b/testing/web-platform/tests/html/editing/dnd/svg/003.svg new file mode 100644 index 0000000000..e59527938b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/003.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from tspan elements to textArea</title> +<text x="10" y="30" font-size="20"> + <tspan>Select part</tspan> + <tspan>of this text</tspan> + <tspan>and drag selection to</tspan> +</text> +<text x="10" y="60" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="90" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="110" width="480" height="380" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="110" width="480" height="380" stroke="black" stroke-width="1" fill="none"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/004.svg b/testing/web-platform/tests/html/editing/dnd/svg/004.svg new file mode 100644 index 0000000000..000f52730c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/004.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from tref element to textArea</title> +<defs> + <text id="text">Select me</text> +</defs> +<text x="10" y="30" font-size="20" fill="navy"><tref xlink:href="#text"/></text> +<text x="10" y="60" font-size="20">Select text above and drag selection to</text> +<text x="10" y="90" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="120" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="130" width="480" height="360" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="130" width="480" height="360" stroke="black" stroke-width="1" fill="none"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/005.svg b/testing/web-platform/tests/html/editing/dnd/svg/005.svg new file mode 100644 index 0000000000..9bb3bd68bb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/005.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from textArea to textArea</title> +<textArea x="10" y="10" width="480" height="90" font-size="20">Select part of this text and drag selection to the box below. +Content of selection should be copied once it's dropped in the box.</textArea> +<textArea x="10" y="110" width="480" height="380" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="110" width="480" height="380" stroke="black" stroke-width="1" fill="none"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/006.svg b/testing/web-platform/tests/html/editing/dnd/svg/006.svg new file mode 100644 index 0000000000..5edeba6971 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/006.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from text element to editable text element</title> +<text x="10" y="30" font-size="20">Select part of this text and drag selection to</text> +<text x="10" y="60" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="90" font-size="20">copies once it's dropped in the box.</text> +<text x="10" y="200" font-size="50" editable="simple"> </text> +<rect x="10" y="160" width="480" height="50" stroke="black" stroke-width="1" fill="none"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/007.svg b/testing/web-platform/tests/html/editing/dnd/svg/007.svg new file mode 100644 index 0000000000..7d8bcf8d4d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/007.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection between editable text elements</title> +<text x="10" y="30" font-size="20" editable="simple">Select part of this text and drag selection to</text> +<text x="10" y="60" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="90" font-size="20">copies once it's dropped in the box.</text> +<text x="10" y="200" font-size="50" editable="simple"> </text> +<rect x="10" y="160" width="480" height="50" stroke="black" stroke-width="1" fill="none"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/008.svg b/testing/web-platform/tests/html/editing/dnd/svg/008.svg new file mode 100644 index 0000000000..51065c9441 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/008.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from tspan element to editable text element</title> +<text x="10" y="30" font-size="20"> + <tspan>Select part</tspan> + <tspan>of this text</tspan> + <tspan>and drag selection to</tspan> +</text> +<text x="10" y="60" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="90" font-size="20">copies once it's dropped in the box.</text> +<text x="10" y="200" font-size="50" editable="simple"> </text> +<rect x="10" y="160" width="480" height="50" stroke="black" stroke-width="1" fill="none"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/009.svg b/testing/web-platform/tests/html/editing/dnd/svg/009.svg new file mode 100644 index 0000000000..1996d25680 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/009.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from tref element to editable text element</title> +<defs> + <text id="text">Select me</text> +</defs> +<text x="10" y="30" font-size="20" fill="navy"><tref xlink:href="#text"/></text> +<text x="10" y="60" font-size="20">Select text above and drag selection to</text> +<text x="10" y="90" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="120" font-size="20">copies once it's dropped in the box.</text> +<text x="10" y="200" font-size="50" editable="simple"> </text> +<rect x="10" y="160" width="480" height="50" stroke="black" stroke-width="1" fill="none"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/010.svg b/testing/web-platform/tests/html/editing/dnd/svg/010.svg new file mode 100644 index 0000000000..c5cce18678 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/010.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from textArea to editable text element</title> +<textArea x="10" y="10" width="480" height="90" font-size="20">Select part of this text and drag selection to the box below. +Content of selection should be copied once it's dropped in the box.</textArea> +<text x="10" y="200" font-size="50" editable="simple"> </text> +<rect x="10" y="160" width="480" height="50" stroke="black" stroke-width="1" fill="none"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/011.svg b/testing/web-platform/tests/html/editing/dnd/svg/011.svg new file mode 100644 index 0000000000..5618a89e29 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/011.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from textpath to textArea</title> +<defs> + <path id="path" d="M 10 40 C 10 20 480 20 480 40"/> +</defs> +<text fill="navy"> + <textPath xlink:href="#path">Some selectable text rendered along curved text path</textPath> +</text> +<text x="10" y="60" font-size="20">Select part of text above and drag selection to</text> +<text x="10" y="90" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="120" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="130" width="480" height="360" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="130" width="480" height="360" stroke="black" stroke-width="1" fill="none"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/012.svg b/testing/web-platform/tests/html/editing/dnd/svg/012.svg new file mode 100644 index 0000000000..8a50f06c97 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/012.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from editable textpath to textArea</title> +<defs> + <path id="path" d="M 10 40 C 10 20 480 20 480 40"/> +</defs> +<text fill="navy" editable="simple"> + <textPath xlink:href="#path">Some selectable text rendered along curved text path</textPath> +</text> +<text x="10" y="60" font-size="20">Select part of text above and drag selection to</text> +<text x="10" y="90" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="120" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="130" width="480" height="360" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="130" width="480" height="360" stroke="black" stroke-width="1" fill="none"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/013-1.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/013-1.xhtml new file mode 100644 index 0000000000..7fc593e07e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/013-1.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop from SVG: helper file</title> +<style type="text/css"> +textarea + {width:400px; + height:300px; + padding:10px;} +</style> +</head> +<body> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/013.svg b/testing/web-platform/tests/html/editing/dnd/svg/013.svg new file mode 100644 index 0000000000..9dc0a47e5f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/013.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from text element to XHTML textarea in foreignObject</title> +<text x="10" y="30" font-size="20">Select part of this text and drag selection to</text> +<text x="10" y="60" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="90" font-size="20">copies once it's dropped in the box.</text> +<switch> + <foreignObject x="10" y="120" width="480" height="380" requiredExtensions="http://www.w3.org/1999/xhtml" xlink:href="013-1.xhtml"/> + <text x="10" y="150" font-size="20">Skip the test (foreignObject is not supported).</text> +</switch> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/014-1.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/014-1.xhtml new file mode 100644 index 0000000000..93d6ab7d2f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/014-1.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop from SVG: helper file</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/014.svg b/testing/web-platform/tests/html/editing/dnd/svg/014.svg new file mode 100644 index 0000000000..acee8efbf4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/014.svg @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from textArea to contenteditable element in foreignObject</title> +<textArea x="10" y="10" width="480" height="90" font-size="20">Select part of this text and drag selection to the box below. +Content of selection should be copied once it's dropped in the box.</textArea> +<switch> + <foreignObject x="10" y="120" width="480" height="380" requiredExtensions="http://www.w3.org/1999/xhtml" xlink:href="014-1.xhtml"/> + <text x="10" y="150" font-size="20">Skip the test (foreignObject is not supported).</text> +</switch> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/015-1.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/015-1.xhtml new file mode 100644 index 0000000000..f5217a91e9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/015-1.xhtml @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop from SVG: helper file</title> +</head> +<body> +<input placeholder="Drop selection here"/> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/015.svg b/testing/web-platform/tests/html/editing/dnd/svg/015.svg new file mode 100644 index 0000000000..de484d2b81 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/015.svg @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from textArea to XHTML input in foreignObject</title> +<textArea x="10" y="10" width="480" height="90" font-size="20">Select part of this text and drag selection to the box below. +Content of selection should be copied once it's dropped in the box.</textArea> +<switch> + <foreignObject x="10" y="120" width="480" height="380" requiredExtensions="http://www.w3.org/1999/xhtml" xlink:href="015-1.xhtml"/> + <text x="10" y="150" font-size="20">Skip the test (foreignObject is not supported).</text> +</switch> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/016-1.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/016-1.xhtml new file mode 100644 index 0000000000..d735cce60f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/016-1.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop from SVG: helper file</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<div + ondragenter="event.preventDefault();event.dataTransfer.effectAllowed = 'copy'" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/016.svg b/testing/web-platform/tests/html/editing/dnd/svg/016.svg new file mode 100644 index 0000000000..fe873924ad --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/016.svg @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG text selection from textArea to foreignObject</title> +<textArea x="10" y="10" width="480" height="90" font-size="20">Select part of this text and drag selection to the box below. +Content of selection should be copied once it's dropped in the box.</textArea> +<switch> + <foreignObject x="10" y="120" width="480" height="380" requiredExtensions="http://www.w3.org/1999/xhtml" xlink:href="016-1.xhtml"/> + <text x="10" y="150" font-size="20">Skip the test (foreignObject is not supported).</text> +</switch> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/017.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/017.xhtml new file mode 100644 index 0000000000..598a2c6f3d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/017.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection to SVG textArea</title> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p>Drag me</p> +<p>Drag selection above to the box below. Copy of selection should end up in the box once you drop it there.</p> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="300px" viewBox="0 0 500 300"> +<textArea x="10" y="10" width="480" height="280" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="10" width="480" height="280" stroke="black" stroke-width="1" fill="none"/> +</svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/018.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/018.xhtml new file mode 100644 index 0000000000..03ac442a36 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/018.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from XHTML text input to SVG textArea</title> +</head> +<body onload="document.querySelector('input').select()"> +<p><input value="Drag me"/></p> +<p>Drag selection above to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="300px" viewBox="0 0 500 300"> +<textArea x="10" y="10" width="480" height="280" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="10" width="480" height="280" stroke="black" stroke-width="1" fill="none"/> +</svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/019.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/019.xhtml new file mode 100644 index 0000000000..9064a6049a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/019.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from XHTML textarea to SVG textArea</title> +<style type="text/css"> +textarea + {height:1.5em; + width:7em;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(0,7)"> +<p><textarea>Drag me</textarea></p> +<p>Drag selection above to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="300px" viewBox="0 0 500 300"> +<textArea x="10" y="10" width="480" height="280" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="10" width="480" height="280" stroke="black" stroke-width="1" fill="none"/> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/020.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/020.xhtml new file mode 100644 index 0000000000..7d96b4f12e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/020.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging multiline selection from XHTML textarea to SVG textArea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px;} +</style> +</head> +<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(25,56)"> +<p> +<textarea> +Here is textarea +with selection that +spans two lines. +Drag selected text to the blue box. +Copy of selection should end up in the blue box once you drop it there. +</textarea> +</p> +<p>Drag selection above to the textarea below. Copy of selection should end up in the textarea once you drop it there.</p> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="300px" viewBox="0 0 500 300"> +<textArea x="10" y="10" width="480" height="280" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="10" width="480" height="280" stroke="black" stroke-width="1" fill="none"/> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/021.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/021.xhtml new file mode 100644 index 0000000000..4d82e74428 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/021.xhtml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from SVG text element to XHTML element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="50px" viewBox="0 0 200 50"> +<text x="10" y="45" font-size="30" fill="navy">Select me</text> +</svg> +<p>Select the text above and drag selection to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/022.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/022.xhtml new file mode 100644 index 0000000000..7354aeef8b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/022.xhtml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from SVG editable text element to XHTML element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="50px" viewBox="0 0 200 50"> +<text x="10" y="45" font-size="30" fill="navy" editable="simple">Select me</text> +</svg> +<p>Select the text above and drag selection to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/023.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/023.xhtml new file mode 100644 index 0000000000..65ede4bd8b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/023.xhtml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from SVG textArea to XHTML element</title> +<style type="text/css"> +div[ondragenter] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="100px" viewBox="0 0 500 100"> +<textArea x="10" y="10" width="480" height="90" font-size="20">Select part of this text and drag selection to the box below. +Content of selection should be copied once it's dropped in the box.</textArea> +</svg> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/024.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/024.xhtml new file mode 100644 index 0000000000..5b4116c6c2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/024.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from SVG text element to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="50px" viewBox="0 0 200 50"> +<text x="10" y="45" font-size="30" fill="navy">Select me</text> +</svg> +<p>Select the text above and drag selection to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/025.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/025.xhtml new file mode 100644 index 0000000000..86d68018fd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/025.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from SVG editable text element to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="200px" height="50px" viewBox="0 0 200 50"> +<text x="10" y="45" font-size="30" fill="navy" editable="simple">Select me</text> +</svg> +<p>Select the text above and drag selection to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/026.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/026.xhtml new file mode 100644 index 0000000000..78699f1c6e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/026.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from SVG textArea to contenteditable element</title> +<style type="text/css"> +div[contenteditable] + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="100px" viewBox="0 0 500 100"> +<textArea x="10" y="10" width="480" height="90" font-size="20">Select part of this text and drag selection to the box below. +Content of selection should be copied once it's dropped in the box.</textArea> +</svg> +<div contenteditable="true"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/027.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/027.xhtml new file mode 100644 index 0000000000..5dbce70ce9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/027.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from SVG text element to XHTML textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="50px" viewBox="0 0 200 50"> +<text x="10" y="45" font-size="30" fill="navy">Select me</text> +</svg> +<p>Select the text above and drag selection to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/028.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/028.xhtml new file mode 100644 index 0000000000..d60b518cd0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/028.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from SVG editable text element to XHTML textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="200px" height="50px" viewBox="0 0 200 50"> +<text x="10" y="45" font-size="30" fill="navy" editable="simple">Select me</text> +</svg> +<p>Select the text above and drag selection to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/029.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/029.xhtml new file mode 100644 index 0000000000..d469841fad --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/029.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging selection from SVG textArea to XHTML textarea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="100px" viewBox="0 0 500 100"> +<textArea x="10" y="10" width="480" height="90" font-size="20">Select part of this text and drag selection to the box below. +Content of selection should be copied once it's dropped in the box.</textArea> +</svg> +<p>Select the text above and drag selection to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/030-1.svg b/testing/web-platform/tests/html/editing/dnd/svg/030-1.svg new file mode 100644 index 0000000000..62798a7e11 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/030-1.svg @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px" viewBox="0 0 100 100"> +<circle cx="50" cy="50" r="50" fill="green"/> +</svg> + diff --git a/testing/web-platform/tests/html/editing/dnd/svg/030.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/030.xhtml new file mode 100644 index 0000000000..b20d646815 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/030.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG image drag and drop</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><img src="030-1.svg" alt="SVG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/031.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/031.xhtml new file mode 100644 index 0000000000..81c355d6c1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/031.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG dataURL image drag and drop</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list')); + document.querySelector('div').appendChild(c);} +</script> +</head> +<body> +<p><img 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" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" +/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/032.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/032.xhtml new file mode 100644 index 0000000000..dc5592d475 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/032.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross fragment drag and drop of SVG text selection from text element to textArea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="50px" viewBox="0 0 200 50"> +<text x="10" y="45" font-size="30" fill="navy">Select me</text> +</svg> +<p>Drag selection above to the textarea below. Copy of selection should end up in the textarea once you drop it there.</p> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="300px" viewBox="0 0 500 300"> +<textArea x="10" y="10" width="480" height="280" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="10" width="480" height="280" stroke="black" stroke-width="1" fill="none"/> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/033.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/033.xhtml new file mode 100644 index 0000000000..7d55fec093 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/033.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross fragment drag and drop of SVG text selection from editable text element to textArea</title> +<style type="text/css"> +textarea + {width:300px; + height:100px;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="50px" viewBox="0 0 200 50"> +<text x="10" y="45" font-size="30" fill="navy" editable="simple">Select me</text> +</svg> +<p>Drag selection above to the textarea below. Copy of selection should end up in the textarea once you drop it there.</p> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="300px" viewBox="0 0 500 300"> +<textArea x="10" y="10" width="480" height="280" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="10" width="480" height="280" stroke="black" stroke-width="1" fill="none"/> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/034.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/034.xhtml new file mode 100644 index 0000000000..5ac9dacc5c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/034.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross fragment drag and drop of SVG text selection from textArea to editable text element</title> +<style type="text/css"> +textarea + {width:300px; + height:100px;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="100px" viewBox="0 0 500 100"> +<textArea x="10" y="10" width="480" height="90" font-size="20">Select me.</textArea> +</svg> +<p>Drag selection above to the textarea below. Copy of selection should end up in the textarea once you drop it there.</p> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="300px" viewBox="0 0 500 300"> +<textArea x="10" y="10" width="480" height="280" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="10" width="480" height="280" stroke="black" stroke-width="1" fill="none"/> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/035.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/035.xhtml new file mode 100644 index 0000000000..261ae2e995 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/035.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross fragment drag and drop between SVG textAreas</title> +<style type="text/css"> +textarea + {width:300px; + height:100px;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="100px" viewBox="0 0 500 100"> +<textArea x="10" y="10" width="480" height="90" font-size="20">Select me.</textArea> +</svg> +<p>Drag selection above to the textarea below. Copy of selection should end up in the textarea once you drop it there.</p> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="50px" viewBox="0 0 400 50"> +<text x="10" y="40" font-size="50" editable="simple"> </text> +<rect x="10" y="0" width="380" height="50" stroke="black" stroke-width="1" fill="none"/> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/036-1.svg b/testing/web-platform/tests/html/editing/dnd/svg/036-1.svg new file mode 100644 index 0000000000..d16862da64 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/036-1.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="50px" viewBox="0 0 200 50"> +<text x="10" y="45" font-size="30" fill="navy">Select me</text> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/036.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/036.xhtml new file mode 100644 index 0000000000..cb774b3ebc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/036.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging text selection between different SVG images</title> +</head> +<body> +<p><object type="image/svg+xml" data="036-1.svg">SVG Image</object></p> +<p>Drag selection above to the box below. Copy of selection should end up in the box once you drop it there.</p> +<p><object type="image/svg+xml" data="helper-drop-selection-here-textArea.svg">SVG Image</object></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/037.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/037.xhtml new file mode 100644 index 0000000000..b97f99cc46 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/037.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging text selection from dataURL image to another SVG image</title> +</head> +<body> +<object type="image/svg+xml" data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22200px%22%20height%3D%2250px%22%20viewBox%3D%220%200%20200%2050%22%3E%3Ctext%20x%3D%2210%22%20y%3D%2245%22%20font-size%3D%2230%22%20fill%3D%22navy%22%3ESelect%20me%3C/text%3E%3C/svg%3E">SVG Image</object> +<p>Drag selection above to the box below. Copy of selection should end up in the box once you drop it there.</p> +<p><object type="image/svg+xml" data="helper-drop-selection-here-textArea.svg">SVG Image</object></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/038.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/038.xhtml new file mode 100644 index 0000000000..c74b1db9cc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/038.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging text selection between different SVG dataURL images</title> +</head> +<body> +<p><object type="image/svg+xml" data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22200px%22%20height%3D%2250px%22%20viewBox%3D%220%200%20200%2050%22%3E%3Ctext%20x%3D%2210%22%20y%3D%2245%22%20font-size%3D%2230%22%20fill%3D%22navy%22%3ESelect%20me%3C/text%3E%3C/svg%3E">SVG Image</object></p> +<p>Drag selection above to the box below. Copy of selection should end up in the box once you drop it there.</p> +<p><object type="image/svg+xml" data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.2%22%20width%3D%22500px%22%20height%3D%22300px%22%20viewBox%3D%220%200%20500%20300%22%3E%3CtextArea%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22480%22%20height%3D%22280%22%20font-size%3D%2220%22%20editable%3D%22simple%22%20pointer-events%3D%22boundingBox%22%3EDrop%20selection%20here%3C/textArea%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22480%22%20height%3D%22280%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22none%22/%3E%3C/svg%3E">SVG Image</object></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/039-1.svg b/testing/web-platform/tests/html/editing/dnd/svg/039-1.svg new file mode 100644 index 0000000000..7023ddd938 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/039-1.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250px" height="50px" viewBox="0 0 250 50"> +<textArea x="10" y="10" width="200" height="50" font-size="20">Select me.</textArea> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/039.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/039.xhtml new file mode 100644 index 0000000000..77bc7e9c9d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/039.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging textArea selection between different SVG images</title> +</head> +<body> +<p><object type="image/svg+xml" data="039-1.svg">SVG Image</object></p> +<p>Drag selection above to the box below. Copy of selection should end up in the box once you drop it there.</p> +<p><object type="image/svg+xml" data="helper-drop-selection-here-textArea.svg">SVG Image</object></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/040.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/040.xhtml new file mode 100644 index 0000000000..6069563a91 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/040.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging textArea selection from dataURL image to another SVG image</title> +</head> +<body> +<p><object type="image/svg+xml" data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22250px%22%20height%3D%2250px%22%20viewBox%3D%220%200%20250%2050%22%3E%3CtextArea%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22200%22%20height%3D%2250%22%20font-size%3D%2220%22%3ESelect%20me.%3C/textArea%3E%3C/svg%3E">SVG Image</object></p> +<p>Drag selection above to the box below. Copy of selection should end up in the box once you drop it there.</p> +<p><object type="image/svg+xml" data="helper-drop-selection-here-textArea.svg">SVG Image</object></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/041.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/041.xhtml new file mode 100644 index 0000000000..326bafe639 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/041.xhtml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Dragging textArea selection between different SVG dataURL images</title> +</head> +<body> +<p><object type="image/svg+xml" data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22250px%22%20height%3D%2250px%22%20viewBox%3D%220%200%20250%2050%22%3E%3CtextArea%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22200%22%20height%3D%2250%22%20font-size%3D%2220%22%3ESelect%20me.%3C/textArea%3E%3C/svg%3E">SVG Image</object></p> +<p>Drag selection above to the box below. Copy of selection should end up in the box once you drop it there.</p> +<p><object type="image/svg+xml" data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.2%22%20width%3D%22500px%22%20height%3D%22300px%22%20viewBox%3D%220%200%20500%20300%22%3E%3CtextArea%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22480%22%20height%3D%22280%22%20font-size%3D%2220%22%20editable%3D%22simple%22%20pointer-events%3D%22boundingBox%22%3EDrop%20selection%20here%3C/textArea%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22480%22%20height%3D%22280%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22none%22/%3E%3C/svg%3E">SVG Image</object></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/042.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/042.xhtml new file mode 100644 index 0000000000..8226e49593 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/042.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop from downsized SVG image</title> +<style type="text/css"> +object + {width:100px; + height:30px;} +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<p><object type="image/svg+xml" data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22200px%22%20height%3D%2250px%22%20viewBox%3D%220%200%20200%2050%22%3E%3Ctext%20x%3D%2210%22%20y%3D%2245%22%20font-size%3D%2230%22%20fill%3D%22navy%22%3ESelect%20me%3C/text%3E%3C/svg%3E">SVG Image</object></p> +<p>Select the text above and drag selection to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/043.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/043.xhtml new file mode 100644 index 0000000000..e11a4d82b2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/043.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop from enlarged SVG image</title> +<style type="text/css"> +object + {width:300px; + height:75px;} +textarea + {width:300px; + height:100px; + margin-top:20px; + padding:10px;} +</style> +</head> +<body> +<p><object type="image/svg+xml" data="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22200px%22%20height%3D%2250px%22%20viewBox%3D%220%200%20200%2050%22%3E%3Ctext%20x%3D%2210%22%20y%3D%2245%22%20font-size%3D%2230%22%20fill%3D%22navy%22%3ESelect%20me%3C/text%3E%3C/svg%3E">SVG Image</object></p> +<p>Select the text above and drag selection to the textarea. Copy of selection should end up in the textarea once you drop it there.</p> +<p><textarea placeholder="Drop selection here"/></p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/044.svg b/testing/web-platform/tests/html/editing/dnd/svg/044.svg new file mode 100644 index 0000000000..6dfcb4d663 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/044.svg @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of RTL SVG text selection from text element to textArea</title> +<text x="10" y="30" font-size="20" fill="navy">‮FAIL|SSAP‬</text> +<text x="10" y="60" font-size="20">Select text above and drag selection to</text> +<text x="10" y="90" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="120" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="130" width="480" height="360" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="130" width="480" height="360" stroke="black" stroke-width="1" fill="none"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/045.svg b/testing/web-platform/tests/html/editing/dnd/svg/045.svg new file mode 100644 index 0000000000..00dee4564c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/045.svg @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of BiDi SVG text selection from text element to textArea</title> +<text x="10" y="30" font-size="20" fill="navy">PASS|LIAF ‮FAIL|SSAP‬ PASS|LIAF</text> +<text x="10" y="60" font-size="20">Select text above and drag selection to</text> +<text x="10" y="90" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="120" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="130" width="480" height="360" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="130" width="480" height="360" stroke="black" stroke-width="1" fill="none"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/svg/046.svg b/testing/web-platform/tests/html/editing/dnd/svg/046.svg new file mode 100644 index 0000000000..20c27a75d9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/046.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of BiDi SVG text selection from tspan elements to textArea</title> +<text x="10" y="30" font-size="20" fill="navy"> + <tspan>PASS|LIAF</tspan> + <tspan>‮FAIL|SSAP‬</tspan> + <tspan>PASS|LIAF</tspan> +</text> +<text x="10" y="60" font-size="20">Select text above and drag selection to</text> +<text x="10" y="90" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="120" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="130" width="480" height="360" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="130" width="480" height="360" stroke="black" stroke-width="1" fill="none"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/047.svg b/testing/web-platform/tests/html/editing/dnd/svg/047.svg new file mode 100644 index 0000000000..e10a5c5665 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/047.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of RTL SVG text selection from tref element to textArea</title> +<defs> + <text id="text">‮FAIL|SSAP‬</text> +</defs> +<text x="10" y="30" font-size="20" fill="navy"><tref xlink:href="#text"/></text> +<text x="10" y="60" font-size="20">Select text above and drag selection to</text> +<text x="10" y="90" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="120" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="130" width="480" height="360" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="130" width="480" height="360" stroke="black" stroke-width="1" fill="none"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/048.svg b/testing/web-platform/tests/html/editing/dnd/svg/048.svg new file mode 100644 index 0000000000..5a90f2144c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/048.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of BiDi SVG text selection from tref element to textArea</title> +<defs> + <text id="text">PASS|LIAF ‮FAIL|SSAP‬ PASS|LIAF</text> +</defs> +<text x="10" y="30" font-size="20" fill="navy"><tref xlink:href="#text"/></text> +<text x="10" y="60" font-size="20">Select text above and drag selection to</text> +<text x="10" y="90" font-size="20">the box below. Content of selection should be</text> +<text x="10" y="120" font-size="20">copies once it's dropped in the box.</text> +<textArea x="10" y="130" width="480" height="360" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="130" width="480" height="360" stroke="black" stroke-width="1" fill="none"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/049.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/049.xhtml new file mode 100644 index 0000000000..de81c7b313 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/049.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selecting text in SVG text element inside draggable container</title> +</head> +<body> +<div draggable="true"> + <svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="200px" height="50px" viewBox="0 0 200 50"> + <text x="10" y="45" font-size="30" fill="navy" editable="simple">Select me</text> + </svg> +</div> +<p>You should be able to select text above</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/050.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/050.xhtml new file mode 100644 index 0000000000..a8d73771b9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/050.xhtml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selecting text in SVG textArea element inside draggable container</title> +</head> +<body> +<div draggable="true"> + <svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="100px" viewBox="0 0 500 100"> + <textArea x="10" y="10" width="480" height="90" font-size="20" editable="simple">You should be able to select this text</textArea> + </svg> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/051.xhtml b/testing/web-platform/tests/html/editing/dnd/svg/051.xhtml new file mode 100644 index 0000000000..36a15c5491 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/051.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of link from SVG fragment to XHTML</title> +<style type="text/css"> +div + {width:300px; + height:100px; + margin-top:20px; + padding:10px; + color:white; + background-color:navy;} +</style> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200px" height="50px" viewBox="0 0 200 50"> + <a xlink:href="data:text/plain,PASS"> + <text x="10" y="45" font-size="30" fill="navy">Drag me</text> + </a> +</svg> +<p>Drag link to the blue box. You should see word PASS once you drop it there.</p> +<div dropzone="copy string:text/uri-list" ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/uri-list').substring(16)))"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/052.svg b/testing/web-platform/tests/html/editing/dnd/svg/052.svg new file mode 100644 index 0000000000..5a780cb4e9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/052.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of text link inside SVG</title> +<a xlink:href="data:text/plain,PASS"> + <text x="10" y="50" font-size="30" fill="navy">Drag me</text> +</a> +<textArea x="10" y="70" width="480" height="170" font-size="30">Drag link above and drop it in the gray box below. You should see word PASS once you drop it.</textArea> +<rect x="10" y="300" width="480" height="190" fill="gray"/> +<script type="application/ecmascript"> +var a = document.querySelector('a'), rect = document.querySelector('rect'), text = document.querySelector('textArea'); +a.addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'} +,false); +rect.addEventListener('dragenter', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('dragover', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('drop', +function (event) + {text.firstChild.nodeValue = event.dataTransfer.getData('text/uri-list').substring(16,20)} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/053.svg b/testing/web-platform/tests/html/editing/dnd/svg/053.svg new file mode 100644 index 0000000000..6c1c4e64eb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/053.svg @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of circle link inside SVG</title> +<a xlink:href="data:text/plain,PASS"> + <circle cx="50" cy="50" r="50" fill="green"/> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="30">Drag green circle above and drop it in the gray box below. Gray box should turn green once you drop it.</textArea> +<rect x="10" y="300" width="480" height="190" fill="gray"/> +<script type="application/ecmascript"> +var a = document.querySelector('a'), rect = document.querySelector('rect'); +a.addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'} +,false); +rect.addEventListener('dragenter', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('dragover', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('drop', +function (event) + {if(event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,PASS') + {rect.setAttribute('fill','green');} + } +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/054.svg b/testing/web-platform/tests/html/editing/dnd/svg/054.svg new file mode 100644 index 0000000000..b0daf03705 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/054.svg @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of animated circle link inside SVG</title> +<a xlink:href="data:text/plain,PASS"> + <circle cx="50" cy="50" r="10" fill="green"> + <animate attributeName="r" to="50" dur="10s" begin="0s" fill="freeze"/> + </circle> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="30"> +Drag green circle above and drop it in the gray box below. +Size of feedback image should match size of circle +and gray box should turn green.</textArea> +<rect x="10" y="300" width="480" height="190" fill="gray"/> +<script type="application/ecmascript"> +var a = document.querySelector('a'), rect = document.querySelector('rect'); +a.addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'} +,false); +rect.addEventListener('dragenter', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('dragover', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('drop', +function (event) + {if(event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,PASS') + {rect.setAttribute('fill','green');} + } +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/055.svg b/testing/web-platform/tests/html/editing/dnd/svg/055.svg new file mode 100644 index 0000000000..ee519baac8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/055.svg @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Selection and drag and drop of link inside SVG</title> +<a xlink:href="data:text/plain,PASS"> + <rect x="10" y="10" width="80" height="80" fill="green"/> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="30">Select part of this text. Once text is selected drag green square above and drop it in the gray box below. Gray box should turn green.</textArea> +<rect x="10" y="300" width="480" height="190" fill="gray"/> +<script type="application/ecmascript"> +var a = document.querySelector('a'), rect = document.querySelector('svg > rect'); +a.addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'} +,false); +rect.addEventListener('dragenter', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('dragover', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('drop', +function (event) + {if(event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,PASS') + {rect.setAttribute('fill','green');} + } +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/056.svg b/testing/web-platform/tests/html/editing/dnd/svg/056.svg new file mode 100644 index 0000000000..088b375a6e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/056.svg @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>dataTransfer.setData/getData during SVG link drag and drop</title> +<a xlink:href="data:text/plain,PASS"> + <polygon points="0,0 100,0 0,100" fill="green"/> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="15">Drag green triangle above and drop it in the gray box below. Gray box should turn green.</textArea> +<rect x="10" y="300" width="480" height="190" fill="gray"/> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,PASS', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +a = document.querySelector('a'), rect = document.querySelector('rect'), text = document.querySelector('textArea'), result = true; +a.addEventListener('dragstart', + function (event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragstart) : FAIL');} + },false); +a.addEventListener('drag', + function (event) + {for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL')} + },false); +rect.addEventListener('dragenter', + function (event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragenter) : FAIL')} + },false); +rect.addEventListener('dragover', + function (event) + {event.preventDefault(); + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], 'FAIL'); + if(event.dataTransfer.getData(dataTypes[i])) + {say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragover)')} + } + if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (dragover) : FAIL');} + },false); +rect.addEventListener('drop', + function (event) + {if(event.dataTransfer.items.length < dataTypes.length) + {say('items.length (drop) : FAIL');} + for(var i = 0; i != dataTypes.length; i++) + {if(event.dataTransfer.getData(dataTypes[i]) != data[i]) + {say('getData(' + dataTypes[i] + ') : FAIL');} + } + rect.setAttribute('fill',result?'green':'red'); + },false); +function say(it) + {text.appendChild(document.createTextNode(it + '.')); + result = false;} +]]> +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/057.svg b/testing/web-platform/tests/html/editing/dnd/svg/057.svg new file mode 100644 index 0000000000..165a45f393 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/057.svg @@ -0,0 +1,121 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>dataTransfer.items during SVG link drag and drop</title> +<a xlink:href="data:text/plain,PASS"> + <polygon points="0,0 100,0 100,100" fill="green"/> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="15">Drag green triangle above and drop it in the gray box below. Gray box should turn green.</textArea> +<rect x="10" y="300" width="480" height="190" fill="gray"/> +<script type="application/ecmascript"> +<![CDATA[ +var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'], +data = ['data:text/plain,PASS', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'], +a = document.querySelector('a'), rect = document.querySelector('rect'), text = document.querySelector('textArea'), e = 0, result = true; +a.addEventListener('dragstart', + function (event) + {event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != dataTypes.length; i++) + {event.dataTransfer.setData(dataTypes[i], data[i]);} + for(var i = event.dataTransfer.items.length; i != 0; i--) + {if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1) + {delete event.dataTransfer.items[i-1]} + } + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + },false); +a.addEventListener('drag', + function (event) + {event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + },false); +rect.addEventListener('dragenter', + function (event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')} + } + ); + } + },false); +rect.addEventListener('dragover', + function (event) + {event.preventDefault(); + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0]) + {say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')} + } + ); + } + },false); +rect.addEventListener('drop', + function (event) + {e = 0; + event.dataTransfer.items.clear(); + if(event.dataTransfer.items.length != dataTypes.length) + {say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')} + for(var i = 0; i != event.dataTransfer.items.length; i++) + {delete event.dataTransfer.items[i]; + if(event.dataTransfer.items[i].kind != 'string') + {say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')} + if(event.dataTransfer.items[i].type != dataTypes[i]) + {say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')} + event.dataTransfer.items[i].getAsString( + function () + {if(arguments[0] != data[e++]) + {say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')} + } + ); + } + rect.setAttribute('fill',result?'green':'red'); + },false); +function say(it) + {text.appendChild(document.createTextNode(it + '.')); + result = false;} +]]> +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/058.svg b/testing/web-platform/tests/html/editing/dnd/svg/058.svg new file mode 100644 index 0000000000..d2bb91da8d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/058.svg @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>SVG link drag and drop: allowed effects 'copy','move','link' and 'none'</title> +<a xlink:href="data:text/plain,1"> + <circle cx="50" cy="50" r="40" fill="green"/> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="30">You should be able to drag green circle and drop it onto any of the boxes below. Choosen box should turn green once circle is dropped on it.</textArea> +<rect x="10" y="300" width="100" height="100" fill="silver"/> +<rect x="120" y="300" width="100" height="100" fill="gray"/> +<rect x="230" y="300" width="100" height="100" fill="gray"/> +<rect x="340" y="300" width="100" height="100" fill="black"/> +<script type="application/ecmascript"> +var a = document.querySelector('a'), rect = document.querySelectorAll('rect'), +effects = ['copy','move','link','all'], e = 0; +a.addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = effects[e]} +,false); +for(var i = 0; i != rect.length; i++) + {rect[i].addEventListener('dragenter', + function (event) + {event.preventDefault(); + event.dataTransfer.effectAllowed = effects[e];} + ,false); + rect[i].addEventListener('dragover', + function (event) + {event.preventDefault()} + ,false); + rect[i].addEventListener('drop', + function (event) + {if(event.dataTransfer.dropEffect == effects[e] && event.dataTransfer.effectAllowed == effects[e] && i != 3) + {event.target.setAttribute('fill','green');} + e = (e+1)%3;} + ,false);} +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/059-1.svg b/testing/web-platform/tests/html/editing/dnd/svg/059-1.svg new file mode 100644 index 0000000000..492e9511a1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/059-1.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>SVG link drag and drop: helper file</title> +<textArea x="10" y="10" width="480" height="200" font-size="30">Drop circle onto gray box below. Box should turn green once circle is dropped.</textArea> +<rect x="10" y="220" width="480" height="270" fill="gray"/> +<script type="application/ecmascript"> +var rect = document.querySelector('rect'); +rect.addEventListener('dragenter', +function (event) + {event.preventDefault();} +,false); +rect.addEventListener('dragover', +function (event) + {event.preventDefault();} +,false); +rect.addEventListener('drop', +function (event) + {rect.setAttribute('fill',(event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'green':'red');} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/059.svg b/testing/web-platform/tests/html/editing/dnd/svg/059.svg new file mode 100644 index 0000000000..3cc7815c69 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/059.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>SVG link cross page drag and drop</title> +<a xlink:href="data:text/plain,1"> + <circle cx="50" cy="50" r="40" fill="green"/> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="30">Drag circle above. You should be redirected to the new page and be able to drop it there.</textArea> +<script type="application/ecmascript"> +document.querySelector('a').addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'; + window.location = '059-1.svg'} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/060-1.svg b/testing/web-platform/tests/html/editing/dnd/svg/060-1.svg new file mode 100644 index 0000000000..3dc6689e59 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/060-1.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>SVG link drag and drop: helper file</title> +<textArea x="10" y="10" width="480" height="200" font-size="30">Drag circle over arrow below but don't drop it yet. You should be returned back to start page.</textArea> +<polygon points="10,400 100,300 100,350 480,350 480,450 100,450 100,500 10,400" fill="navy"/> +<script type="application/ecmascript"> +document.querySelector('polygon').addEventListener('dragenter', +function (event) + {window.location = '060.svg'} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/060.svg b/testing/web-platform/tests/html/editing/dnd/svg/060.svg new file mode 100644 index 0000000000..fa7159abad --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/060.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>SVG link drag and drop and history navigation roundtrip</title> +<a xlink:href="data:text/plain,1"> + <circle cx="50" cy="50" r="40" fill="green"/> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="30">Drag circle above. You will be redirected to new page. When you return back drop circle on itself. You should see word PASS once you drop it.</textArea> +<script type="application/ecmascript"> +var a = document.querySelector('a'); +a.addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'; + window.location = '060-1.svg'} +,false); +a.addEventListener('dragenter', +function (event) + {event.preventDefault();} +,false); +a.addEventListener('dragover', +function (event) + {event.preventDefault();} +,false); +a.addEventListener('drop', +function (event) + {document.querySelector('textArea').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL';} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/061.svg b/testing/web-platform/tests/html/editing/dnd/svg/061.svg new file mode 100644 index 0000000000..20ed8a8360 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/061.svg @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>SVG link drag and drop roundtrip</title> +<a xlink:href="data:text/plain,1"> + <circle cx="50" cy="50" r="40" fill="green"/> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="30">Drag circle outside browser window and then drag it back and drop on itself. You should see word PASS once you drop it.</textArea> +<script type="application/ecmascript"> +var a = document.querySelector('a'); +a.addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy';} +,false); +a.addEventListener('dragenter', +function (event) + {event.preventDefault();} +,false); +a.addEventListener('dragover', +function (event) + {event.preventDefault();} +,false); +a.addEventListener('drop', +function (event) + {document.querySelector('textArea').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL';} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/062.svg b/testing/web-platform/tests/html/editing/dnd/svg/062.svg new file mode 100644 index 0000000000..2cbf96e0ea --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/062.svg @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Setting drag image during drag and drop of SVG link</title> +<a xlink:href="data:text/plain,1"> + <circle cx="60" cy="60" r="50" fill="gray"/> +</a> +<textArea x="10" y="200" width="480" height="200" font-size="30">Try to drag circle. Drag feedback should look like green rectangle.</textArea> +<rect x="300" y="10" width="100" height="100" fill="green"/> +<script type="application/ecmascript"> +var a = document.querySelector('a'), rect = document.querySelector('rect'); +a.addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('rect'), 50, 50);} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/063.svg b/testing/web-platform/tests/html/editing/dnd/svg/063.svg new file mode 100644 index 0000000000..3f570b6adb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/063.svg @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Adding element to datastore while dragging SVG links</title> +<a xlink:href="data:text/plain,1"> + <rect x="10" y="10" width="100" height="100" fill="green"/> +</a> +<a xlink:href="data:text/plain,2"> + <rect x="300" y="10" width="100" height="100" fill="teal"/> +</a> +<textArea x="10" y="200" width="480" height="200" font-size="30">Try to drag one of boxes above. Drag feedback should include both boxes.</textArea> +<script type="application/ecmascript"> +var a = document.querySelectorAll('a'); +a[0].addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelectorAll('rect')[1]);} +,false); +a[1].addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelectorAll('rect')[0]);} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/064.svg b/testing/web-platform/tests/html/editing/dnd/svg/064.svg new file mode 100644 index 0000000000..5369de9f44 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/064.svg @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of overlapping SVG links</title> +<a xlink:href="data:text/plain,1"> + <rect x="10" y="10" width="100" height="100" fill="silver"/> +</a> +<a xlink:href="data:text/plain,2"> + <rect x="10" y="10" width="100" height="100" fill="gray"/> +</a> + <rect x="160" y="10" width="100" height="100" fill="green"/> + <rect x="310" y="10" width="100" height="100" fill="maroon"/> +<textArea x="10" y="200" width="480" height="200" font-size="30">Try to drag gray boxe above. Drag feedback should be green, not red.</textArea> +<script type="application/ecmascript"> +var a = document.querySelectorAll('a'); +a[0].addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelectorAll('rect')[3], 50, 50);} +,false); +a[1].addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelectorAll('rect')[2], 50, 50);} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/065.svg b/testing/web-platform/tests/html/editing/dnd/svg/065.svg new file mode 100644 index 0000000000..89e158f2f9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/065.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Reload during SVG link drag and drop roundtrip</title> +<a xlink:href="data:text/plain,1"> + <circle cx="50" cy="50" r="40" fill="green"/> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="30">Drag circle around page and then drag it back and drop on itself. You should see word PASS once you drop it.</textArea> +<script type="application/ecmascript"> +var a = document.querySelector('a'); +a.addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'; + window.location.reload()} +,false); +a.addEventListener('dragenter', +function (event) + {event.preventDefault();} +,false); +a.addEventListener('dragover', +function (event) + {event.preventDefault();} +,false); +a.addEventListener('drop', +function (event) + {document.querySelector('textArea').firstChild.nodeValue = (event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL';} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/066.svg b/testing/web-platform/tests/html/editing/dnd/svg/066.svg new file mode 100644 index 0000000000..f5066ac357 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/066.svg @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Removing dragged element during drag and drop of SVG link</title> +<a xlink:href="data:text/plain,1"> + <circle cx="50" cy="50" r="50" fill="green"/> +</a> +<textArea x="10" y="100" width="480" height="200" font-size="30">Drag green circle above and drop it in the gray box below. Gray box should turn green once you drop it.</textArea> +<rect x="10" y="300" width="480" height="190" fill="gray"/> +<script type="application/ecmascript"> +var a = document.querySelector('a'), rect = document.querySelector('rect'); +a.addEventListener('dragstart', +function (event) + {event.dataTransfer.effectAllowed = 'copy'; + document.documentElement.removeChild(a);} +,false); +rect.addEventListener('dragenter', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('dragover', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('drop', +function (event) + {if(event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1') + {rect.setAttribute('fill','green');} + } +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/067.svg b/testing/web-platform/tests/html/editing/dnd/svg/067.svg new file mode 100644 index 0000000000..9156a0ff2e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/067.svg @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px" viewBox="0 0 500 500"> +<title>Drag and drop of SVG links</title> +<a xlink:href="data:text/plain,olive"> + <circle cx="50" cy="50" r="50" fill="olive"/> +</a> +<a xlink:href="data:text/plain,green"> + <circle cx="200" cy="50" r="50" fill="green"/> +</a> +<a xlink:href="data:text/plain,teal"> + <circle cx="350" cy="50" r="50" fill="teal"/> +</a> +<textArea x="10" y="120" width="480" height="200" font-size="30">Drag one of green circles above and drop it in the gray box below. Gray box should turn green.</textArea> +<rect x="10" y="300" width="480" height="190" fill="gray"/> +<script type="application/ecmascript"> +var a = document.querySelectorAll('a'), rect = document.querySelector('rect'); +for(var i = 0; i != a.length; i++) + {a[i].addEventListener('dragstart', + function (event) + {event.dataTransfer.effectAllowed = 'copy';} + ,false);} +rect.addEventListener('dragenter', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('dragover', +function (event) + {event.preventDefault()} +,false); +rect.addEventListener('drop', +function (event) + {rect.setAttribute('fill',event.dataTransfer.getData('text/uri-list').substr(16).replace(/\r\n$/,''));} +,false); +</script> +</svg> diff --git a/testing/web-platform/tests/html/editing/dnd/svg/helper-drop-selection-here-textArea.svg b/testing/web-platform/tests/html/editing/dnd/svg/helper-drop-selection-here-textArea.svg new file mode 100644 index 0000000000..783c164eb2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/svg/helper-drop-selection-here-textArea.svg @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="500px" height="300px" viewBox="0 0 500 300"> +<textArea x="10" y="10" width="480" height="280" font-size="20" editable="simple" pointer-events="boundingBox">Drop selection here</textArea> +<rect x="10" y="10" width="480" height="280" stroke="black" stroke-width="1" fill="none"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/synthetic/001.html b/testing/web-platform/tests/html/editing/dnd/synthetic/001.html new file mode 100644 index 0000000000..c0bf8a5776 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/synthetic/001.html @@ -0,0 +1,115 @@ +<!doctype html> +<html> + <head> + <title>Synthetic drag events</title> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> +test(function() { + assert_own_property(window,'DragEvent'); +}, 'window.DragEvent should be exposed' ); +test(function() { + var evt = new DragEvent('dragstart'); + assert_false( !!evt.initDragEvent, 'initDragEvent' ); + assert_true( !!evt.initMouseEvent, 'initMouseEvent' ); + assert_true( !!evt.initUIEvent, 'initUIEvent' ); + assert_true( !!evt.initEvent, 'initEvent' ); +}, 'DragEvent should have all of the inherited init*Event methods' ); + +//cannot test non-synthetic dataTransfer objects as the param here because that needs a real DragEvent to create a proper one with global storage +//will be tested in another file +test(function() { + var evt = new DragEvent('dragstart'); + evt.initMouseEvent('dragstart', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 1, document.body); +}, 'initMouseEvent should not throw' ); +test(function() { + var evt = new DragEvent('dragstart'); + evt.initUIEvent('dragstart', true, true, window, 1); +}, 'initUIEvent should not throw' ); +test(function() { + var evt = new DragEvent('dragstart'); + evt.initEvent('dragstart', true, true); +}, 'initEvent should not throw' ); + +test(function() { + var evt = new DragEvent('dragstart', {dataTransfer:null}), div = document.createElement('div'), ranlistener = false; + div.ondragstart = function () { ranlistener = true; }; + div.dispatchEvent(evt); + assert_true(ranlistener); +}, 'DragEvent constructor with null as the dataTransfer parameter should be able to fire the event' ); +test(function() { + var evt = new DragEvent('dragstart', {dataTransfer:undefined}), div = document.createElement('div'), ranlistener = false; + div.ondragstart = function () { ranlistener = true; }; + div.dispatchEvent(evt); + assert_true(ranlistener); +}, 'DragEvent constructor with undefined as the dataTransfer parameter should be able to fire the event' ); +test(function() { + assert_throws_js(TypeError, function() { + var evt = new DragEvent('dragstart', {dataTransfer:{}}); + }); +}, 'DragEvent constructor with custom object as the dataTransfer parameter should throw TypeError' ); +test(function() { + var evt = new DragEvent('dragstart'), div = document.createElement('div'), ranlistener = false; + div.ondragstart = function () { ranlistener = true; }; + evt.initMouseEvent('dragstart', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 1, document.body); + div.dispatchEvent(evt); + assert_true(ranlistener); +}, 'initMouseEvent should be able to fire the event' ); +test(function() { + var evt = new DragEvent('dragstart'), div = document.createElement('div'), ranlistener = false; + div.ondragstart = function () { ranlistener = true; }; + evt.initUIEvent('dragstart', true, true, window, 1); + div.dispatchEvent(evt); + assert_true(ranlistener); +}, 'initUIEvent should be able to fire the event' ); +test(function() { + var evt = new DragEvent('dragstart'), div = document.createElement('div'), ranlistener = false; + div.ondragstart = function () { ranlistener = true; }; + evt.initEvent('dragstart', true, true); + div.dispatchEvent(evt); + assert_true(ranlistener); +}, 'initEvent should be able to fire the event' ); + +test(function() { + var evt = new DragEvent('dragstart', {dataTransfer:null}), div = document.createElement('div'), dTrans = 'fail'; + div.ondragstart = function (e) { dTrans = e.dataTransfer }; + div.dispatchEvent(evt); + assert_equals(dTrans,null); +}, 'DragEvent constructor with null as the dataTransfer parameter should give null as the dataTransfer' ); +test(function() { + var evt = new DragEvent('dragstart', {dataTransfer:undefined}), div = document.createElement('div'), dTrans = 'fail'; + div.ondragstart = function (e) { dTrans = e.dataTransfer }; + div.dispatchEvent(evt); + assert_equals(dTrans,null); +}, 'DragEvent constructor with undefined as the dataTransfer parameter should give null as the dataTransfer' ); +test(function() { + var evt = new DragEvent('dragstart'), div = document.createElement('div'), dTrans = 'fail'; + div.ondragstart = function (e) { dTrans = e.dataTransfer }; + evt.initMouseEvent('dragstart', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 1, document.body); + div.dispatchEvent(evt); + assert_equals(dTrans,null); +}, 'initMouseEvent should give null as the dataTransfer' ); +test(function() { + var evt = new DragEvent('dragstart'), div = document.createElement('div'), dTrans = 'fail'; + div.ondragstart = function (e) { dTrans = e.dataTransfer }; + evt.initUIEvent('dragstart', true, true, window, 1); + div.dispatchEvent(evt); + assert_equals(dTrans,null); +}, 'initUIEvent should give null as the dataTransfer' ); +test(function() { + var evt = new DragEvent('dragstart'), div = document.createElement('div'), dTrans = 'fail'; + div.ondragstart = function (e) { dTrans = e.dataTransfer }; + evt.initEvent('dragstart', true, true); + div.dispatchEvent(evt); + assert_equals(dTrans,null); +}, 'initEvent should give null as the dataTransfer' ); + +//cannot test that synthetic event does not use the same data store as non-synthetic event because that needs a real DragEvent to create a proper one with global storage +//will be tested in another file + </script> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/synthetic/005-manual.html b/testing/web-platform/tests/html/editing/dnd/synthetic/005-manual.html new file mode 100644 index 0000000000..4e0b00dab2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/synthetic/005-manual.html @@ -0,0 +1,340 @@ +<!doctype html> +<html> + <head> + <title>Synthetic events with real data store must inherit protection status from real events</title> + <style type="text/css"> +blockquote { height: 100px; width: 100px; background: orange; margin: 0; padding: 0; float: left; } +blockquote + blockquote { background: blue; } +blockquote + blockquote + blockquote { background: fuchsia; } +blockquote + div { clear: left; } + </style> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> + <script type="text/javascript"> +setup(function () {},{explicit_done:true,explicit_timeout:true}); +window.onload = function () { + + var orange = document.getElementsByTagName('blockquote')[0], + blue = document.getElementsByTagName('blockquote')[1], + fuchsia = document.getElementsByTagName('blockquote')[2], + evtdone = {}; + + orange.ondragstart = function (e) { + evtdone[e.type] = true; + e.dataTransfer.effectAllowed = 'copy'; + + var t = async_test(e.type+' should share its data with the synthetic event'); + blue.ondragstart = function (e) { + t.step(function() { + assert_equals( e.dataTransfer.getData('text'), 'dragstart real data', 'step 1' ); + e.dataTransfer.setData('text','dragstart-dragstart synthetic data'); + assert_equals( e.dataTransfer.getData('text'), 'dragstart-dragstart synthetic data', 'step 2' ); + }); + }; + t.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + e.dataTransfer.setData('text','dragstart real data'); //changing in between steps, just to make sure it uses the underlying data store, not a temporary clone + blue.dispatchEvent(evt); + }); + t.done(); + + test(function() { + assert_equals( e.dataTransfer.getData('text'), 'dragstart-dragstart synthetic data' ); + }, e.type+' should see the data from the synthetic event' ); + + var t2 = async_test(e.type+' should share its protection status with the synthetic event'); + blue.ondrag = function (e) { + t2.step(function() { + e.dataTransfer.setData('text','dragstart-drag synthetic data'); + assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag synthetic data' ); + }); + }; + t2.step(function() { + var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t2.done(); + + var t3 = async_test(e.type+' should share its protection status with the nested synthetic event'); + blue.ondrag = function (e) { + blue.ondragend = function (e) { + t3.step(function() { + assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag synthetic data', 'step1' ); + e.dataTransfer.setData('text','dragstart-drag-dragend synthetic data'); + assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data', 'step2' ); + }); + }; + t3.step(function() { + var evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + }; + t3.step(function() { + var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t3.done(); + + test(function() { + assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data' ); + }, e.type+' should see the data from the nested synthetic event' ); + }; + + blue.ondragenter = blue.ondragover = function (e) { + e.preventDefault(); + }; + orange.ondrag = blue.ondragleave = function (e) { + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + var evtype = e.type; + + var t = async_test(e.type+' should share its data with the synthetic event'); + blue.ondragstart = function (e) { + t.step(function() { + assert_true( e.dataTransfer.items.length > 0, 'items.length' ); + }); + }; + t.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t.done(); + + var t2 = async_test(e.type+' should share its protection status with the synthetic event'); + blue.ondragstart = function (e) { + t2.step(function() { + assert_equals( e.dataTransfer.getData('text'), '', 'step 1' ); + e.dataTransfer.setData('text',evtype+'-dragstart synthetic data'); + assert_equals( e.dataTransfer.getData('text'), '', 'step 2' ); + }); + }; + t2.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t2.done(); + + test(function() { + assert_equals( e.dataTransfer.getData('text'), '' ); + }, e.type+' protection status should not be modified by the synthetic event' ); + + var t3 = async_test(e.type+' should share its protection status with the nested synthetic event'); + blue.ondragstart = function (e) { + var div = document.createElement('div'); + div.ondragstart = function (e) { + t3.step(function() { + assert_equals( e.dataTransfer.getData('text'), '', 'step1' ); + e.dataTransfer.setData('text',evtype+'dragstart-dragstart synthetic data'); + assert_equals( e.dataTransfer.getData('text'), '', 'step2' ); + }); + }; + t3.step(function() { + var evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); + div.dispatchEvent(evt); + }); + }; + t3.step(function() { + var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t3.done(); + }; + + fuchsia.ondragenter = fuchsia.ondragover = function (e) { + e.preventDefault(); + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + var evtype = e.type; + + var t = async_test(e.type+' should share its data with the synthetic event'); + blue.ondragstart = function (e) { + t.step(function() { + assert_true( e.dataTransfer.items.length > 0, 'items.length' ); + }); + }; + t.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t.done(); + + var t2 = async_test(e.type+' should share its protection status with the synthetic event'); + blue.ondragstart = function (e) { + t2.step(function() { + assert_equals( e.dataTransfer.getData('text'), '', 'step 1' ); + e.dataTransfer.setData('text',evtype+'-dragstart synthetic data'); + assert_equals( e.dataTransfer.getData('text'), '', 'step 2' ); + }); + }; + t2.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t2.done(); + + test(function() { + assert_equals( e.dataTransfer.getData('text'), '' ); + }, e.type+' protection status should not be modified by the synthetic event' ); + + var t3 = async_test(e.type+' should share its protection status with the nested synthetic event'); + blue.ondragstart = function (e) { + var div = document.createElement('div'); + div.ondragstart = function (e) { + t3.step(function() { + assert_equals( e.dataTransfer.getData('text'), '', 'step1' ); + e.dataTransfer.setData('text',evtype+'dragstart-dragstart synthetic data'); + assert_equals( e.dataTransfer.getData('text'), '', 'step2' ); + }); + }; + t3.step(function() { + var evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); + div.dispatchEvent(evt); + }); + }; + t3.step(function() { + var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t3.done(); + }; + + fuchsia.ondrop = function (e) { + e.preventDefault(); + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + var evtype = e.type; + + var t = async_test(e.type+' should share its data with the synthetic event'); + blue.ondragstart = function (e) { + t.step(function() { + assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data' ); + }); + }; + t.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t.done(); + + var t2 = async_test(e.type+' should share its protection status with the synthetic event'); + blue.ondragstart = function (e) { + t2.step(function() { + assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data', 'step 1' ); + e.dataTransfer.setData('text',evtype+'-dragstart synthetic data'); + assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data', 'step 2' ); + }); + }; + t2.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t2.done(); + + test(function() { + e.dataTransfer.setData('text','drop synthetic data'); + assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data' ); + }, e.type+' protection status should not be modified by the synthetic event' ); + + var t3 = async_test(e.type+' should share its protection status with the nested synthetic event'); + blue.ondragstart = function (e) { + var div = document.createElement('div'); + div.ondragstart = function (e) { + t3.step(function() { + assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data', 'step 1' ); + e.dataTransfer.setData('text',evtype+'dragstart-dragstart synthetic data'); + assert_equals( e.dataTransfer.getData('text'), 'dragstart-drag-dragend synthetic data', 'step 2' ); + }); + }; + t3.step(function() { + var evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); + div.dispatchEvent(evt); + }); + }; + t3.step(function() { + var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t3.done(); + }; + + orange.ondragend = function (e) { + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + var evtype = e.type; + + var t = async_test(e.type+' should share its data with the synthetic event'); + blue.ondragstart = function (e) { + t.step(function() { + assert_true( e.dataTransfer.items.length > 0, 'items.length' ); + }); + }; + t.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t.done(); + + var t2 = async_test(e.type+' should share its protection status with the synthetic event'); + blue.ondragstart = function (e) { + t2.step(function() { + assert_equals( e.dataTransfer.getData('text'), '', 'step 1' ); + e.dataTransfer.setData('text',evtype+'-dragstart synthetic data'); + assert_equals( e.dataTransfer.getData('text'), '', 'step 2' ); + }); + }; + t2.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t2.done(); + + test(function() { + assert_equals( e.dataTransfer.getData('text'), '' ); + }, e.type+' protection status should not be modified by the synthetic event' ); + + var t3 = async_test(e.type+' should share its protection status with the nested synthetic event'); + blue.ondragstart = function (e) { + var div = document.createElement('div'); + div.ondragstart = function (e) { + t3.step(function() { + assert_equals( e.dataTransfer.getData('text'), '', 'step1' ); + e.dataTransfer.setData('text',evtype+'dragstart-dragstart synthetic data'); + assert_equals( e.dataTransfer.getData('text'), '', 'step2' ); + }); + }; + t3.step(function() { + var evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); + div.dispatchEvent(evt); + }); + }; + t3.step(function() { + var evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); + blue.dispatchEvent(evt); + }); + t3.done(); + + test(function() { + var failtxt = '- Reload and try again'; + assert_true( evtdone.dragstart, 'dragstart event was not tested'+failtxt ); + assert_true( evtdone.drag, 'drag event was not tested'+failtxt ); + assert_true( evtdone.dragenter, 'dragenter event was not tested'+failtxt ); + assert_true( evtdone.dragleave, 'dragleave event was not tested'+failtxt ); + assert_true( evtdone.dragover, 'dragover event was not tested'+failtxt ); + assert_true( evtdone.drop, 'drop event was not tested'+failtxt ); + assert_true( evtdone.dragend, 'dragend event was not tested'+failtxt ); + }, 'all event types must now have been tested' ); + done(); + }; + +}; + </script> + </head> + <body> + <p>Drag the orange square over the blue square then the fuchsia square, then release it.</p> + <blockquote draggable="true"></blockquote> + <blockquote></blockquote> + <blockquote></blockquote> + <div id="log"></div> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/synthetic/006-manual.html b/testing/web-platform/tests/html/editing/dnd/synthetic/006-manual.html new file mode 100644 index 0000000000..e7d1677b14 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/synthetic/006-manual.html @@ -0,0 +1,79 @@ +<!doctype html> +<html> + <head> + <title>Synthetic events using real dataTransfer in new thread</title> + <style type="text/css"> +blockquote { height: 100px; width: 100px; background: orange; margin: 0; padding: 0; float: left; } +blockquote + blockquote { background: blue; } +blockquote + blockquote + blockquote { background: fuchsia; } +blockquote + div { clear: left; } + </style> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> + <script type="text/javascript"> +setup(function () {},{explicit_done:true,explicit_timeout:true}); +window.onload = function () { + + var orange = document.getElementsByTagName('blockquote')[0], + blue = document.getElementsByTagName('blockquote')[1], + fuchsia = document.getElementsByTagName('blockquote')[2], + evtdone = {}; + + orange.ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dragstart real data'); + var dataTransfer = e.dataTransfer; + setTimeout(function () { + var t = async_test('new thread should see data store in protected mode after dragstart'); + blue.ondragstart = function (e) { + t.step(function() { + assert_equals( e.dataTransfer.getData('text'), '', 'step 1' ); + e.dataTransfer.setData('text','new thread after dragstart'); + assert_equals( e.dataTransfer.getData('text'), '', 'step 2' ); + }); + }; + t.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:dataTransfer}); + blue.dispatchEvent(evt); + }); + t.done(); + },0); + }; + + fuchsia.ondragenter = fuchsia.ondragover = function (e) { + e.preventDefault(); + }; + + fuchsia.ondrop = function (e) { + e.preventDefault(); + var dataTransfer = e.dataTransfer; + setTimeout(function () { + var t = async_test('new thread should see data store in protected mode after drop'); + blue.ondragstart = function (e) { + t.step(function() { + assert_equals( e.dataTransfer.getData('text'), '', 'step 1' ); + e.dataTransfer.setData('text','new thread after dragstart'); + assert_equals( e.dataTransfer.getData('text'), '', 'step 2' ); + }); + }; + t.step(function() { + var evt = new DragEvent('dragstart', {dataTransfer:dataTransfer}); + blue.dispatchEvent(evt); + }); + t.done(); + done(); + },0); + }; + +}; + </script> + </head> + <body> + <p>Drag the orange square over the blue square then the fuchsia square, then release it.</p> + <blockquote draggable="true"></blockquote> + <blockquote></blockquote> + <blockquote></blockquote> + <div id="log"></div> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/001-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/001-manual.html new file mode 100644 index 0000000000..ff8572e937 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/001-manual.html @@ -0,0 +1,111 @@ +<!doctype html> +<html> + <head> + <title>allowTargetOrigin syntax</title> + <style type="text/css"> +blockquote { height: 100px; width: 100px; background: orange; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> + <script type="text/javascript"> +setup(function () {},{explicit_done:true}); +window.onload = function () { + document.getElementsByTagName('blockquote')[0].ondragstart = function (e) { + test(function() { + assert_true( !!e.dataTransfer.allowTargetOrigin ); + }, 'allowTargetOrigin should be supported' ); + test(function() { + assert_throws_js( TypeError, function () { e.dataTransfer.allowTargetOrigin(); } ); + }, 'no parameter should throw TypeError' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin(''); } ); + }, 'empty string should be an invalid URL' ); + test(function() { + e.dataTransfer.allowTargetOrigin('*'); + }, '* should be a valid URL' ); + test(function() { + e.dataTransfer.allowTargetOrigin('/'); + }, '/ should be a valid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('/foo'); } ); + }, '/foo should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('foo'); } ); + }, 'foo should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('//foo'); } ); + }, '//foo should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('http://'); } ); + }, 'http:// should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('http://*'); } ); + }, 'http://* should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('http://foo*'); } ); + }, 'http://foo* should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('http://foo.*'); } ); + }, 'http://foo.* should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('http://*.foo'); } ); + }, 'http://*.foo should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('http://foo:bar'); } ); + }, 'http://foo:bar should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('http://foo:bar@'); } ); + }, 'http://foo:bar@ should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('file:'); } ); + }, 'file: should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('file://'); } ); + }, 'file:// should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('data:'); } ); + }, 'data: should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('data:text/html'); } ); + }, 'data:text/html should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('file://localhost/'); } ); + }, 'file://localhost/ should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('file:///'); } ); + }, 'file:/// should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('data:text/html,'); } ); + }, 'data:text/html, should be an invalid URL' ); + test(function() { + assert_throws_dom( 'SYNTAX_ERR', function () { e.dataTransfer.allowTargetOrigin('javascript:'); } ); + }, 'javascript: should be an invalid URL' ); + test(function() { + e.dataTransfer.allowTargetOrigin('http://foo'); + }, 'http://foo should be a valid URL' ); + test(function() { + e.dataTransfer.allowTargetOrigin('http://foo.bar'); + }, 'http://foo.bar should be a valid URL' ); + test(function() { + e.dataTransfer.allowTargetOrigin('http://foo/bar'); + }, 'http://foo/bar should be a valid URL' ); + test(function() { + e.dataTransfer.allowTargetOrigin('http://foo:123'); + }, 'http://foo:123 should be a valid URL' ); + test(function() { + e.dataTransfer.allowTargetOrigin('http://foo:bar@baz'); + }, 'http://foo:bar@baz should be a valid URL' ); + test(function() { + e.dataTransfer.allowTargetOrigin('http://foo:bar@baz:123/qux'); + }, 'http://foo:bar@baz:123/qux should be a valid URL' ); + done(); + }; +}; + </script> + </head> + <body> + <blockquote draggable="true"></blockquote> + <div id="log">Drag the orange square above until the drag placeholder appears, then release it.</div> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/002-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/002-manual.html new file mode 100644 index 0000000000..d7e6c83a2a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/002-manual.html @@ -0,0 +1,87 @@ +<!doctype html> +<html> + <head> + <title>allowTargetOrigin events</title> + <style type="text/css"> +blockquote { height: 100px; width: 100px; background: orange; margin: 0; padding: 0; float: left; } +blockquote + blockquote { background: blue; } +blockquote + blockquote + blockquote { background: fuchsia; } +blockquote + div { clear: left; } + </style> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> + <script type="text/javascript"> +setup(function () {},{explicit_done:true}); +window.onload = function () { + var orange = document.getElementsByTagName('blockquote')[0], + blue = document.getElementsByTagName('blockquote')[1], + fuchsia = document.getElementsByTagName('blockquote')[2], + evtdone = {}; + orange.ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + test(function() { + assert_true( !!e.dataTransfer.allowTargetOrigin ); + }, 'allowTargetOrigin should exist in '+e.type ); + test(function() { + e.dataTransfer.allowTargetOrigin('*'); + }, 'allowTargetOrigin should work in '+e.type ); + }; + blue.ondragenter = blue.ondragover = function (e) { + e.preventDefault(); + }; + orange.ondrag = blue.ondragleave = function (e) { + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + test(function() { + assert_true( !!e.dataTransfer.allowTargetOrigin ); + }, 'allowTargetOrigin should exist in '+e.type ); + test(function() { + assert_throws_dom( 'SECURITY_ERR', function () { e.dataTransfer.allowTargetOrigin('*'); } ); + }, 'allowTargetOrigin should throw a SECURITY_ERR in '+e.type ); + }; + fuchsia.ondragenter = fuchsia.ondragover = fuchsia.ondrop = function (e) { + e.preventDefault(); + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + test(function() { + assert_true( !!e.dataTransfer.allowTargetOrigin ); + }, 'allowTargetOrigin should exist in '+e.type ); + test(function() { + assert_throws_dom( 'SECURITY_ERR', function () { e.dataTransfer.allowTargetOrigin('*'); } ); + }, 'allowTargetOrigin should throw a SECURITY_ERR in '+e.type ); + }; + orange.ondragend = function (e) { + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + test(function() { + assert_true( !!e.dataTransfer.allowTargetOrigin ); + }, 'allowTargetOrigin should exist in '+e.type ); + test(function() { + assert_throws_dom( 'SECURITY_ERR', function () { e.dataTransfer.allowTargetOrigin('*'); } ); + }, 'allowTargetOrigin should throw a SECURITY_ERR in '+e.type ); + test(function() { + var failtxt = '- Reload and try again'; + assert_true( evtdone.dragstart, 'dragstart event was not tested'+failtxt ); + assert_true( evtdone.drag, 'drag event was not tested'+failtxt ); + assert_true( evtdone.dragenter, 'dragenter event was not tested'+failtxt ); + assert_true( evtdone.dragleave, 'dragleave event was not tested'+failtxt ); + assert_true( evtdone.dragover, 'dragover event was not tested'+failtxt ); + assert_true( evtdone.drop, 'drop event was not tested'+failtxt ); + assert_true( evtdone.dragend, 'dragend event was not tested'+failtxt ); + }, 'all event types must now have been tested' ); + done(); + }; +}; + </script> + </head> + <body> + <blockquote draggable="true"></blockquote> + <blockquote></blockquote> + <blockquote></blockquote> + <div id="log">Drag the orange square over the blue square then the fuchsia square, then release it.</div> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/003-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/003-manual.html new file mode 100644 index 0000000000..febc2b0da6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/003-manual.html @@ -0,0 +1,95 @@ +<!doctype html> +<html> + <head> + <title>allowTargetOrigin valid syntax</title> + <style type="text/css"> +div { float: left; height: 100px; width: 100px; margin-right: 10px; background: orange; } +iframe { height: 100px; width: 100px; border: none; } +.note { float: right; color: silver; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +function addNote(el,str) { + var par = document.createElement(el); + par.textContent = str; + document.body.appendChild(par); +} +function testFrame(text,frameorigin,framepath) { + var persist = arguments; + addNote('p',(done++)+'. '+text); + var div = document.createElement('div'); + var frame = document.createElement('iframe'); + frame.src = frameorigin+framepath; + div.draggable = true; + div.ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + for( var i = 3; i < persist.length; i++ ) { + e.dataTransfer.allowTargetOrigin(persist[i]); + } + }; + var par = document.createElement('p'); + par.className = 'note'; + par.appendChild(document.createTextNode('Target: '+frameorigin)); + par.appendChild(document.createElement('br')); + par.appendChild(document.createTextNode('Allowing: '+([]).slice.call(persist,3).join(' and '))); + if( framepath.match(/\?domain\b/) ) { + par.appendChild(document.createElement('br')); + par.appendChild(document.createTextNode('document.domain set to parent domain')); + } + document.body.appendChild(par); + document.body.appendChild(div); + document.body.appendChild(frame); +} +var done = 1; +window.onload = function () { + var allowText = 'Drag the orange box below over the blue box the right, and release it. Fail if nothing happens in the blue box.'; + var blockText = 'Drag the orange box below over the pink box the right, and release it. Pass if nothing happens in the pink box.'; + var allowHelper = location.pathname.replace(/[^\/]*$/,'HELPER-mustallow.html'); + var blockHelper = location.pathname.replace(/[^\/]*$/,'HELPER-mustblock.html'); + if( location.hostname != httpHostMain || location.host != httpHostMain ) { + addNote('p','This test must be loaded over http:\/\/'+httpHostMain+'\/'); + } else { + /* 01 */ testFrame(allowText,'http://'+httpHostMain,allowHelper); + /* 02 */ testFrame(allowText,'http://'+httpHostAlias,allowHelper); + /* 03 */ testFrame(allowText,'http://'+httpHostMain,allowHelper,'*'); + /* 04 */ testFrame(allowText,'http://'+httpHostAlias,allowHelper,'*'); + /* 05 */ testFrame(allowText,'http://'+httpHostMain,allowHelper,'/'); + /* 06 */ testFrame(blockText,'http://'+httpHostAlias,blockHelper,'/'); + /* 07 */ testFrame(allowText,'http://'+httpHostMain,allowHelper,'http://'+httpHostMain); + /* 08 */ testFrame(blockText,'http://'+httpHostMain+':'+httpPortAlias,blockHelper,'http://'+httpHostMain); + /* 09 */ testFrame(blockText,'http://'+httpHostAlias,blockHelper,'http://'+httpHostMain); + /* 10 */ testFrame(blockText,'http://'+httpHostAlias,blockHelper,'http://'+httpHostMain); + /* 11 */ testFrame(allowText,'http://'+httpHostMain,allowHelper,'http://'+httpHostMain+':80'); + /* 12 */ testFrame(blockText,'http://'+httpHostMain+':'+httpPortAlias,blockHelper,'http://'+httpHostMain+':80'); + /* 13 */ testFrame(allowText,'http://'+httpHostMain+':'+httpPortAlias,allowHelper,'http://'+httpHostMain+':'+httpPortAlias); + /* 14 */ testFrame(blockText,'http://'+httpHostMain,blockHelper,'http://'+httpHostMain+':'+httpPortAlias); + /* 15 */ testFrame(blockText,'https://'+httpsHostAlias,blockHelper,'http://'+httpsHostAlias); + /* 16 */ testFrame(allowText,'https://'+httpsHostAlias,allowHelper,'https://'+httpsHostAlias); + /* 17 */ testFrame(allowText,'http://'+httpHostMain,allowHelper,'http://foo:bar@'+httpHostMain+'/baz'); + /* 18 */ testFrame(allowText,'http://foo:bar@'+httpHostMain,allowHelper,'http://'+httpHostMain); + /* 19 */ testFrame(allowText,'http://'+httpHostMain,allowHelper,'http://'+httpHostAlias,'/'); + /* 20 */ testFrame(allowText,'http://'+httpHostMain,allowHelper,'/','http://'+httpHostAlias); + /* 21 */ testFrame(allowText,'http://'+httpHostMain,allowHelper,'http://'+httpHostAlias,'*'); + /* 22 */ testFrame(allowText,'http://'+httpHostMain,allowHelper,'http://'+httpHostAlias,'http://'+httpHostMain); + /* 23 */ testFrame(allowText,'http://'+httpHostAlias,allowHelper,'http://'+httpHostAlias,'http://'+httpHostMain); + /* 24 */ testFrame(blockText,'http://'+httpHostAlias,blockHelper,'http://dummy','http://'+httpHostMain); + /* 25 */ testFrame(blockText,'https://'+httpsHostAlias,blockHelper,'https://'+httpsHostAlias+':'+httpsPortAlias); + /* 26 */ testFrame(blockText,'https://'+httpsHostAlias+':'+httpsPortAlias,blockHelper,'https://'+httpsHostAlias); + /* 27 */ testFrame(allowText,'https://'+httpsHostAlias+':'+httpsPortAlias,allowHelper,'https://'+httpsHostAlias+':'+httpsPortAlias); + window.xhr = new XMLHttpRequest(); + xhr.open('GET',allowHelper,false); + xhr.send(null); + /* 28 */ testFrame(allowText,'data:text/html,',escape(xhr.responseText),'http://'+httpHostMain); + /* 29 */ testFrame(allowText,'javascript:','parent.xhr.responseText','http://'+httpHostMain); + /* 30 */ testFrame(blockText,'http://'+httpHostAlias,blockHelper,'http://'+httpHostAlias.replace(/^[^.]+\./,'')); + /* 31 */ testFrame(allowText,'http://'+httpHostAlias,allowHelper+'?domain','http://'+httpHostAlias); + /* 32 */ testFrame(blockText,'http://'+httpHostAlias,blockHelper+'?domain','http://'+httpHostAlias.replace(/^[^.]+\./,'')); + } +}; + </script> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/004-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/004-1.html new file mode 100644 index 0000000000..94e4308743 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/004-1.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>Data URI does not match absolute HTTP URL</title> + <style type="text/css"> +html, body { margin: 0; padding: 0; } +div { height: 100px; width: 100px; background: orange; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + e.dataTransfer.allowTargetOrigin('http://'+httpHostMain); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/004-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/004-manual.html new file mode 100644 index 0000000000..a540e77b39 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/004-manual.html @@ -0,0 +1,36 @@ +<!doctype html> +<html> + <head> + <title>Data URI does not match absolute HTTP URL</title> + </head> + <body> + <p>Load the following URL in a new tab (copy & paste it into the address bar):</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + <script type="text/javascript"> +document.write('data:text/html,'+escape( +'<!doctype html>\ +<html>\ + <head>\ + <title>Data URI does not match absolute HTTP URL<\/title>\ + <style type="text/css">\ +iframe { border: none; height: 150px; width: 150px; }\ + <\/style>\ + <script type="text/javascript">\ +window.onload = function () {\ + document.body.ondragenter = document.body.ondragleave = document.body.ondragover = document.body.ondrop = function (e) {\ + e.preventDefault();\ + document.body.innerHTML = "FAIL";\ + };\ +};\ + <\/script>\ + <\/head>\ + <body>\ + <p>Drag the orange square below over this text, and release it. Pass if this text does not change.<\/p>\ + <p><iframe src="'+location.href.replace(/\.html$/,'-1.html')+'"><\/iframe><\/p>\ + <\/body>\ +<\/html>')); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/005-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/005-1.html new file mode 100644 index 0000000000..74156fcd7c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/005-1.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>JavaScript URI does not match absolute HTTP URL</title> + <style type="text/css"> +html, body { margin: 0; padding: 0; } +div { height: 100px; width: 100px; background: orange; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + e.dataTransfer.allowTargetOrigin('http://'+httpHostMain); + }; +}; + </script> + </head> + <body> + + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/005-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/005-manual.html new file mode 100644 index 0000000000..54ceec889b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/005-manual.html @@ -0,0 +1,36 @@ +<!doctype html> +<html> + <head> + <title>JavaScript URI does not match absolute HTTP URL</title> + </head> + <body> + <p>Load the following URL in a new tab (copy & paste it into the address bar):</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + <script type="text/javascript"> +document.write('javascript:unescape("'+escape( +'<!doctype html>\ +<html>\ + <head>\ + <title>JavaScript does not match absolute HTTP URL<\/title>\ + <style type=\'text/css\'>\ +iframe { border: none; height: 150px; width: 150px; }\ + <\/style>\ + <script type=\'text/javascript\'>\ +window.onload = function () {\ + document.body.ondragenter = document.body.ondragleave = document.body.ondragover = document.body.ondrop = function (e) {\ + e.preventDefault();\ + document.body.innerHTML = \'FAIL\';\ + };\ +};\ + <\/script>\ + <\/head>\ + <body>\ + <p>Drag the orange square below over this text, and release it. Pass if this text does not change.<\/p>\ + <p><iframe src=\''+location.href.replace(/\.html$/,'-1.html')+'\'><\/iframe><\/p>\ + <\/body>\ +<\/html>')+'")'); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/006-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/006-manual.html new file mode 100644 index 0000000000..f60430b4c0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/006-manual.html @@ -0,0 +1,52 @@ +<!doctype html> +<html> + <head> + <title>Data URI does not match /</title> + </head> + <body> + <!-- +/ sets an absolute URL pointing to the document's unique identifier - used as the script origin. +The script origin will in fact be inherited from the parent page, which is actually the same data URI. +That part works. +However, when it comes to matching against it, it will not match, as the global identifier does not +match because the origin does not match the scheme/host/port tuple required. + --> + <p>Load the following URL in a new tab (copy & paste it into the address bar):</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + <script type="text/javascript"> +document.write('data:text/html,'+escape( +'<!doctype html>\ +<html>\ + <head>\ + <title>Data URI does not match /<\/title>\ + <style type="text/css">\ +html, body { margin: 0; padding: 0; }\ +div { height: 100px; width: 100px; background: orange; }\ +iframe { border: none; height: 150px; width: 150px; }\ + <\/style>\ + <\/head>\ + <body>\ + <script type="text/javascript">\ +if( self == top ) {\ + document.body.ondragenter = document.body.ondragleave = document.body.ondragover = document.body.ondrop = function (e) {\ + e.preventDefault();\ + document.body.innerHTML = "FAIL";\ + };\ + document.write("<p>Drag the orange square below over this text, and release it. Pass if this text does not change.<\\\/p>");\ + document.write("<p><iframe src=\\""+location.href+"\\"><\\\/iframe><\\\/p>");\ +} else {\ + document.write("<div draggable=\\"true\\"><\\\/div>");\ + document.getElementsByTagName("div")[0].ondragstart = function (e) {\ + e.dataTransfer.effectAllowed = "copy";\ + e.dataTransfer.setData("text","dummy text");\ + e.dataTransfer.allowTargetOrigin("/");\ + };\ +}\ + <\/script>\ + <\/body>\ +<\/html>')); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/007-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/007-manual.html new file mode 100644 index 0000000000..d3b45100b6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/007-manual.html @@ -0,0 +1,52 @@ +<!doctype html> +<html> + <head> + <title>Data URI does not match its own URL</title> + </head> + <body> + <!-- +Sets an absolute URL pointing to the data URI. +The script origin will in fact be inherited from the parent page, which is actually the same data URI. +That part works. +However, when it comes to matching against it, it will not match, as the global identifier used as the +script origin does not match because the origin does not match the scheme/host/port tuple required. + --> + <p>Load the following URL in a new tab (copy & paste it into the address bar):</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + <script type="text/javascript"> +document.write('data:text/html,'+escape( +'<!doctype html>\ +<html>\ + <head>\ + <title>Data URI does not match its own URL<\/title>\ + <style type="text/css">\ +html, body { margin: 0; padding: 0; }\ +div { height: 100px; width: 100px; background: orange; }\ +iframe { border: none; height: 150px; width: 150px; }\ + <\/style>\ + <\/head>\ + <body>\ + <script type="text/javascript">\ +if( self == top ) {\ + document.body.ondragenter = document.body.ondragleave = document.body.ondragover = document.body.ondrop = function (e) {\ + e.preventDefault();\ + document.body.innerHTML = "FAIL";\ + };\ + document.write("<p>Drag the orange square below over this text, and release it. Pass if this text does not change.<\\\/p>");\ + document.write("<p><iframe src=\\""+location.href+"\\"><\\\/iframe><\\\/p>");\ +} else {\ + document.write("<div draggable=\\"true\\"><\\\/div>");\ + document.getElementsByTagName("div")[0].ondragstart = function (e) {\ + e.dataTransfer.effectAllowed = "copy";\ + e.dataTransfer.setData("text","dummy text");\ + e.dataTransfer.allowTargetOrigin(location.href);\ + };\ +}\ + <\/script>\ + <\/body>\ +<\/html>')); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/008-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/008-manual.html new file mode 100644 index 0000000000..f8a7daf022 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/008-manual.html @@ -0,0 +1,53 @@ +<!doctype html> +<html> + <head> + <title>Data URI does match *</title> + </head> + <body> + <!-- +* allows any URL at all, so it should work + --> + <p>Load the following URL in a new tab (copy & paste it into the address bar):</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + <script type="text/javascript"> +document.write('data:text/html,'+escape( +'<!doctype html>\ +<html>\ + <head>\ + <title>Data URI does match *<\/title>\ + <style type="text/css">\ +html, body { margin: 0; padding: 0; }\ +div { height: 100px; width: 100px; background: orange; }\ +iframe { border: none; height: 150px; width: 150px; }\ + <\/style>\ + <\/head>\ + <body>\ + <script type="text/javascript">\ +var seentypes = {};\ +if( self == top ) {\ + document.body.ondragenter = document.body.ondragover = document.body.ondrop = function (e) {\ + e.preventDefault();\ + if( e.type == "drop" ) {\ + document.body.innerHTML = ( seentypes.dragenter && seentypes.dragover ) ? "PASS" : "FAIL";\ + } else {\ + seentypes[e.type] = true;\ + }\ + };\ + document.write("<p>Drag the orange square below over this text, and release it. Fail if this text does not change.<\\\/p>");\ + document.write("<p><iframe src=\\""+location.href+"\\"><\\\/iframe><\\\/p>");\ +} else {\ + document.write("<div draggable=\\"true\\"><\\\/div>");\ + document.getElementsByTagName("div")[0].ondragstart = function (e) {\ + e.dataTransfer.effectAllowed = "copy";\ + e.dataTransfer.setData("text","dummy text");\ + e.dataTransfer.allowTargetOrigin("*");\ + };\ +}\ + <\/script>\ + <\/body>\ +<\/html>')); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/009-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/009-manual.html new file mode 100644 index 0000000000..181ca85121 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/009-manual.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>* should not prevent dropping on external applications</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName("div")[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = "copy"; + e.dataTransfer.setData("text","PASS"); + e.dataTransfer.allowTargetOrigin("*"); + }; +}; + </script> + </head> + <body> + <p>This test is only relevant on platforms where it is possible to switch applications in mid-drag (eg. alt+tab, dragging over taskbar buttons, dragging between restored windows).</p> + <p>This testcase requires an external application that accepts dropping of text from other applications - eg. Wordpad (write.exe) on Windows. Ensure that the external application is open.</p> + <p>Drag the orange block to the other application and release it. Pass if the word "PASS" appears in the other application.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + <div draggable="true"></div> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/010-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/010-manual.html new file mode 100644 index 0000000000..4fd893f052 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/010-manual.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <title>A URL should prevent dropping on external applications</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName("div")[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = "copy"; + e.dataTransfer.setData("text","FAIL"); + e.dataTransfer.allowTargetOrigin("http://foo"); + }; +}; + </script> + </head> + <body> + <p>This test is only relevant on platforms where it is possible to switch applications in mid-drag (eg. alt+tab, dragging over taskbar buttons, dragging between restored windows).</p> + <p>This testcase requires an external application that accepts dropping of text from other applications - eg. Wordpad (write.exe) on Windows. Ensure that the external application is open.</p> + <p>Drag the orange block to the other application and release it. Fail if the word "FAIL" appears in the other application.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + <div draggable="true"></div> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/011-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/011-manual.html new file mode 100644 index 0000000000..d68e03ad49 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/011-manual.html @@ -0,0 +1,63 @@ +<!doctype html> +<html> + <head> + <title>allowTargetOrigin should only block dragenter, dragover, dragleave and drop events</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; margin: 0; padding: 0; float: left; } +div + div { background: blue; } + </style> + <script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], evtdone = {}, fails = []; + orange.ondragstart = function (e) { + evtdone[e.type] = true; + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + try { + e.dataTransfer.allowTargetOrigin('http://example.com'); + } catch(e) { + fails[fails.length] = 'allowTargetOrigin threw an error: '+e; + } + }; + orange.ondragenter = orange.ondragover = orange.ondrop = function (e) { + e.preventDefault(); + evtdone[e.type] = true; + }; + orange.ondrag = orange.ondragleave = function (e) { + evtdone[e.type] = true; + }; + orange.ondragend = function (e) { + evtdone[e.type] = true; + if( !evtdone.dragstart ) { + fails[fails.length] = 'dragstart did not fire - how did that happen?'; + } + if( !evtdone.drag ) { + fails[fails.length] = 'drag did not fire'; + } + if( !evtdone.dragend ) { + fails[fails.length] = 'dragend did not fire - OK, who broke the testcase?'; + } + if( evtdone.dragenter ) { + fails[fails.length] = 'dragenter fired'; + } + if( evtdone.dragover ) { + fails[fails.length] = 'dragover fired'; + } + if( evtdone.dragleave ) { + fails[fails.length] = 'dragleave fired'; + } + if( evtdone.drop ) { + fails[fails.length] = 'drop fired'; + } + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS'; + }; +}; + </script> + </head> + <body> + <p>Drag the orange square over the blue square then back to the orange square, then release it. Fail if this text does not change.</p> + <div draggable="true"></div> + <div></div> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/012-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/012-manual.html new file mode 100644 index 0000000000..997e8ef801 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/012-manual.html @@ -0,0 +1,62 @@ +<!doctype html> +<html> + <head> + <title>allowTargetOrigin after leaving browser window</title> + <style type="text/css"> +div { float: left; height: 100px; width: 100px; margin-right: 10px; background: orange; } +iframe { height: 100px; width: 100px; border: none; } +.note { float: right; color: silver; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +function addNote(el,str) { + var par = document.createElement(el); + par.textContent = str; + document.body.appendChild(par); +} +function testFrame(text,frameorigin,framepath) { + var persist = arguments; + addNote('p',(done++)+'. '+text); + var div = document.createElement('div'); + var frame = document.createElement('iframe'); + frame.src = frameorigin+framepath; + div.draggable = true; + div.ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + for( var i = 3; i < persist.length; i++ ) { + e.dataTransfer.allowTargetOrigin(persist[i]); + } + }; + var par = document.createElement('p'); + par.className = 'note'; + par.appendChild(document.createTextNode('Target: '+frameorigin)); + par.appendChild(document.createElement('br')); + par.appendChild(document.createTextNode('Allowing: '+([]).slice.call(persist,3).join(' and '))); + if( framepath.match(/\?domain\b/) ) { + par.appendChild(document.createElement('br')); + par.appendChild(document.createTextNode('document.domain set to parent domain')); + } + document.body.appendChild(par); + document.body.appendChild(div); + document.body.appendChild(frame); +} +var done = 1; +window.onload = function () { + var allowText = 'Drag the orange box below outside the browser window (not onto the system taskbar) then back over the blue box the right, and release it. Fail if nothing happens in the blue box.'; + var blockText = 'Drag the orange box below outside the browser window (not onto the system taskbar) then back over the pink box the right, and release it. Pass if nothing happens in the pink box.'; + var allowHelper = location.pathname.replace(/[^\/]*$/,'HELPER-mustallow.html'); + var blockHelper = location.pathname.replace(/[^\/]*$/,'HELPER-mustblock.html'); + if( location.hostname != httpHostMain || location.host != httpHostMain ) { + addNote('p','This test must be loaded over http:\/\/'+httpHostMain+'\/'); + } else { + /* 07 */ testFrame(allowText,'http://'+httpHostMain,allowHelper,'http://'+httpHostMain); + /* 09 */ testFrame(blockText,'http://'+httpHostAlias,blockHelper,'http://'+httpHostMain); + } +}; + </script> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/013-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/013-manual.html new file mode 100644 index 0000000000..92da7647da --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/013-manual.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> + <head> + <title>A URL should prevent dropping on UI</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } + </style> + <script type="text/javascript"> +window.onload = function () { + document.getElementsByTagName("div")[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = "copy"; + e.dataTransfer.setData("text","FAIL"); + e.dataTransfer.allowTargetOrigin("http://foo"); + }; +}; + </script> + </head> + <body> + <p>This test is only relevant on platforms where it is possible to drop data onto the browser UI (eg. the address field).</p> + <p>Drag the orange block to the address field and release it. Fail if the word "FAIL" appears in the address field. Repeat for other UI fields.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + <div draggable="true"></div> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/101-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/101-manual.html new file mode 100644 index 0000000000..23f5cf9baf --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/101-manual.html @@ -0,0 +1,124 @@ +<!doctype html> +<html> + <head> + <title>.origin for all events</title> + <style type="text/css"> +blockquote { height: 100px; width: 100px; background: orange; margin: 0; padding: 0; float: left; } +blockquote + blockquote { background: blue; } +blockquote + blockquote + blockquote { background: fuchsia; } +blockquote + div { clear: left; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> + <script type="text/javascript"> +setup(function () {},{explicit_done:true}); +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + done(); + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var orange = document.getElementsByTagName('blockquote')[0], + blue = document.getElementsByTagName('blockquote')[1], + fuchsia = document.getElementsByTagName('blockquote')[2], + evtdone = {}; + orange.ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + test(function() { + assert_equals( e.dataTransfer.origin, origin ); + }, '.origin should exist in '+e.type ); + test(function () { + //WebIDL and ECMAScript 5 - a readonly property has a getter but not a setter + //ES5 makes [[Put]] fail but not throw + var failed = false, oldorigin = e.dataTransfer.origin; + try { + e.dataTransfer.origin = 'http://example.com'; + } catch(e) { + failed = e; + } + assert_equals(e.dataTransfer.origin,oldorigin); + assert_false(failed,'an error was thrown'); + }, '.origin must be read-only in '+e.type); + }; + blue.ondragenter = blue.ondragover = function (e) { + e.preventDefault(); + }; + orange.ondrag = blue.ondragleave = function (e) { + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + test(function() { + assert_equals( e.dataTransfer.origin, origin ); + }, '.origin should exist in '+e.type ); + test(function () { + var failed = false, oldorigin = e.dataTransfer.origin; + try { + e.dataTransfer.origin = 'http://example.com'; + } catch(e) { + failed = e; + } + assert_equals(e.dataTransfer.origin,oldorigin); + assert_false(failed,'an error was thrown'); + }, '.origin must be read-only in '+e.type); + }; + fuchsia.ondragenter = fuchsia.ondragover = fuchsia.ondrop = function (e) { + e.preventDefault(); + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + test(function() { + assert_equals( e.dataTransfer.origin, origin ); + }, '.origin should exist in '+e.type ); + test(function () { + var failed = false, oldorigin = e.dataTransfer.origin; + try { + e.dataTransfer.origin = 'http://example.com'; + } catch(e) { + failed = e; + } + assert_equals(e.dataTransfer.origin,oldorigin); + assert_false(failed,'an error was thrown'); + }, '.origin must be read-only in '+e.type); + }; + orange.ondragend = function (e) { + if( evtdone[e.type] ) { return; } + evtdone[e.type] = true; + test(function() { + assert_equals( e.dataTransfer.origin, origin ); + }, '.origin should exist in '+e.type ); + test(function () { + var failed = false, oldorigin = e.dataTransfer.origin; + try { + e.dataTransfer.origin = 'http://example.com'; + } catch(e) { + failed = e; + } + assert_equals(e.dataTransfer.origin,oldorigin); + assert_false(failed,'an error was thrown'); + }, '.origin must be read-only in '+e.type); + test(function() { + var failtxt = '- Reload and try again'; + assert_true( evtdone.dragstart, 'dragstart event was not tested'+failtxt ); + assert_true( evtdone.drag, 'drag event was not tested'+failtxt ); + assert_true( evtdone.dragenter, 'dragenter event was not tested'+failtxt ); + assert_true( evtdone.dragleave, 'dragleave event was not tested'+failtxt ); + assert_true( evtdone.dragover, 'dragover event was not tested'+failtxt ); + assert_true( evtdone.drop, 'drop event was not tested'+failtxt ); + assert_true( evtdone.dragend, 'dragend event was not tested'+failtxt ); + }, 'all event types must now have been tested' ); + done(); + }; +}; + </script> + </head> + <body> + <blockquote draggable="true"></blockquote> + <blockquote></blockquote> + <blockquote></blockquote> + <div id="log">Drag the orange square over the blue square then the fuchsia square, then release it.</div> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/102-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/102-manual.html new file mode 100644 index 0000000000..7fc9d58f70 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/102-manual.html @@ -0,0 +1,36 @@ +<!doctype html> +<html> + <head> + <title>Origin for http site to itself</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + var iframe = document.createElement('iframe'); + iframe.src = origin+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/103-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/103-1.html new file mode 100644 index 0000000000..837135b364 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/103-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + <head> + <title>Origin for http site with user/pass/port to itself</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + var iframe = document.createElement('iframe'); + iframe.src = origin+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/103-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/103-manual.html new file mode 100644 index 0000000000..945b22cd36 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/103-manual.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>Origin for http site with user/pass/port to itself</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var iframe = document.createElement('iframe'); + iframe.src = 'http://foo:bar@'+httpHostMain+':80'+location.pathname.replace(/.html$/,'-1.html'); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/104-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/104-1.html new file mode 100644 index 0000000000..6503b5f56b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/104-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + <head> + <title>Origin for http site with non-default port to itself</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain+':'+httpPortAlias; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + var iframe = document.createElement('iframe'); + iframe.src = origin+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/104-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/104-manual.html new file mode 100644 index 0000000000..a881e5eda3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/104-manual.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>Origin for http site with non-default port to itself</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var iframe = document.createElement('iframe'); + iframe.src = 'http://'+httpHostMain+':'+httpPortAlias+location.pathname.replace(/.html$/,'-1.html'); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/105-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/105-1.html new file mode 100644 index 0000000000..00bae5f16c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/105-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + <head> + <title>Origin for http site to site with non-default port</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + var iframe = document.createElement('iframe'); + iframe.src = origin+':'+httpPortAlias+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/105-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/105-manual.html new file mode 100644 index 0000000000..39a44f542a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/105-manual.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>Origin for http site to site with non-default port</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var iframe = document.createElement('iframe'); + iframe.src = 'http://'+httpHostMain+location.pathname.replace(/.html$/,'-1.html'); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/106-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/106-1.html new file mode 100644 index 0000000000..e7f985c8ea --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/106-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + <head> + <title>Origin for http site with non-default port to site</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain+':'+httpPortAlias; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + var iframe = document.createElement('iframe'); + iframe.src = 'http://'+httpHostMain+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/106-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/106-manual.html new file mode 100644 index 0000000000..30db964c44 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/106-manual.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>Origin for http site with non-default port to site</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var iframe = document.createElement('iframe'); + iframe.src = 'http://'+httpHostMain+':'+httpPortAlias+location.pathname.replace(/.html$/,'-1.html'); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/107-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/107-1.html new file mode 100644 index 0000000000..a3c8200519 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/107-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + <head> + <title>Origin for https site to itself</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'https://'+httpsHostAlias; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + var iframe = document.createElement('iframe'); + iframe.src = origin+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/107-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/107-manual.html new file mode 100644 index 0000000000..136b61c4e5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/107-manual.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>Origin for https site to itself</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var iframe = document.createElement('iframe'); + iframe.src = 'https://'+httpsHostAlias+location.pathname.replace(/.html$/,'-1.html'); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/108-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/108-1.html new file mode 100644 index 0000000000..4c11a7cd5d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/108-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + <head> + <title>Origin for https site with non-default port to itself</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'https://'+httpsHostAlias+':'+httpsPortAlias; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + var iframe = document.createElement('iframe'); + iframe.src = origin+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/108-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/108-manual.html new file mode 100644 index 0000000000..e73e592db1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/108-manual.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>Origin for https site with non-default port to itself</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var iframe = document.createElement('iframe'); + iframe.src = 'https://'+httpsHostAlias+':'+httpsPortAlias+location.pathname.replace(/.html$/,'-1.html'); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/109-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/109-1.html new file mode 100644 index 0000000000..4ce1ad10b9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/109-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + <head> + <title>Origin for https site to site with non-default port</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'https://'+httpsHostAlias; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + var iframe = document.createElement('iframe'); + iframe.src = origin+':'+httpsPortAlias+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/109-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/109-manual.html new file mode 100644 index 0000000000..7919281dd2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/109-manual.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>Origin for https site to site with non-default port</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var iframe = document.createElement('iframe'); + iframe.src = 'https://'+httpsHostAlias+location.pathname.replace(/.html$/,'-1.html'); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/110-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/110-1.html new file mode 100644 index 0000000000..cd64c530f0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/110-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + <head> + <title>Origin for https site with non-default port to site</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'https://'+httpsHostAlias+':'+httpsPortAlias; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + var iframe = document.createElement('iframe'); + iframe.src = 'https://'+httpsHostAlias+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/110-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/110-manual.html new file mode 100644 index 0000000000..8b13ff1292 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/110-manual.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>Origin for https site with non-default port to site</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var iframe = document.createElement('iframe'); + iframe.src = 'https://'+httpsHostAlias+':'+httpsPortAlias+location.pathname.replace(/.html$/,'-1.html'); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/111-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/111-manual.html new file mode 100644 index 0000000000..57f2c9fbb3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/111-manual.html @@ -0,0 +1,52 @@ +<!doctype html> +<html> + <head> + <title>Origin for file: to http:</title> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var datastr = +'<!doctype html>\ +<html>\ + <head>\ + <title>Origin for file: to http:<\/title>\ + <style type="text/css">\ +div { height: 100px; width: 100px; background: orange; }\ +iframe { width: 500px; height: 120px; border: none; }\ + <\/style>\ + <script type="text/javascript">\ +window.onload = function () {\ + var origin = "null (string)";\ + document.getElementsByTagName("div")[0].ondragstart = function (e) {\ + e.dataTransfer.effectAllowed = "copy";\ + e.dataTransfer.setData("text","dummy text");\ + };\ + document.getElementsByTagName("span")[0].textContent = origin;\ + var iframe = document.createElement("iframe");\ + iframe.src = "'+location.href.replace(/[^\/]*$/,'HELPER-showorigin.html')+'";\ + document.body.insertBefore(iframe,document.getElementsByTagName("div")[0]);\ +};\ + <\/script>\ + <\/head>\ + <body>\ + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br>\ + <span><\/span><\/p>\ + <div draggable="true"></div>\ + <\/body>\ +<\/html>'; + document.getElementsByTagName('a')[0].href = 'data:text/html,'+escape(datastr); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p><a href="">Download the linked file to your disk</a>, and open it locally. Follow further instructions in that file.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/112-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/112-manual.html new file mode 100644 index 0000000000..c19638c9ba --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/112-manual.html @@ -0,0 +1,56 @@ +<!doctype html> +<html> + <head> + <title>Origin for data: with inherited http origin to http:</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var datastr = +'<!doctype html>\ +<html>\ + <head>\ + <title>Origin for data: with inherited http origin to http:<\/title>\ + <style type="text/css">\ +div { height: 100px; width: 100px; background: orange; }\ +iframe { width: 500px; height: 120px; border: none; }\ + <\/style>\ + <script type="text/javascript">\ +window.onload = function () {\ + var origin = "http://'+httpHostMain+'";\ + document.getElementsByTagName("div")[0].ondragstart = function (e) {\ + e.dataTransfer.effectAllowed = "copy";\ + e.dataTransfer.setData("text","dummy text");\ + };\ + document.getElementsByTagName("span")[0].textContent = origin;\ + var iframe = document.createElement("iframe");\ + iframe.src = "'+location.href.replace(/[^\/]*$/,'HELPER-showorigin.html')+'";\ + document.body.insertBefore(iframe,document.getElementsByTagName("div")[0]);\ +};\ + <\/script>\ + <\/head>\ + <body>\ + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br>\ + <span><\/span><\/p>\ + <div draggable="true"></div>\ + <\/body>\ +<\/html>'; + var iframe = document.createElement('iframe'); + iframe.src = 'data:text/html,'+escape(datastr); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/113-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/113-manual.html new file mode 100644 index 0000000000..aa4b2b1cd3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/113-manual.html @@ -0,0 +1,50 @@ +<!doctype html> +<html> + <head> + <title>Origin for data: with no inherited origin to http:</title> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + </head> + <body> + + <p>Load the following URL in a new tab (copy & paste it into the address bar):</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + <script type="text/javascript"> +var origin = 'http://'+httpHostMain; +if( location.href.indexOf(origin+'/') ) { + document.write('This must be tested on '+origin+'/'); +} else { + document.write("data:text/html,"+escape( +'<!doctype html>\ +<html>\ + <head>\ + <title>Origin for data: with no inherited origin to http:<\/title>\ + <style type="text/css">\ +div { height: 100px; width: 100px; background: orange; }\ +iframe { width: 500px; height: 120px; border: none; }\ + <\/style>\ + <script type="text/javascript">\ +window.onload = function () {\ + var origin = "null (string)";\ + document.getElementsByTagName("div")[0].ondragstart = function (e) {\ + e.dataTransfer.effectAllowed = "copy";\ + e.dataTransfer.setData("text","dummy text");\ + };\ + document.getElementsByTagName("span")[0].textContent = origin;\ + var iframe = document.createElement("iframe");\ + iframe.src = "'+location.href.replace(/[^\/]*$/,'HELPER-showorigin.html')+'";\ + document.body.insertBefore(iframe,document.getElementsByTagName("div")[0]);\ +};\ + <\/script>\ + <\/head>\ + <body>\ + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br>\ + <span><\/span><\/p>\ + <div draggable="true"></div>\ + <\/body>\ +<\/html>')); +} + </script> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/114-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/114-manual.html new file mode 100644 index 0000000000..9c7e7ff338 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/114-manual.html @@ -0,0 +1,56 @@ +<!doctype html> +<html> + <head> + <title>Origin for javascript: with inherited http origin to http:</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var datastr = +'<!doctype html>\ +<html>\ + <head>\ + <title>Origin for javascript: with inherited http origin to http:<\/title>\ + <style type="text/css">\ +div { height: 100px; width: 100px; background: orange; }\ +iframe { width: 500px; height: 120px; border: none; }\ + <\/style>\ + <script type="text/javascript">\ +window.onload = function () {\ + var origin = "http://'+httpHostMain+'";\ + document.getElementsByTagName("div")[0].ondragstart = function (e) {\ + e.dataTransfer.effectAllowed = "copy";\ + e.dataTransfer.setData("text","dummy text");\ + };\ + document.getElementsByTagName("span")[0].textContent = origin;\ + var iframe = document.createElement("iframe");\ + iframe.src = "'+location.href.replace(/[^\/]*$/,'HELPER-showorigin.html')+'";\ + document.body.insertBefore(iframe,document.getElementsByTagName("div")[0]);\ +};\ + <\/script>\ + <\/head>\ + <body>\ + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br>\ + <span><\/span><\/p>\ + <div draggable="true"></div>\ + <\/body>\ +<\/html>'; + var iframe = document.createElement('iframe'); + iframe.src = "javascript:'"+escape(datastr)+"'"; + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/115-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/115-manual.html new file mode 100644 index 0000000000..133b2200ff --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/115-manual.html @@ -0,0 +1,50 @@ +<!doctype html> +<html> + <head> + <title>Origin for javascript: with no inherited origin to http:</title> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + </head> + <body> + + <p>Load the following URL in a new tab (copy & paste it into the address bar):</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + <script type="text/javascript"> +var origin = 'http://'+httpHostMain; +if( location.href.indexOf(origin+'/') ) { + document.write('This must be tested on '+origin+'/'); +} else { + document.write("javascript:'"+escape( +'<!doctype html>\ +<html>\ + <head>\ + <title>Origin for javascript: with no inherited origin to http:<\/title>\ + <style type="text/css">\ +div { height: 100px; width: 100px; background: orange; }\ +iframe { width: 500px; height: 120px; border: none; }\ + <\/style>\ + <script type="text/javascript">\ +window.onload = function () {\ + var origin = "null (string)";\ + document.getElementsByTagName("div")[0].ondragstart = function (e) {\ + e.dataTransfer.effectAllowed = "copy";\ + e.dataTransfer.setData("text","dummy text");\ + };\ + document.getElementsByTagName("span")[0].textContent = origin;\ + var iframe = document.createElement("iframe");\ + iframe.src = "'+location.href.replace(/[^\/]*$/,'HELPER-showorigin.html')+'";\ + document.body.insertBefore(iframe,document.getElementsByTagName("div")[0]);\ +};\ + <\/script>\ + <\/head>\ + <body>\ + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br>\ + <span><\/span><\/p>\ + <div draggable="true"></div>\ + <\/body>\ +<\/html>')+"'"); +} + </script> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/116-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/116-manual.html new file mode 100644 index 0000000000..dd6dbf57b0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/116-manual.html @@ -0,0 +1,31 @@ +<!doctype html> +<html> + <head> + <title>Origin for dropped files</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + document.getElementsByTagName('span')[0].textContent = 'null (string)'; + var iframe = document.createElement('iframe'); + iframe.src = origin+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag a small file from your computer onto the blue square and release it. If a prompt appears, accept it. The blue square should be replaced with the text:<br> + <span></span></p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/117-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/117-1.html new file mode 100644 index 0000000000..40b0885f33 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/117-1.html @@ -0,0 +1,33 @@ +<!doctype html> +<html> + <head> + <title>Origin for site with document.domain set to a parent domain</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostAlias; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + document.domain = httpsHostAlias.replace(/^[^.]+\./,''); + var iframe = document.createElement('iframe'); + iframe.src = origin+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/117-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/117-manual.html new file mode 100644 index 0000000000..88676a4b77 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/117-manual.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>Origin for site with document.domain set to a parent domain</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var iframe = document.createElement('iframe'); + iframe.src = 'http://'+httpHostAlias+location.pathname.replace(/.html$/,'-1.html'); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/118-1.html b/testing/web-platform/tests/html/editing/dnd/target-origin/118-1.html new file mode 100644 index 0000000000..5161661a76 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/118-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + <head> + <title>Origin after leaving browser window</title> + <style type="text/css"> +div { height: 100px; width: 100px; background: orange; } +iframe { width: 500px; height: 120px; border: none; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain+':'+httpPortAlias; + document.getElementsByTagName('div')[0].ondragstart = function (e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + }; + document.getElementsByTagName('span')[0].textContent = origin; + var iframe = document.createElement('iframe'); + iframe.src = 'http://'+httpHostMain+location.pathname.replace(/[^\/]*$/,'HELPER-showorigin.html'); + document.body.insertBefore(iframe,document.getElementsByTagName('div')[0]); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square out of the browser window (not onto the system taskbar) then back onto the blue square and release it. The blue square should be replaced with the text:<br> + <span></span></p> + <div draggable="true"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/118-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/118-manual.html new file mode 100644 index 0000000000..0b9df2292d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/118-manual.html @@ -0,0 +1,27 @@ +<!doctype html> +<html> + <head> + <title>Origin after leaving browser window</title> + <style type="text/css"> +html, body, iframe { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + </style> + <script type="text/javascript" src="../resources/crossorigin.sub.js"></script> + <script type="text/javascript"> +window.onload = function () { + var origin = 'http://'+httpHostMain; + if( location.href.indexOf(origin+'/') ) { + document.body.innerHTML = 'This must be tested on '+origin+'/'; + return; + } + var iframe = document.createElement('iframe'); + iframe.src = 'http://'+httpHostMain+':'+httpPortAlias+location.pathname.replace(/.html$/,'-1.html'); + document.body.appendChild(iframe); +}; + </script> + </head> + <body> + + <noscript><p>Enable JavaScript and reload</p></noscript> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/201-manual.html b/testing/web-platform/tests/html/editing/dnd/target-origin/201-manual.html new file mode 100644 index 0000000000..e19d5289cc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/201-manual.html @@ -0,0 +1,83 @@ +<!doctype html> +<html> + <head> + <title>allowTargetOrigin with real dataTransfer should block dragenter, dragover, dragleave and drop synthetic events</title> + <style type="text/css"> +p + div { height: 100px; width: 100px; background: orange; } + </style> + <script type="text/javascript"> +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], targ = document.getElementsByTagName('div')[1], evtdone = {}, fails = []; + orange.ondragstart = function (e) { + var evt; + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + try { + e.dataTransfer.allowTargetOrigin('http://example.com'); + } catch(e) { + fails[fails.length] = 'allowTargetOrigin threw an error: '+e; + } + try { + evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('dragenter', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('dragover', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('dragleave', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('drop', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + } catch(e) { + fails[fails.length] = 'Synthetic event threw an error: '+e; + } + if( !evtdone.dragstart ) { + fails[fails.length] = 'dragstart did not fire'; + } + if( !evtdone.drag ) { + fails[fails.length] = 'drag did not fire'; + } + if( !evtdone.dragend ) { + fails[fails.length] = 'dragend did not fire'; + } + if( evtdone.dragenter ) { + fails[fails.length] = 'dragenter fired'; + } + if( evtdone.dragover ) { + fails[fails.length] = 'dragover fired'; + } + if( evtdone.dragleave ) { + fails[fails.length] = 'dragleave fired'; + } + if( evtdone.drop ) { + fails[fails.length] = 'drop fired'; + } + document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS'; + }; + targ.ondragstart = function (e) { + evtdone[e.type] = true; + }; + targ.ondragenter = targ.ondragover = targ.ondrop = function (e) { + e.preventDefault(); + evtdone[e.type] = true; + }; + targ.ondrag = targ.ondragleave = function (e) { + evtdone[e.type] = true; + }; + targ.ondragend = function (e) { + evtdone[e.type] = true; + }; +}; + </script> + </head> + <body> + <p>Drag the orange square to the right until the drag placeholder appears, then release it. Fail if this text does not change.</p> + <div draggable="true"></div> + <div></div> + <noscript><p>Enable JavaScript and reload</p></noscript> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/202.html b/testing/web-platform/tests/html/editing/dnd/target-origin/202.html new file mode 100644 index 0000000000..84f3f2ee96 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/202.html @@ -0,0 +1,64 @@ +<!doctype html> +<html> + <head> + <title>allowTargetOrigin with fake dataTransfer should block dragenter, dragover, dragleave and drop synthetic events</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div draggable="true"></div> + <div></div> + <noscript><p>Enable JavaScript and reload</p></noscript> + <div id="log"></div> + + <script type="text/javascript"> +test(function () { + var dragsource = document.getElementsByTagName('div')[0], targ = document.getElementsByTagName('div')[1], evtdone = {}; + dragsource.ondragstart = function (e) { + var evt; + evtdone.initial = true; + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text','dummy text'); + e.dataTransfer.allowTargetOrigin('http://example.com'); + evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('dragenter', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('dragover', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('dragleave', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('drop', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); + targ.dispatchEvent(evt); + }; + targ.ondragstart = function (e) { + evtdone[e.type] = true; + }; + targ.ondragenter = targ.ondragover = targ.ondrop = function (e) { + e.preventDefault(); + evtdone[e.type] = true; + }; + targ.ondrag = targ.ondragleave = function (e) { + evtdone[e.type] = true; + }; + targ.ondragend = function (e) { + evtdone[e.type] = true; + }; + var creatorevent = document.createEvent('DragEvent'); + creatorevent.initDragEvent('dragstart', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 1, document.body, {}); + dragsource.dispatchEvent(creatorevent); + assert_true(evtdone.dragstart, 'dragstart must fire'); + assert_true(evtdone.drag, 'drag must fire'); + assert_true(evtdone.dragend, 'dragend must fire'); + assert_false(evtdone.dragenter, 'dragenter must not fire'); + assert_false(evtdone.dragover, 'dragover must not fire'); + assert_false(evtdone.dragleave, 'dragleave must not fire'); + assert_false(evtdone.drop, 'drop must not fire'); +}, "allowTargetOrigin with fake dataTransfer should block events"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/HELPER-mustallow.html b/testing/web-platform/tests/html/editing/dnd/target-origin/HELPER-mustallow.html new file mode 100644 index 0000000000..c0d3aa022c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/HELPER-mustallow.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> + <head> + <title>Must be allowed</title> + <style type="text/css"> +html { background: blue; } +html, body { margin: 0; padding: 0; height: 100%; width: 100%; } + </style> + </head> + <body> + <script type="text/javascript"> +if( location.search && location.search.indexOf('domain') != -1 ) { + document.domain = location.hostname.replace(/^[^.]+\./,''); +} +var seentypes = {}; +document.body.ondragenter = document.body.ondragover = document.body.ondrop = function (e) { + e.preventDefault(); + if( e.type == 'drop' ) { + document.body.innerHTML = ( seentypes.dragenter && seentypes.dragover && e.dataTransfer.getData('text') == 'dummy text' ) ? 'PASS' : 'FAIL'; + } else { + seentypes[e.type] = true; + } +} + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/HELPER-mustblock.html b/testing/web-platform/tests/html/editing/dnd/target-origin/HELPER-mustblock.html new file mode 100644 index 0000000000..c7c69ee6b0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/HELPER-mustblock.html @@ -0,0 +1,21 @@ +<!doctype html> +<html> + <head> + <title>Must be blocked</title> + <style type="text/css"> +html { background: fuchsia; } +html, body { margin: 0; padding: 0; height: 100%; width: 100%; } + </style> + </head> + <body> + <script type="text/javascript"> +if( location.search && location.search.indexOf('domain') != -1 ) { + document.domain = location.hostname.replace(/^[^.]+\./,''); +} +document.body.ondragenter = document.body.ondragleave = document.body.ondragover = document.body.ondrop = function (e) { + e.preventDefault(); + document.body.innerHTML = 'FAIL'; +} + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/target-origin/HELPER-showorigin.html b/testing/web-platform/tests/html/editing/dnd/target-origin/HELPER-showorigin.html new file mode 100644 index 0000000000..057f969dd2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/target-origin/HELPER-showorigin.html @@ -0,0 +1,31 @@ +<!doctype html> +<html> + <head> + <title>Readout of .origin</title> + <style type="text/css"> +html, body { margin: 0; padding: 0; } +div { height: 100px; width: 100px; background: blue; } + </style> + <script type="text/javascript"> +window.onload = function () { + var blue = document.getElementsByTagName('div')[0]; + blue.ondragenter = blue.ondragover = function (e) { + e.preventDefault(); + }; + blue.ondrop = function (e) { + e.preventDefault(); + if( e.dataTransfer.origin === 'null' ) { + document.body.innerHTML = 'null (string)'; + } else { + document.body.innerHTML = e.dataTransfer.origin; + } + }; +}; + </script> + </head> + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/DataTransfer-types-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/DataTransfer-types-manual.html new file mode 100644 index 0000000000..0a62997f69 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/DataTransfer-types-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>DataTransferItem Test: types - files</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-types"/> +<meta name="flags" content="interact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<p><div id="div" style="border: 2px green solid; width: 200px; height: 200px;"></div></p> + +<h2>Test steps:</h2> +<p>Drag a file enter the green box, then drop file out</p> + +<script> + +let div = document.getElementById("div"); + +setup({explicit_done: true}); +setup({explicit_timeout: true}); + +on_event(div, "dragenter", evt => { + let type = evt.dataTransfer.types[0]; + test(() => { + assert_equals(type, "Files"); + }, "Check if one of the types will be the string 'Files' when drag a file"); + done(); +}); + +</script> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/dndTransferCases-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/dndTransferCases-manual.html new file mode 100644 index 0000000000..6081b5d42c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/dndTransferCases-manual.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_data_item_kind_string</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='author' title='Domenic Denicola' href='mailto:d@domenic.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-datatransfer-interface'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #drag { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='drag' draggable>blue text</div> + <div id='drop' dropzone='copy string:text/plain'></div> + <div id='log'> </div> + + <script> + var drag; + setup(function() { + drag = document.querySelector('#drag'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drag, 'dragstart', function(event) { + test(function() { + assert_equals(event.dataTransfer.effectAllowed, 'uninitialized'); + }, 'effectAllowed should be "uninitialized"'); + + test(function() { + assert_equals(event.dataTransfer.types.constructor, Array, 'should be an array'); + assert_true(Object.isFrozen(event.dataTransfer.types), 'should be frozen'); + }, 'types should be a frozen array'); + + test(function() { + assert_false('contains' in event.dataTransfer.types); + assert_false('item' in event.dataTransfer.types); + }, 'types should not have any of the historical methods'); + + test(function() { + assert_equals(event.dataTransfer.types, event.dataTransfer.types); + }, 'types should return the same object from multiple reads (assuming no changes)'); + + test(function() { + var before = event.dataTransfer.types; + event.dataTransfer.clearData(); + assert_not_equals(event.dataTransfer.types, before); + }, 'types should return a different object after changes'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/effectAllowed-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/effectAllowed-manual.html new file mode 100644 index 0000000000..08540b906a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/effectAllowed-manual.html @@ -0,0 +1,76 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Set a value to effectAllowed attribute</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/> + <meta name="assert" content="Set a value to effectAllowed attribute"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var TARGETEVENT1, TARGETEVENT2, TARGET1, TARGET2; + + function DragstartEvent(evt) + { + if ((TARGET1 == evt.target) && (TARGETEVENT1 == evt.type)) + { + evt.dataTransfer.effectAllowed = "move"; + } + } + function DragenterEvent(evt) + { + if ((TARGET2 == evt.target) && (TARGETEVENT2 == evt.type)) + { + if("move" == evt.dataTransfer.effectAllowed) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + } + + TARGETEVENT1 = "dragstart"; + TARGETEVENT2 = "dragenter"; + + window.onload = function() + { + TARGET1 = document.getElementById("target1"); + TARGET2 = document.getElementById("target2"); + AddEventListenersForElement(TARGETEVENT1, DragstartEvent, false, TARGET1); + AddEventListenersForElement(TARGETEVENT2, DragenterEvent, false, TARGET2); + } + </script> + </head> + <body> + <pre>Description: Set a value to effectAllowed attribute</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Drag the blue image and enter the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#datatransfer + </p> + <p> + On setting, if the new value is one of "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", or "uninitialized", then the attribute's current value must be set to the new value. + </p> + <img src="/images/blue.png" style="width:200px; height:100px" draggable="true" id="target1"/> + <br /><br /> + <input type="text" id="target2" style="border:2px green solid; width:200px; height:50px"></input> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/files-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/files-manual.html new file mode 100644 index 0000000000..7de0b4bbce --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/files-manual.html @@ -0,0 +1,81 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: files attribute returns a FileList</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/> + <meta name="assert" content="files attribute returns a FileList"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DropEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + var files = evt.dataTransfer.files; + if(('[object FileList]' == files)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + else + { + LogTestResult("FAIL"); + } + } + + function DragenterEvent(evt) + { + evt.preventDefault(); + } + + function DragoverEvent(evt) + { + evt.preventDefault(); + } + + EVENT = "drop"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DropEvent, false, TARGET); + AddEventListenersForElement("dragenter", DragenterEvent, false, TARGET); + AddEventListenersForElement("dragover", DragoverEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: files attribute returns a FileList</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Drag a file and drop it in the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#datatransfer + </p> + <p> + The files attribute must return a live FileList sequence consisting of File objects representing the files. + </p> + <textarea type="text" id="target" style="border:2px green solid; width:200px; height:50px"></textarea> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedDragDataTransfer-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedDragDataTransfer-manual.html new file mode 100644 index 0000000000..6d84f54efc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedDragDataTransfer-manual.html @@ -0,0 +1,142 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: drag DataTransfer protected status</title> + <link rel='author' title='Nika Layzell' href='mailto:nika@thelayzells.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-datatransfer-interface'> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + #drag { + width: 100px; + height: 100px; + display: inline-block; + color: #fff; + background-color: #f00; + } + #drop { + width: 100px; + height: 100px; + display: inline-block; + color: #fff; + background-color: #00f; + } + </style> + </head> + + <body> + <h3>Instructions</h3> + <p> + Drag the box labeled "drag" to the box labeled "drop" and release. + </p> + + <div id="drag" draggable="true">drag</div> + <div id="drop">drop</div> + + <div id="log"> </div> + + <script> + var MIME = "text/plain"; + + var drop; + setup(function() { + drop = document.querySelector("#drop"); + }, {explicit_done: true, explicit_timeout: true}); + + var STATUS_PROTECTED = "protected"; + var STATUS_READONLY = "readonly"; + var STATUS_READWRITE = "readwrite"; + var STATUS_DISCONNECTED = "disconnected"; + function status(dt) { + // Check if we can write to it. + try { + dt.setData("text/html", "_test"); + + if (dt.getData("text/html") == "_test") { + dt.clearData("text/html"); + assert_true(!dt.getData("text/html"), "ClearData should work..."); + return STATUS_READWRITE; + } + } catch(e) {} + + // If we can read the data then we're readonly + if (dt.getData(MIME)) { + return STATUS_READONLY; + } + + // If we can see that items exist (and read types) then we're protected + if (dt.items.length > 0) { + return STATUS_PROTECTED; + } + + // Otherwise we've been disconnected. + return STATUS_DISCONNECTED; + }; + + var drag_dt = null; + var over_dt = null; + var drop_dt = null; + on_event(document.body, "dragstart", function(e) { + drag_dt = e.dataTransfer; + over_dt = null; + drop_dt = null; + drag_dt.setData(MIME, "b"); + test(function() { + assert_equals(status(drag_dt), STATUS_READWRITE, + "drag_dt must be readwrite during dragstart"); + }, "dragstart event status"); + }); + on_event(drop, "dragover", function(e) { + if (!over_dt) { + over_dt = e.dataTransfer; + test(function() { + assert_equals(status(drag_dt), STATUS_DISCONNECTED, + "drag_dt mustbe disconnected during dragover"); + assert_equals(status(over_dt), STATUS_PROTECTED, + "over_dt mustbe protected during dragover"); + }, "dragover event status"); + test(function() { + assert_not_equals(drag_dt, over_dt, + "drag_dt must be a different DataTransfer object than over_dt"); + }, "dragover event identity"); + } + e.preventDefault(); + }); + on_event(drop, "drop", function(e) { + drop_dt = e.dataTransfer; + test(function() { + assert_equals(status(drag_dt), STATUS_DISCONNECTED, + "drag_dt mustbe disconnected during drop"); + assert_equals(status(over_dt), STATUS_DISCONNECTED, + "over_dt mustbe disconnected during drop"); + assert_equals(status(drop_dt), STATUS_READONLY, + "drop_dt mustbe readonly during drop"); + }, "drop event status"); + test(function() { + assert_not_equals(drop_dt, over_dt, + "drop_dt must be a different DataTransfer object than over_dt"); + assert_not_equals(drop_dt, drag_dt, + "drop_dt must be a different DataTransfer object than drag_dt"); + }, "drop event identity"); + test(function() { + assert_equals(drop_dt.getData(MIME), "b", + "the data should have been persisted"); + }, "drop event data"); + e.preventDefault(); + + setTimeout(function() { + test(function() { + assert_equals(status(drag_dt), STATUS_DISCONNECTED, + "drag_dt mustbe disconnected after drop"); + assert_equals(status(over_dt), STATUS_DISCONNECTED, + "over_dt mustbe disconnected after drop"); + assert_equals(status(drop_dt), STATUS_DISCONNECTED, + "drop_dt mustbe disconnected after drop"); + }, "after drop event status"); + done(); + }, 0); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedPasteDataTransfer-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedPasteDataTransfer-manual.html new file mode 100644 index 0000000000..20bf9c7a9a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedPasteDataTransfer-manual.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: paste DataTransfer protected status</title> + <link rel='author' title='Nika Layzell' href='mailto:nika@thelayzells.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-datatransfer-interface'> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + + <body> + <h3>Instructions</h3> + <p> + Select the text in the text box and press Ctrl-C followed by Ctrl-V. + </p> + + <input type="text" id="input" value="text"> + + <div id="log"> </div> + + <script> + var MIME = "text/plain"; + + var input; + setup(function() { + input = document.querySelector("#input"); + }, {explicit_done: true, explicit_timeout: true}); + + var STATUS_PROTECTED = "protected"; + var STATUS_READONLY = "readonly"; + var STATUS_READWRITE = "readwrite"; + var STATUS_DISCONNECTED = "disconnected"; + function status(dt) { + // Check if we can write to it. + try { + dt.setData("text/html", "_test"); + + if (dt.getData("text/html") == "_test") { + dt.clearData("text/html"); + assert_true(!dt.getData("text/html"), "ClearData should work..."); + return STATUS_READWRITE; + } + } catch(e) {} + + // If we can read the data then we're readonly + if (dt.getData(MIME)) { + return STATUS_READONLY; + } + + // If we can see that items exist (and read types) then we're protected + if (dt.items.length > 0) { + return STATUS_PROTECTED; + } + + // Otherwise we've been disconnected. + return STATUS_DISCONNECTED; + }; + + let copy_dt = null; + let paste_dt = null; + on_event(input, "copy", function(e) { + copy_dt = e.clipboardData; + paste_dt = null; + copy_dt.setData(MIME, "b"); + + test(function() { + assert_equals(status(copy_dt), STATUS_READWRITE, + "copy_dt must be readwrite during copy"); + }, "copy event status"); + + e.preventDefault(); + }); + on_event(input, "paste", function(e) { + paste_dt = e.clipboardData; + + test(function() { + assert_equals(status(copy_dt), STATUS_DISCONNECTED, + "copy_dt mustbe disconnected during paste"); + assert_equals(status(paste_dt), STATUS_READONLY, + "paste_dt mustbe readonly during paste"); + }, "paste event status"); + test(function() { + assert_not_equals(copy_dt != paste_dt, + "copy_dt must be a different DataTransfer object than paste_dt"); + }, "paste event identity"); + test(function() { + assert_equals(paste_dt.getData(MIME), "b", + "the data should have been persisted"); + }, "paste event data"); + + e.preventDefault(); + + setTimeout(function() { + test(function() { + assert_equals(status(copy_dt), STATUS_DISCONNECTED, + "copy_dt mustbe disconnected after paste"); + assert_equals(status(paste_dt), STATUS_DISCONNECTED, + "paste_dt mustbe disconnected after paste"); + }, "after paste event status"); + done(); + }, 0); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/setData-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/setData-manual.html new file mode 100644 index 0000000000..f0f7cae600 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/setData-manual.html @@ -0,0 +1,78 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Add an item to the drag data store item list whose data is the string given by setData method's second argument</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/> + <meta name="assert" content="Add an item to the drag data store item list whose data is the string given by setData method's second argument"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var TARGETEVENT1, TARGETEVENT2, TARGET1, TARGET2; + + function DragstartEvent(evt) + { + if ((TARGET1 == evt.target) && (TARGETEVENT1 == evt.type)) + { + evt.dataTransfer.setData("text", "SetText"); + } + } + function DropEvent(evt) + { + if ((TARGET2 == evt.target) && (TARGETEVENT2 == evt.type)) + { + if("SetText" == evt.dataTransfer.getData("text")) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + } + + TARGETEVENT1 = "dragstart"; + TARGETEVENT2 = "drop"; + + window.onload = function() + { + TARGET1 = document.getElementById("target1"); + TARGET2 = document.getElementById("target2"); + AddEventListenersForElement(TARGETEVENT1, DragstartEvent, false, TARGET1); + AddEventListenersForElement(TARGETEVENT2, DropEvent, false, TARGET2); + } + </script> + </head> + <body> + <pre>Description: Add an item to the drag data store item list whose data is the string given by setData method's second argument</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Drag the blue image and drop it in the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#datatransfer + </p> + <p> + If format equals "text", change it to "text/plain". + Remove the item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to format, if there is one. + Add an item to the drag data store item list whose kind is Plain Unicode string, whose type string is equal to format, and whose data is the string given by the method's second argument. + </p> + <img src="/images/blue.png" style="width:200px; height:100px" draggable="customValue2" id="target1"/> + <br /><br /> + <input type="text" id="target2" style="border:2px green solid; width:200px; height:50px"></input> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/types-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/types-manual.html new file mode 100644 index 0000000000..1730c4bc73 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/types-manual.html @@ -0,0 +1,72 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: types attribute returns a DOMStringList</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/> + <meta name="assert" content="types attribute returns a DOMStringList"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DropEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + var types = evt.dataTransfer.types; + if(('[object DOMStringList]' == types)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + else + { + LogTestResult("FAIL"); + } + } + + EVENT = "drop"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DropEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: types attribute returns a DOMStringList</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Select the text inside the red box + <li> Drag and drop it in the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#datatransfer + </p> + <p> + The types attribute must return a live DOMStringList. + </p> + <div style="border:2px red solid; width:200px; height:50px">SampleText</div> + <br /><br /> + <input type="text" id="target" style="border:2px green solid; width:200px; height:50px"></input> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransferitem-interface/getAsString-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransferitem-interface/getAsString-manual.html new file mode 100644 index 0000000000..c328f0031b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransferitem-interface/getAsString-manual.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>DataTransferItem Test: getAsString()</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<p><input type="text" value="dragcharacters" style="border:2px blue solid; width:200px; height: 100px;"/></p> +<p><input id="container" type="text" style="border:2px green solid; width:200px; height: 100px;"/></p> + +<p>Select all characters in blue box and drag to green box then drop on the green box</p> + +<script> + +setup({explicit_done : true, explicit_timeout : true}); + +let container = document.getElementById("container"); + +on_event(container, "drop", evt => { + let item = evt.dataTransfer.items[0]; + + test(() => { + let file1 = item.getAsFile(); + assert_equals(file1, null); + }, "Check if DataTransferItem.getAsFile return null if drag data item kind is not File"); + + let data; + item.getAsString(str => { + data = str; + }); + setTimeout(() => { + test(() => { + assert_equals(data, "dragcharacters"); + }, "Check if DataTransferItem.getAsString return the dragged string"); + done(); + }, 0); +}); + +</script> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dragevent-interface/dragevent-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dragevent-interface/dragevent-manual.html new file mode 100644 index 0000000000..e4d754e459 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dragevent-interface/dragevent-manual.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: DragEvent</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#dndevents'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #drag { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='drag' draggable>blue text</div> + <div id='drop' dropzone='copy string:text/plain'></div> + <div id='log'> </div> + + <script> + var drag, element; + var Events = ['ondragstart', 'ondrag', 'ondragover', 'ondragenter', 'ondragleave', 'ondrop', 'ondragend']; + + setup(function() { + drag = document.querySelector('#drag'); + element = document.createElement('div'); + }, {explicit_done: true, explicit_timeout: true}); + + for(var i=0; i< Events.length; i++) { + test(function() { + assert_true(Events[i] in document, 'Check ' + Events[i] + ' in document'); + }, 'Check ' + Events[i] + ' in document'); + } + + test(function() { + assert_inherits(element, 'ondragstart', 'Check if have ondragstart attribute'); + }, 'Check if have ondragstart attribute'); + + test(function() { + assert_inherits(element, 'ondrag', 'Check if have ondrag attribute'); + }, 'Check if have ondrag attribute'); + + test(function() { + assert_inherits(element, 'ondragenter', 'Check if have ondragenter attribute'); + }, 'Check if have ondragenter attribute'); + + test(function() { + assert_inherits(element, 'ondragleave', 'Check if have dragleave attribute'); + }, 'Check if have dragleave attribute'); + + test(function() { + assert_inherits(element, 'ondragover', 'Check if have dragover attribute'); + }, 'Check if have dragover attribute'); + + test(function() { + assert_inherits(element, 'ondrop', 'Check if have ondrop attribute'); + }, 'Check if have ondrop attribute'); + + test(function() { + assert_inherits(element, 'ondragend', 'Check if have ondragend attribute'); + }, 'Check if have ondragend attribute'); + + on_event(drag, 'dragstart', function(event) { + test(function() { + assert_equals(event.type, 'dragstart', 'Check if the dragstart event captured'); + }, 'Check if the dragstart event captured'); + }); + + on_event(drag, 'dragenter', function(event) { + test(function() { + assert_equals(event.type, 'dragenter', 'Check if the dragenter event captured'); + }, 'Check if the dragenter event captured'); + }); + + on_event(drag, 'dragend', function(event) { + test(function() { + assert_equals(event.type, 'dragend', 'Check if the dragend event captured'); + }, 'Check if the dragend event captured'); + done(); + }); + + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-draggable-attribute/draggable-enumerated-ascii-case-insensitive.html b/testing/web-platform/tests/html/editing/dnd/the-draggable-attribute/draggable-enumerated-ascii-case-insensitive.html new file mode 100644 index 0000000000..8c33a6c25b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-draggable-attribute/draggable-enumerated-ascii-case-insensitive.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://html.spec.whatwg.org/#the-draggable-attribute"> +<link rel="help" href="https://html.spec.whatwg.org/#enumerated-attribute"> +<meta name="assert" content="@draggable values are ASCII case-insensitive"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<!-- + We use <img> elements here so the invalid value default (auto) can be + distinguished from false through the IDL attribute. Most other elements + return false from the IDL attribute for the auto state too. +--> +<img draggable="false"> +<img draggable="FaLsE"> +<img draggable="falſe"> +<script> +const img = document.querySelectorAll("img"); + +test(() => { + assert_equals(img[0].draggable, false, "lowercase valid"); + assert_equals(img[1].draggable, false, "mixed case valid"); + assert_equals(img[2].draggable, true, "non-ASCII invalid"); +}, "keyword false"); +</script> diff --git a/testing/web-platform/tests/html/editing/dnd/the-draggable-attribute/draggable_attribute.html b/testing/web-platform/tests/html/editing/dnd/the-draggable-attribute/draggable_attribute.html new file mode 100644 index 0000000000..cd9073e105 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-draggable-attribute/draggable_attribute.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: draggable_attribute</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-draggable-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <script src='/html/semantics/interfaces.js'></script> + </head> + + <body> + <div id='log'> </div> + + <script> + elements.forEach(function(a) { + test(function() { + var eElement = document.createElement(a[0]); + assert_inherits(eElement, 'draggable', 'Element ' + a[0] +' should have draggable property'); + }, 'Element ' + a[0] +' should have draggable property'); + }); + + function run_test(element, element_name, exp) { + if (exp) { + assert_true(element.draggable, 'Element ' + element_name +' should be draggable'); + } else { + assert_false(element.draggable, 'Element ' + element_name +' should not be draggable'); + } + } + + function run_idl_test(element, element_name, exp) { + if (exp) { + assert_equals(element.getAttribute('draggable'), 'true', 'Element ' + element_name +' should be draggable'); + } else { + assert_equals(element.getAttribute('draggable'), 'false', 'Element ' + element_name +' should not be draggable'); + } + } + + elements.forEach(function(a) { + + test(function() { + //Default values for elements + //If the element is an img element, or, if the element is an a element with an href content attribute, + //the draggable IDL attribute must return true. + var eElement = document.createElement(a[0]); + switch (a[0]) { + case 'a': + eElement.setAttribute('href', 'http://w3.org'); + run_test(eElement, 'a', true); + break; + case 'img': + run_test(eElement, 'img', true); + break; + default: + run_test(eElement, a[0], false); + } + + //If an element's draggable content attribute has the state true, + //the draggable IDL attribute must return true. + eElement.setAttribute('draggable', 'true'); + run_test(eElement, a[0] + ' draggable=\'true\'', true); + + //If an element's draggable content attribute has the state false, + //the draggable IDL attribute must return false. + eElement.setAttribute('draggable', 'false'); + run_test(eElement, a[0] + ' draggable=\'false\'', false); + + //auto values for elements + //The element's draggable content attribute has the state auto. + //If the element is an img element, or, if the element is an a element with an href content attribute, + //the draggable IDL attribute must return true. + switch (a[0]) { + case 'a': + eElement.setAttribute('href', 'http://w3.org'); + eElement.setAttribute('draggable', 'auto'); + run_test(eElement, 'Element ' + 'a' + ' draggable=\'auto\'', true); + break; + case 'img': + eElement.setAttribute('draggable', 'auto'); + run_test(eElement, 'Element ' + 'img' + ' draggable=\'auto\'', true); + break; + default: + run_test(eElement, 'Element ' + a[0] + ' draggable=\'auto\'', false); + } + + //Foo values for elements + //The element's draggable content attribute value is not enumerated (true, false, auto) but unexpected. + //Fallback to defaults + switch (a[0]) { + case 'a': + eElement.setAttribute('href', 'http://w3.org'); + eElement.setAttribute('draggable', 'foo'); + run_test(eElement, 'Element ' + 'a' + ' draggable=\'foo\'', true); + break; + case 'img': + eElement.setAttribute('draggable', 'foo'); + run_test(eElement, 'Element ' + 'img' + ' draggable=\'foo\'', true); + break; + default: + run_test(eElement, 'Element ' + a[0] + ' draggable=\'foo\'', false); + } + + //An element with a draggable attribute should also have a title attribute + //that names the element for the purpose of non-visual interactions. + eElement.setAttribute('title', 'foo as title value'); + assert_equals(typeof eElement.title, 'string', '<' + a[0] + '> draggable block has title attribute'); + + //If the draggable IDL attribute is set to the value false, + //the draggable content attribute must be set to the literal value false. + eElement.draggable = false; + run_idl_test(eElement, a[0] + '.getAttribute(\'draggable\') is \'false\'', false); + + //If the draggable IDL attribute is set to the value true, + //the draggable content attribute must be set to the literal value true. + eElement.draggable = true; + run_idl_test(eElement, a[0] + '.getAttribute(\'draggable\') is \'true\'', true); + }, 'Element ' + a[0] +' draggable attribute test'); + + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute.html new file mode 100644 index 0000000000..feb73eccfe --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <meta name="flags" content="may"> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + </head> + + <body> + <div id='log'> </div> + + <script> + var drop_element; + + setup(function() { drop_element = document.createElement('div'); }); + + test(function() { + //Empty values for elements + drop_element.dropzone = ''; + assert_not_equals(drop_element.dropzone, undefined, 'div.dropzone should not be undefined if it\'s been set'); + }, 'div.dropzone should not be undefined if it\'s been set'); + + test(function() { + drop_element.dropzone = null; + assert_not_equals(drop_element.dropzone, null, 'div.dropzone should not be null'); + }, 'div.dropzone should not be null'); + + test(function() { + //The dropzone IDL attribute must reflect the content attribute of the same name. + drop_element.setAttribute('dropzone', 'copy file:image/png file:image/gif file:image/jpeg'); + assert_equals(drop_element.dropzone, 'copy file:image/png file:image/gif file:image/jpeg', 'div dropzone idl attribute must reflect the content attribute of the same name'); + }, 'div dropzone idl attribute must reflect the content attribute of the same name'); + + test(function() { + //The dropzone content attribute is set to the literal value when the idl attribute value is set. + drop_element.dropzone = 'copy file:image/png file:image/gif file:image/jpeg'; + assert_equals(drop_element.getAttribute('dropzone'), 'copy file:image/png file:image/gif file:image/jpeg', 'div dropzone content attribute is set to the literal value'); + }, 'div dropzone content attribute is set to the literal value'); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_file_type-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_file_type-manual.html new file mode 100644 index 0000000000..9027559dc2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_file_type-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_data_item_file_type</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 160px; + height: 160px; + padding: 20px; + color: white; + } + img { + margin: 20px auto; + } + </style> + </head> + + <body> + <img src='/images/blue.png' alt='blue image' /> + <div>Save the blue image (image/png) above to your desktop, drag the image from desktop to the blue text to rectangular box in browser.</div> + <div id='drop' dropzone='copy file:image/png'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + var item = event.dataTransfer.items[0]; + test(function() { + assert_equals(item.type, 'image/png', 'data item type is "image/png"'); + }, 'data item type is "image/png"'); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_kind_file-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_kind_file-manual.html new file mode 100644 index 0000000000..7a77c12414 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_kind_file-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_data_item_kind_file</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 160px; + height: 160px; + padding: 20px; + color: white; + } + img { + margin: 20px auto; + } + </style> + </head> + + <body> + <img src='/images/blue.png' alt='blue image' /> + <div>Save the blue image (image/png) above to your desktop, drag the image from desktop to the blue text to rectangular box in browser.</div> + <div id='drop' dropzone='copy file:image/png'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + var item = event.dataTransfer.items[0]; + test(function() { + assert_equals(item.kind, 'file', 'data item kind is file'); + }, 'data item kind is file'); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_kind_string-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_kind_string-manual.html new file mode 100644 index 0000000000..b8a22e613b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_kind_string-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_data_item_kind_string</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='copy string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + var item = event.dataTransfer.items[0]; + test(function() { + assert_equals(item.kind, 'string', 'data item kind is string'); + }, 'data item kind is string'); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_string_type-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_string_type-manual.html new file mode 100644 index 0000000000..7a5dccf4e2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_data_item_string_type-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_data_item_string_type</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='copy string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + var item = event.dataTransfer.items[0]; + test(function() { + assert_equals(item.type, 'text/plain', 'data item type is "text/plain"'); + }, 'data item type is "text/plain"'); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_inputbox_element-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_inputbox_element-manual.html new file mode 100644 index 0000000000..f80604afa2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_inputbox_element-manual.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_inputbox_element</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + input { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select all the inputbox text then drag to rectangular box.</div> + <input draggable='true' type='text' value='hello world'></input> + <div id='drop' dropzone='move string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'move', 'dropzone content attribute value is "move"'); + }, 'dropzone content attribute value is "move"'); + + test(function() { + var item = event.dataTransfer.items[0]; + assert_equals(event.dataTransfer.getData(item.type), 'hello world', 'The dropped string value is the inputbox text you selected.'); + }, 'The dropped string value is the inputbox text you selected.'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_inputbox_element_dbcs-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_inputbox_element_dbcs-manual.html new file mode 100644 index 0000000000..a7f8ad1aa7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_inputbox_element_dbcs-manual.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_inputbox_element_dbcs</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + input { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select all the inputbox DBCS (Double Byte Character Set) text then drag to rectangular box.</div> + <input draggable='true' type='text' value='您好，互联网。'></input> + <div id='drop' dropzone='move string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + var item = item = event.dataTransfer.items[0]; + assert_equals(event.dataTransfer.getData(item.type), '您好，互联网。', 'The dropped string value is the inputbox text you selected.'); + }, 'The dropped string value is the inputbox text you selected.'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_link_element-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_link_element-manual.html new file mode 100644 index 0000000000..c6e5756ad6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_link_element-manual.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_element_link</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + div { margin: 20px 0px;} + </style> + </head> + + <body> + <div>Select and drag the all the text of link below to rectangular box.</div> + <a href="http://w3.org" title="World Wide Web Consortium">w3.org</a> + <div id='drop' dropzone='link string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'link', 'dropzone content attribute value is "link"'); + }, 'dropzone content attribute value is "link"'); + + test(function() { + var item = item = event.dataTransfer.items[0]; + assert_equals(event.dataTransfer.getData(item.type), 'w3.org', 'The dropped link value is "w3.org"'); + }, 'The dropped link value is "w3.org"'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_COpy-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_COpy-manual.html new file mode 100644 index 0000000000..17ec7a36a3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_COpy-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_case_insensitive_COpy</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='COpy string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'copy', 'dropzone content attribute value is case insensitive_COpy'); + }, 'dropzone content attribute value is case insensitive_COpy'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_STRING-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_STRING-manual.html new file mode 100644 index 0000000000..f118ba00bc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_STRING-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_case_insensitive_STRING</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='copy STRING:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'copy', 'dropzone content attribute value is case insensitive_STRING'); + }, 'dropzone content attribute value is case insensitive_STRING'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_String_-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_String_-manual.html new file mode 100644 index 0000000000..9b84803806 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_String_-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_case_insensitive_String</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='link String:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'link', 'dropzone content attribute value is case insensitive_String'); + }, 'dropzone content attribute value is case insensitive_String'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_linK-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_linK-manual.html new file mode 100644 index 0000000000..e4364db735 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_case_insensitive_linK-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_case_insensitive_linK</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='liNK string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'link', 'dropzone content attribute value is case insensitive_linK'); + }, 'dropzone content attribute value is case insensitive_linK'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_copy-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_copy-manual.html new file mode 100644 index 0000000000..dcc7c97acd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_copy-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_copy</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='copy string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'copy', 'dropzone content attribute value is "copy"'); + }, 'dropzone content attribute value is "copy"'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_foo-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_foo-manual.html new file mode 100644 index 0000000000..f9606f1b9f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_foo-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_foo</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='foo string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'copy', 'dropzone content attribute value is "copy" if it\'s not one of three feedback values (copy, move, and link) specified'); + }, 'dropzone content attribute value is "copy" if it\'s not one of three feedback values (copy, move, and link) specified'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_link-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_link-manual.html new file mode 100644 index 0000000000..a4ba819656 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_link-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_link</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='link string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'link', 'dropzone content attribute value is "link"'); + }, 'dropzone content attribute value is "link"'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_move-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_move-manual.html new file mode 100644 index 0000000000..dfad88ba61 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_move-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_move</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='move string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'move', 'dropzone content attribute value is "move"'); + }, 'dropzone content attribute value is "move"'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_multiple_values_foo_bar_move-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_multiple_values_foo_bar_move-manual.html new file mode 100644 index 0000000000..3243774c93 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_multiple_values_foo_bar_move-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_multiple_values_foo_bar_move</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='foo bar move string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'move', 'dropzone content attribute value is the first matched value of "foo bar move"'); + }, 'dropzone content attribute value is the first matched value of "foo bar move"'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_multiple_values_foo_link-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_multiple_values_foo_link-manual.html new file mode 100644 index 0000000000..fd9e23d03a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_multiple_values_foo_link-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_multiple_values_foo_link</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='foo link string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'link', 'dropzone content attribute value is the first matched value of "foo link"'); + }, 'dropzone content attribute value is the first matched value of "foo link"'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_multiple_values_move_copy-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_multiple_values_move_copy-manual.html new file mode 100644 index 0000000000..50ea9369f2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_multiple_values_move_copy-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_multiple_values_move_copy</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='move copy string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'move', 'dropzone content attribute value is the first matched value of "move copy"'); + }, 'dropzone content attribute value is the first matched value of "move copy"'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_not_specified-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_not_specified-manual.html new file mode 100644 index 0000000000..152c30022b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_not_specified-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_not_specified</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='string:text/plain'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'copy', 'dropzone content attribute value is "copy" if it\'s not specified'); + }, 'dropzone content attribute value is "copy" if it\'s not specified'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_unordered_unique_space_separated-manual.html b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_unordered_unique_space_separated-manual.html new file mode 100644 index 0000000000..24c5b032ab --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-dropzone-attribute/dropzone_attribute_value_unordered_unique_space_separated-manual.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_value_unordered_unique_space_separated</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-dropzone-attribute'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #select { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='select' draggable>blue text</div> + <div id='drop' dropzone='string:text/plain copy'></div> + <div id='log'> </div> + + <script> + var drop; + setup(function() { + drop = document.querySelector('#drop'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drop, 'drop', function(event) { + + test(function() { + assert_equals(event.dataTransfer.dropEffect, 'copy', 'unordered_unique_space_separated "string:text/plain copy", drop effect is copy'); + }, 'dropzone content attribute value is unordered_unique_space_separated "string:text/plain copy", drop effect is copy'); + test(function() { + item = event.dataTransfer.items[0]; + assert_equals(item.kind, 'string', 'unordered_unique_space_separated "string:text/plain copy", data item kind is string'); + }, 'dropzone content attribute value is unordered_unique_space_separated "string:text/plain copy", data item kind is string'); + test(function() { + item = event.dataTransfer.items[0]; + assert_equals(item.type, 'text/plain', 'dropzone content attribute value is unordered_unique_space_separated "string:text/plain copy", data item type is "text/plain"'); + }, 'dropzone content attribute value is unordered_unique_space_separated "string:text/plain copy", data item type is "text/plain"'); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/editing-0/autocapitalization/autocapitalize.html b/testing/web-platform/tests/html/editing/editing-0/autocapitalization/autocapitalize.html new file mode 100644 index 0000000000..49ee14329c --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/autocapitalization/autocapitalize.html @@ -0,0 +1,688 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization"> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + +test(function() { + assert_true('autocapitalize' in document.createElement('input')); +}, "Test that the autocapitalize is available on HTMLInputElement.") + +test(function() { + assert_true('autocapitalize' in document.createElement('textarea')); +}, "Test that the autocapitalize is available on HTMLTextAreaElement.") + +test(function() { + assert_true('autocapitalize' in document.createElement('div')); +}, "Test that the autocapitalize is available on div.") + +test(function() { + var elements = [ document.createElement('input'), + document.createElement('textarea'), + document.createElement('div') ]; + + elements.forEach(function(e) { + e.autocapitalize = 'on'; + assert_equals(e.autocapitalize, 'sentences'); + + e.autocapitalize = 'off'; + assert_equals(e.autocapitalize, 'none'); + }); +}, "Test deprecated values of autocapitalize."); + +test(function() { + var elements = [ document.createElement('input'), + document.createElement('textarea'), + document.createElement('div') ]; + var knownValues = [ 'none', 'characters', 'words', 'sentences' ]; + + elements.forEach(function(e) { + // Default value. + assert_equals(e.autocapitalize, ''); + + // Empty value. + e.autocapitalize = ''; + assert_equals(e.autocapitalize, ''); + assert_equals(e.getAttribute('autocapitalize'), ''); + e.setAttribute('autocapitalize', ''); + assert_equals(e.autocapitalize, ''); + assert_equals(e.getAttribute('autocapitalize'), ''); + assert_equals(e.autocapitalize, ''); + + // Invalid value. + e.autocapitalize = 'foo'; + assert_equals(e.autocapitalize, 'sentences'); + assert_equals(e.getAttribute('autocapitalize'), 'foo'); + e.setAttribute('autocapitalize', 'bar'); + assert_equals(e.autocapitalize, 'sentences'); + assert_equals(e.getAttribute('autocapitalize'), 'bar'); + + // Default value. + e.removeAttribute('autocapitalize'); + assert_equals(e.autocapitalize, ''); + assert_equals(e.getAttribute('autocapitalize'), null); + + // Case insensitive. + e.setAttribute('autocapitalize', 'NoNe'); + assert_equals(e.autocapitalize, 'none'); + assert_equals(e.getAttribute('autocapitalize'), 'NoNe'); + e.autocapitalize = 'WORDS'; + assert_equals(e.autocapitalize, 'words'); + assert_equals(e.getAttribute('autocapitalize'), 'WORDS'); + + knownValues.forEach(function(value) { + e.setAttribute('autocapitalize', value); + assert_equals(e.autocapitalize, value); + assert_equals(e.getAttribute('autocapitalize'), value); + + e.removeAttribute('autocapitalize'); + + e.autocapitalize = value; + assert_equals(e.autocapitalize, value); + assert_equals(e.getAttribute('autocapitalize'), value); + + e.removeAttribute('autocapitalize'); + }); + }); +}, "Test reflection of autocapitalize."); + +test(function() { +var testData = [ 'text', + 'search', + 'email', + 'url', + 'tel', + 'number', + 'date', + 'color', + 'password' ]; + + testData.forEach(function(data) { + const input = document.createElement('input'); + input.type = data; + assert_equals(input.autocapitalize, ''); + + // Verify that wrapping the input element in a form doesn't change the + // defaults. + const form = document.createElement('form'); + form.appendChild(input); + assert_equals(input.autocapitalize, ''); + }); +}, "Test that the IDL attribute returns the empty string if the content " ++ "attribute is not set.") + +test(function() { + const testData = [ + { + formValue: null, + formElementValue: null, + inheritedResult: '', + uninheritedResult: '', + }, + { + formValue: null, + formElementValue: '', + inheritedResult: '', + uninheritedResult: '', + }, + { + formValue: null, + formElementValue: 'on', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: null, + formElementValue: 'off', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: null, + formElementValue: 'none', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: null, + formElementValue: 'characters', + inheritedResult: 'characters', + uninheritedResult: 'characters', + }, + { + formValue: null, + formElementValue: 'words', + inheritedResult: 'words', + uninheritedResult: 'words', + }, + { + formValue: null, + formElementValue: 'sentences', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: null, + formElementValue: 'foo', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: '', + formElementValue: null, + inheritedResult: '', + uninheritedResult: '', + }, + { + formValue: '', + formElementValue: '', + inheritedResult: '', + uninheritedResult: '', + }, + { + formValue: '', + formElementValue: 'on', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: '', + formElementValue: 'off', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: '', + formElementValue: 'none', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: '', + formElementValue: 'characters', + inheritedResult: 'characters', + uninheritedResult: 'characters', + }, + { + formValue: '', + formElementValue: 'words', + inheritedResult: 'words', + uninheritedResult: 'words', + }, + { + formValue: '', + formElementValue: 'sentences', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: '', + formElementValue: 'foo', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'on', + formElementValue: null, + inheritedResult: 'sentences', + uninheritedResult: '', + }, + { + formValue: 'on', + formElementValue: '', + inheritedResult: 'sentences', + uninheritedResult: '', + }, + { + formValue: 'on', + formElementValue: 'on', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'on', + formElementValue: 'off', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'on', + formElementValue: 'none', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'on', + formElementValue: 'characters', + inheritedResult: 'characters', + uninheritedResult: 'characters', + }, + { + formValue: 'on', + formElementValue: 'words', + inheritedResult: 'words', + uninheritedResult: 'words', + }, + { + formValue: 'on', + formElementValue: 'sentences', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'on', + formElementValue: 'foo', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'off', + formElementValue: null, + inheritedResult: 'none', + uninheritedResult: '', + }, + { + formValue: 'off', + formElementValue: '', + inheritedResult: 'none', + uninheritedResult: '', + }, + { + formValue: 'off', + formElementValue: 'on', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'off', + formElementValue: 'off', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'off', + formElementValue: 'none', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'off', + formElementValue: 'characters', + inheritedResult: 'characters', + uninheritedResult: 'characters', + }, + { + formValue: 'off', + formElementValue: 'words', + inheritedResult: 'words', + uninheritedResult: 'words', + }, + { + formValue: 'off', + formElementValue: 'sentences', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'off', + formElementValue: 'foo', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'none', + formElementValue: null, + inheritedResult: 'none', + uninheritedResult: '', + }, + { + formValue: 'none', + formElementValue: '', + inheritedResult: 'none', + uninheritedResult: '', + }, + { + formValue: 'none', + formElementValue: 'on', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'none', + formElementValue: 'off', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'none', + formElementValue: 'none', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'none', + formElementValue: 'characters', + inheritedResult: 'characters', + uninheritedResult: 'characters', + }, + { + formValue: 'none', + formElementValue: 'words', + inheritedResult: 'words', + uninheritedResult: 'words', + }, + { + formValue: 'none', + formElementValue: 'sentences', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'none', + formElementValue: 'foo', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'characters', + formElementValue: null, + inheritedResult: 'characters', + uninheritedResult: '', + }, + { + formValue: 'characters', + formElementValue: '', + inheritedResult: 'characters', + uninheritedResult: '', + }, + { + formValue: 'characters', + formElementValue: 'on', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'characters', + formElementValue: 'off', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'characters', + formElementValue: 'none', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'characters', + formElementValue: 'characters', + inheritedResult: 'characters', + uninheritedResult: 'characters', + }, + { + formValue: 'characters', + formElementValue: 'words', + inheritedResult: 'words', + uninheritedResult: 'words', + }, + { + formValue: 'characters', + formElementValue: 'sentences', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'characters', + formElementValue: 'foo', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'words', + formElementValue: null, + inheritedResult: 'words', + uninheritedResult: '', + }, + { + formValue: 'words', + formElementValue: '', + inheritedResult: 'words', + uninheritedResult: '', + }, + { + formValue: 'words', + formElementValue: 'on', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'words', + formElementValue: 'off', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'words', + formElementValue: 'none', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'words', + formElementValue: 'characters', + inheritedResult: 'characters', + uninheritedResult: 'characters', + }, + { + formValue: 'words', + formElementValue: 'words', + inheritedResult: 'words', + uninheritedResult: 'words', + }, + { + formValue: 'words', + formElementValue: 'sentences', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'words', + formElementValue: 'foo', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'sentences', + formElementValue: null, + inheritedResult: 'sentences', + uninheritedResult: '', + }, + { + formValue: 'sentences', + formElementValue: '', + inheritedResult: 'sentences', + uninheritedResult: '', + }, + { + formValue: 'sentences', + formElementValue: 'on', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'sentences', + formElementValue: 'off', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'sentences', + formElementValue: 'none', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'sentences', + formElementValue: 'characters', + inheritedResult: 'characters', + uninheritedResult: 'characters', + }, + { + formValue: 'sentences', + formElementValue: 'words', + inheritedResult: 'words', + uninheritedResult: 'words', + }, + { + formValue: 'sentences', + formElementValue: 'sentences', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'sentences', + formElementValue: 'foo', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'foo', + formElementValue: null, + inheritedResult: 'sentences', + uninheritedResult: '', + }, + { + formValue: 'foo', + formElementValue: '', + inheritedResult: 'sentences', + uninheritedResult: '', + }, + { + formValue: 'foo', + formElementValue: 'on', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'foo', + formElementValue: 'off', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'foo', + formElementValue: 'none', + inheritedResult: 'none', + uninheritedResult: 'none', + }, + { + formValue: 'foo', + formElementValue: 'characters', + inheritedResult: 'characters', + uninheritedResult: 'characters', + }, + { + formValue: 'foo', + formElementValue: 'words', + inheritedResult: 'words', + uninheritedResult: 'words', + }, + { + formValue: 'foo', + formElementValue: 'sentences', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + { + formValue: 'foo', + formElementValue: 'foo', + inheritedResult: 'sentences', + uninheritedResult: 'sentences', + }, + ]; + + const formElements = [ + {element: 'button', inherits: true}, + {element: 'fieldset', inherits: true}, + {element: 'img', inherits: false}, + {element: 'input', inherits: true}, + {element: 'object', inherits: false}, + {element: 'output', inherits: true}, + {element: 'select', inherits: true}, + {element: 'textarea', inherits: true}, + ]; + + const form = document.createElement('form'); + form.id = 'form'; + document.body.appendChild(form); + + testData.forEach(data => { + form.removeAttribute('autocapitalize'); + + if (data.formValue !== null) { + form.setAttribute('autocapitalize', data.formValue); + } + + formElements.forEach(elementData => { + const element = document.createElement(elementData.element); + form.appendChild(element); + + const element2 = document.createElement(elementData.element); + element2.setAttribute('form', 'form'); + document.body.appendChild(element2); + + if (data.formElementValue !== null) { + element.setAttribute('autocapitalize', data.formElementValue); + element2.setAttribute('autocapitalize', data.formElementValue); + } + + const descriptionSuffix = 'with "' + data.formValue + + '" and form element with "'+ data.formElementValue + '"'; + + if (elementData.inherits) { + assert_equals(element.autocapitalize, data.inheritedResult, + `${elementData.element} element with form parent ` + + `${descriptionSuffix}`); + assert_equals(element2.autocapitalize, data.inheritedResult, + `${elementData.element} element with form owner attribute` + + ` set ${descriptionSuffix}`); + } else { + assert_equals(element.autocapitalize, data.uninheritedResult, + `${elementData.element} element with form parent ` + + `${descriptionSuffix}`); + assert_equals(element2.autocapitalize, data.uninheritedResult, + `${elementData.element} element with form owner attribute` + + `set ${descriptionSuffix}`); + } + }); + }); +}, "Test inheriting values from a form.") + +test(function() { + const testData = [ 'text', + 'search', + 'email', + 'url', + 'tel', + 'number', + 'date', + 'color', + 'password' ]; + + testData.forEach(function(data) { + const form = document.createElement('form'); + form.setAttribute('autocapitalize', 'sentences'); + const input = document.createElement('input'); + input.setAttribute('type', data); + form.appendChild(input); + + assert_equals(input.autocapitalize, 'sentences'); + }); +}, "Verify that even input types that are never autocapitalized support the " ++ "IDL interface.") + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/editing-0/contenteditable/contentEditable-slotted-inherit.html b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contentEditable-slotted-inherit.html new file mode 100644 index 0000000000..42da515920 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contentEditable-slotted-inherit.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>contentEditable inherit from light tree parent</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel=help href="https://html.spec.whatwg.org/multipage/#contenteditable"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<p>You should see the word PASS two times below and no FAIL.</p> +<div id="host1" contenteditable><div>FAILPASS</div></div> +<div id="host2" contenteditable><div>FAILPASS</div></div> +<script> + test(() => { + const root = host1.attachShadow({mode:"open"}); + root.innerHTML = "<slot></slot>"; + const text = host1.firstChild.firstChild; + const selection = window.getSelection(); + selection.collapse(text, 0); + selection.extend(text, 4); + host1.focus(); + document.execCommand("delete"); + host1.blur(); + assert_equals(text.data, "PASS", "Text should be PASS after FAIL is deleted"); + }, "Slotted child of contenteditable host should be editable - slot direct child of shadow root"); + + test(() => { + const root = host2.attachShadow({mode:"open"}); + root.innerHTML = "<div><slot></slot></div>"; + const text = host2.firstChild.firstChild; + const selection = window.getSelection(); + selection.collapse(text, 0); + selection.extend(text, 4); + host2.focus(); + document.execCommand("delete"); + host2.blur(); + assert_equals(text.data, "PASS", "Text should be PASS after FAIL is deleted"); + }, "Slotted child of contenteditable host should be editable - slot wrapped in shadow tree ancestor"); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-enumerated-ascii-case-insensitive.html b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-enumerated-ascii-case-insensitive.html new file mode 100644 index 0000000000..0125b95667 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-enumerated-ascii-case-insensitive.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-contenteditable"> +<link rel="help" href="https://html.spec.whatwg.org/#enumerated-attribute"> +<meta name="assert" content="@contenteditable values are ASCII case-insensitive"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<script> +function testValue(value, isValid) { + const valueLower = value.toLowerCase(); + + test(() => { + const el = document.createElement('div'); + if (valueLower !== "inherit") { + el.setAttribute('contenteditable', value); + } + assert_equals(el.contentEditable, isValid ? valueLower : "inherit"); + }, `IDL attribute getter for attribute value "${value}"`); + + test(() => { + const el = document.createElement('div'); + if (isValid) { + el.contentEditable = value; + assert_equals(el.getAttribute('contenteditable'), valueLower === "inherit" ? null : valueLower); + } else { + assert_throws_dom("SyntaxError", () => { + el.contentEditable = value; + }); + } + }, `IDL attribute setter for value "${value}"`); +} + +const valid = ["true", "false", "inherit", "plaintext-only"]; // "inherit" is treated specially +const invalid = ["foobar", "falſe", "plaıntext-only", "plaİntext-only"]; + +for (const value of valid) { + testValue(value, true); + testValue(value.toUpperCase(), true); +} + +for (const value of invalid) { + testValue(value, false); +} +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-overflow-height-ref.html b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-overflow-height-ref.html new file mode 100644 index 0000000000..e88e904f96 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-overflow-height-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>CSS test reference</title> +<style> + [contenteditable] { + outline: 1px solid black; + outline-offset: -1px; + } +</style> +<div contenteditable></div> diff --git a/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-overflow-height.html b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-overflow-height.html new file mode 100644 index 0000000000..8470b02c2b --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-overflow-height.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>Overflow still allows contenteditable elements to have height</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1681375"> +<link rel="match" href="contenteditable-overflow-height-ref.html"> +<style> + [contenteditable] { + outline: 1px solid black; + outline-offset: -1px; + overflow: hidden; + } +</style> +<div contenteditable></div> diff --git a/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-with-empty-block-ref.html b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-with-empty-block-ref.html new file mode 100644 index 0000000000..fe68571013 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-with-empty-block-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Test reference</title> +<div> + Foo + <div></div> + Bar +</div> diff --git a/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-with-empty-block.html b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-with-empty-block.html new file mode 100644 index 0000000000..7bcc611072 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/contenteditable/contenteditable-with-empty-block.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>contenteditable doesn't cause inner empty blocks to grow.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1628770"> +<link rel="match" href="contenteditable-with-empty-block-ref.html"> +<div contenteditable> + Foo + <div></div> + Bar +</div> diff --git a/testing/web-platform/tests/html/editing/editing-0/contenteditable/selection-in-contentEditable-at-turning-designMode-on-off.tentative.html b/testing/web-platform/tests/html/editing/editing-0/contenteditable/selection-in-contentEditable-at-turning-designMode-on-off.tentative.html new file mode 100644 index 0000000000..4ef9d9003d --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/contenteditable/selection-in-contentEditable-at-turning-designMode-on-off.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>selection in contenteditable should not be changed when designMode is turned on/off</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<iframe srcdoc="<body contenteditable>abc</body>"></iframe> +<script> + const test_load = async_test("Selection in contenteditable shouldn't be reinitialized when changing designMode"); + window.addEventListener("load", test_load.step_func_done(() => { + let iframe = document.querySelector("iframe"); + let iframeSelection = iframe.contentDocument.getSelection(); + iframe.focus(); + iframeSelection.collapse(iframe.contentDocument.body, 1); + function summariseRange(range) { + if (!range) { + return "null"; + } + return `(${range.startContainer.nodeName}, ${range.startOffset}) - (${range.endContainer.nodeName}, ${range.endOffset})`; + } + let maybeNormalizedRangeSummary = summariseRange(iframeSelection.getRangeAt(0)); + assert_in_array(maybeNormalizedRangeSummary, ["(BODY, 1) - (BODY, 1)", "(#text, 3) - (#text, 3)"], + "Selection collapsed at end of <body> can be either as-is or normalized to the end of the text node"); + iframe.contentDocument.designMode = "on"; + assert_equals(summariseRange(iframeSelection.getRangeAt(0)), maybeNormalizedRangeSummary, + "Turning designMode on at load event shouldn't change selection in contenteditable"); + iframe.contentDocument.designMode = "off"; + assert_equals(summariseRange(iframeSelection.getRangeAt(0)), maybeNormalizedRangeSummary, + "Turning designMode off at load event shouldn't change selection in contenteditable"); + })); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/contenteditable/user-interaction-editing-contenteditable.html b/testing/web-platform/tests/html/editing/editing-0/contenteditable/user-interaction-editing-contenteditable.html new file mode 100644 index 0000000000..19b21863e0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/contenteditable/user-interaction-editing-contenteditable.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> + <head> + <title>Editing: contentEditable attribute test</title> + <link rel="author" title="Baidu" href="mailto: guopengcheng@baidu.com" /> + <link + rel="help" + href="https://html.spec.whatwg.org/multipage/#contenteditable" + /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <div id="log"></div> + </head> + <body> + <script> + function testContentEditable(variationFunc, title, expectIsContentEditable, expectContentEditable) { + test(() => { + const div = document.createElement("div"); + variationFunc(div); + assert_equals(div.isContentEditable, expectIsContentEditable, 'isContentEditable'); + assert_equals(div.contentEditable, expectContentEditable, 'contentEditable'); + }, title); + } + + testContentEditable(el => { + }, "no contenteditable attribute", false, "inherit"); + + testContentEditable(el => { + el.setAttribute("contenteditable", ""); + }, "empty contentEditable attribute", true, "true"); + + testContentEditable(el => { + el.contentEditable = "true"; + }, 'set contentEditable = "true"', true, "true"); + + testContentEditable(el => { + el.contentEditable = "false"; + }, 'set contentEditable = "false"', false, "false"); + + testContentEditable(el => { + const parent = document.createElement("div"); + parent.appendChild(el); + parent.contentEditable = "true"; + }, 'set parent element contentEditable = "true"', true, "inherit"); + + testContentEditable(el => { + const parent = document.createElement("div"); + parent.appendChild(el); + parent.contentEditable = "false"; + }, 'set parent element contentEditable = "false"', false, "inherit"); + + testContentEditable(el => { + el.contentEditable = "true"; + el.removeAttribute("contenteditable"); + }, 'set contentEditable = "true" and then remove contenteditable attribute', false, "inherit"); + + testContentEditable(el => { + el.setAttribute("contenteditable", "plaintext-only"); + }, "contentEditable=plaintext-only attribute", true, "plaintext-only"); + + testContentEditable(el => { + const parent = document.createElement("div"); + parent.appendChild(el); + parent.contentEditable = "plaintext-only"; + }, 'set parent element contentEditable = "plaintext-only"', true, "inherit"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/original-id.json b/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/original-id.json new file mode 100644 index 0000000000..8b7c4b838c --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/original-id.json @@ -0,0 +1 @@ +{"original_id":"making-entire-documents-editable:-the-designmode-idl-attribute"}
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/user-interaction-editing-designMode-svg.svg b/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/user-interaction-editing-designMode-svg.svg new file mode 100644 index 0000000000..fd2fde0fbe --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/user-interaction-editing-designMode-svg.svg @@ -0,0 +1,34 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg:svg xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/1999/xhtml" + width="100%" height="100%" viewBox="0 0 800 600"> + <svg:title>Editing: designMode attribute test</svg:title> + <head> + <link rel="author" title="Baidu" href="mailto: guopengcheng@baidu.com"/> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#making-entire-documents-editable:-the-designmode-idl-attribute"/> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <div id="log"></div> + </head> + <body> + <script type="text/javascript"><![CDATA[ + test(function() { + assert_equals(document.designMode, "off", "check for designMode value"); + assert_throws_dom("InvalidStateError", function() { document.queryCommandSupported("delete") }); + assert_throws_dom("InvalidStateError", function() { document.queryCommandEnabled("delete") }); + }, "initial designMode attribute"); + document.designMode="on"; + test(function() { + assert_equals(document.designMode, "on", "check for designMode value"); + assert_throws_dom("InvalidStateError", function() { document.queryCommandSupported("delete") }); + assert_throws_dom("InvalidStateError", function() { document.queryCommandEnabled("delete") }); + }, "set designMode = \"on\""); + document.designMode="off"; + test(function() { + assert_equals(document.designMode,"off", "check for designMode value"); + assert_throws_dom("InvalidStateError", function() { document.queryCommandSupported("delete") }); + assert_throws_dom("InvalidStateError", function() { document.queryCommandEnabled("delete") }); + }, "set designMode = \"off\""); + ]]></script> + </body> +</svg:svg> diff --git a/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/user-interaction-editing-designMode-xml.xml b/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/user-interaction-editing-designMode-xml.xml new file mode 100644 index 0000000000..f26cd56453 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/user-interaction-editing-designMode-xml.xml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Editing: designMode attribute test</title> + <link rel="author" title="Baidu" href="mailto: guopengcheng@baidu.com"/> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#making-entire-documents-editable:-the-designmode-idl-attribute"/> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <div id="log"></div> + </head> + <body> + <script type="text/javascript"><![CDATA[ + test(function() { + assert_equals(document.designMode, "off", "check for designMode value"); + assert_throws_dom("InvalidStateError", function() { document.queryCommandSupported("delete") }); + assert_throws_dom("InvalidStateError", function() { document.queryCommandEnabled("delete") }); + }, "initial designMode attribute"); + document.designMode="on"; + test(function() { + assert_equals(document.designMode, "on", "check for designMode value"); + assert_throws_dom("InvalidStateError", function() { document.queryCommandSupported("delete") }); + assert_throws_dom("InvalidStateError", function() { document.queryCommandEnabled("delete") }); + }, "set designMode = \"on\""); + document.designMode="off"; + test(function() { + assert_equals(document.designMode,"off", "check for designMode value"); + assert_throws_dom("InvalidStateError", function() { document.queryCommandSupported("delete") }); + assert_throws_dom("InvalidStateError", function() { document.queryCommandEnabled("delete") }); + }, "set designMode = \"off\""); + ]]></script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/user-interaction-editing-designMode.html b/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/user-interaction-editing-designMode.html new file mode 100644 index 0000000000..79d2dc8ba0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/making-entire-documents-editable-the-designmode-idl-attribute/user-interaction-editing-designMode.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>Editing: designMode attribute test</title> + <link rel="author" title="Baidu" href="mailto: guopengcheng@baidu.com"/> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#making-entire-documents-editable:-the-designmode-idl-attribute"/> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <div id="log"></div> + </head> + <body> + <script type="text/javascript"> + test(function() { + assert_equals(document.designMode, "off", "check for designMode value"); + assert_true(document.queryCommandSupported("delete")); + assert_false(document.queryCommandEnabled("delete")); + }, "initial designMode attribute"); + document.designMode="on"; + test(function() { + assert_equals(document.designMode, "on", "check for designMode value"); + assert_true(document.queryCommandSupported("delete")); + assert_true(document.queryCommandEnabled("delete")); + }, "set designMode = \"on\""); + document.designMode="off"; + test(function() { + assert_equals(document.designMode,"off", "check for designMode value"); + assert_true(document.queryCommandSupported("delete")); + assert_false(document.queryCommandEnabled("delete")); + }, "set designMode = \"off\""); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/references/spelling-markers-001-ref.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/references/spelling-markers-001-ref.html new file mode 100644 index 0000000000..68dcc54702 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/references/spelling-markers-001-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Reference file for spellcheck tests</title> + +<div>This test passes if there is no visual marker indicating the spellinnnnnggg mistake in this sentence, and fails otherwise.</div> + diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spellcheck-enumerated-ascii-case-insensitive.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spellcheck-enumerated-ascii-case-insensitive.html new file mode 100644 index 0000000000..9f00f1dff1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spellcheck-enumerated-ascii-case-insensitive.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-spellcheck"> +<link rel="help" href="https://html.spec.whatwg.org/#enumerated-attribute"> +<meta name="assert" content="@spellcheck values are ASCII case-insensitive"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<!-- + While <div> and <span> aren’t defined as “checkable for the purposes of this + feature”, this has no effect on the attribute’s state. + + We wrap the <span> elements under test with <div> elements so the checking + enabled algorithm stops at step 4 (ancestor content attribute), before steps + relying on user-agent-defined behavior (see [#concept-spellcheck-default]). +--> +<div spellcheck="true"><span spellcheck="false"></span></div> +<div spellcheck="true"><span spellcheck="FaLsE"></span></div> +<div spellcheck="true"><span spellcheck="falſe"></span></div> +<script> +const span = document.querySelectorAll("span"); + +test(() => { + assert_equals(span[0].spellcheck, false, "lowercase valid"); + assert_equals(span[1].spellcheck, false, "mixed case valid"); + assert_equals(span[2].spellcheck, true, "non-ASCII invalid"); +}, "keyword false"); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-001.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-001.html new file mode 100644 index 0000000000..7dd891374b --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Turning off spellcheck on editing hosts</title> +<link rel=match href="references/spelling-markers-001-ref.html"> +<link rel=help href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> +<meta name=assert content="Spellchecking stops applying to editing hosts when they become non editable"> + +<div id="test" contenteditable=true>This test passes if there is no visual marker indicating the spellinnnnnggg mistake in this sentence, and fails otherwise.</div> + +<script> + var test = document.getElementById("test"); + // Force spellcheck by focus and then blur + test.focus(); + test.blur(); + test.removeAttribute("contenteditable"); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-002.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-002.html new file mode 100644 index 0000000000..b361b93040 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Turning off spellcheck on editable elements</title> +<link rel=match href="references/spelling-markers-001-ref.html"> +<link rel=help href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> +<meta name=assert content="Spellchecking stops applying to editable elements when they become non editable"> + +<div id="test" contenteditable=true>This test passes if there is no visual marker indicating the <span id=child>spellinnnnnggg</span> mistake in this sentence, and fails otherwise.</div> + +<script> + var test = document.getElementById("test"); + // Force spellcheck by focus and then blur + test.focus(); + test.blur(); + var child = document.getElementById("child"); + child.setAttribute("contenteditable", false); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-003.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-003.html new file mode 100644 index 0000000000..d1a6aa3a9b --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Turning off spellcheck on editing hosts while keeping them editable</title> +<link rel=match href="references/spelling-markers-001-ref.html"> +<link rel=help href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> +<meta name=assert content="Spellchecking stops applying to editing hosts when the spellcheck attribute becomes false"> + +<div id="test" spellcheck=true contenteditable=true>This test passes if there is no visual marker indicating the spellinnnnnggg mistake in this sentence, and fails otherwise.</div> + +<script> + var test = document.getElementById("test"); + // Force spellcheck by focus and then blur + test.focus(); + test.blur(); + test.setAttribute("spellcheck", false); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-004.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-004.html new file mode 100644 index 0000000000..c718e77bb8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Turning off spellcheck on editable elements while keeping them editable</title> +<link rel=match href="references/spelling-markers-001-ref.html"> +<link rel=help href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> +<meta name=assert content="Spellchecking stops applying to editable elements when the spellcheck attribute becomes false"> + +<div id="test" spellcheck=true contenteditable=true>This test passes if there is no visual marker indicating the <span id=child>spellinnnnnggg</span> mistake in this sentence, and fails otherwise.</div> + +<script> + var test = document.getElementById("test"); + // Force spellcheck by focus then blur + test.focus(); + test.blur(); + var child = document.getElementById("child"); + child.setAttribute("spellcheck", false); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-005.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-005.html new file mode 100644 index 0000000000..705ee7b67f --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-005.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Turning off spellcheck on editable elements via an ancestor</title> +<link rel=match href="references/spelling-markers-001-ref.html"> +<link rel=help href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> +<meta name=assert content="Spellchecking stops applying to editable elements when the spellcheck attribute becomes false on an ancestor"> + +<div id="test" contenteditable=true>This test passes if there is no visual marker indicating the <span id=child><span>spellinnnnnggg</span></span> mistake in this sentence, and fails otherwise.</div> + +<script> + var test = document.getElementById("test"); + // Force spellcheck by focus then blur + test.focus(); + test.blur(); + var child = document.getElementById("child"); + child.setAttribute("spellcheck", false); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-006.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-006.html new file mode 100644 index 0000000000..512d473f13 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-006.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Turning off spellcheck via an ancestor of the editing host</title> +<link rel=match href="references/spelling-markers-001-ref.html"> +<link rel=help href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> +<meta name=assert content="Spellchecking stops applying when the spellcheck attribute becomes false on an ancestor, without restrcting the search to the nearest editing host"> + +<div id=parent> + <div id=test contenteditable=true>This test passes if there is no visual marker indicating the spellinnnnnggg mistake in this sentence, and fails otherwise.</div> +</div> + +<script> + var test = document.getElementById("test"); + // Force spellcheck by focus then blur + test.focus(); + test.blur(); + var p = document.getElementById("parent"); + p.setAttribute("spellcheck", false); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-007.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-007.html new file mode 100644 index 0000000000..31b3755f3a --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-007.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Turning off spellcheck by making textareas readonly</title> +<link rel=match href="references/spelling-markers-001-ref.html"> +<link rel=help href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> +<meta name=assert content="Spellchecking stops applying to textareas when they become readonly"> + +<style> +#test { + /* Match the ref */ + all: initial; + width: 100%; + display: block; + font-family: inherit; +} +</style> + +<textarea id=test>This test passes if there is no visual marker indicating the spellinnnnnggg mistake in this sentence, and fails otherwise.</textarea> + +<script> + var test = document.getElementById("test"); + // Force spellcheck by focus then blur + test.focus(); + test.blur(); + test.setAttribute("readonly", true); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-008.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-008.html new file mode 100644 index 0000000000..f891acff42 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-008.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Turning off spellcheck by making textareas disabled</title> +<link rel=match href="references/spelling-markers-001-ref.html"> +<link rel=help href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> +<meta name=assert content="Spellchecking stops applying to textareas when they become disabled"> + +<style> +#test { + /* Match the ref */ + all: initial; + width: 100%; + display: block; + font-family: inherit; +} +</style> + +<textarea id=test>This test passes if there is no visual marker indicating the spellinnnnnggg mistake in this sentence, and fails otherwise.</textarea> + +<script> + var test = document.getElementById("test"); + // Force spellcheck by focus then blur + test.focus(); + test.blur(); + test.setAttribute("disabled", true); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-009.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-009.html new file mode 100644 index 0000000000..96eb87d2f4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-009.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Turning off spellcheck by making input elements readonly</title> +<link rel=match href="references/spelling-markers-001-ref.html"> +<link rel=help href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> +<meta name=assert content="Spellchecking stops applying to input elements when they become readonly"> + +<style> +#test { + /* Match the ref */ + all: initial; + width: 100%; + display: block; + font-family: inherit; +} +</style> + +<input type=text id=test value="This test passes if there is no visual marker indicating the spellinnnnnggg mistake in this sentence, and fails otherwise."> + +<script> + var test = document.getElementById("test"); + // Force spellcheck by focus then blur + test.focus(); + test.blur(); + test.setAttribute("readonly", true); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-010.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-010.html new file mode 100644 index 0000000000..16275f10e9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-010.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Turning off spellcheck by making input elements disabled</title> +<link rel=match href="references/spelling-markers-001-ref.html"> +<link rel=help href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking"> +<meta name=assert content="Spellchecking stops applying to input elements when they become disabled"> + +<style> +#test { + /* Match the ref */ + all: initial; + width: 100%; + display: block; + font-family: inherit; +} +</style> + +<input type=text id=test value="This test passes if there is no visual marker indicating the spellinnnnnggg mistake in this sentence, and fails otherwise."> + +<script> + var test = document.getElementById("test"); + // Force spellcheck by focus then blur + test.focus(); + test.blur(); + test.setAttribute("disabled", true); +</script> diff --git a/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/user-interaction-editing-spellcheck.html b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/user-interaction-editing-spellcheck.html new file mode 100644 index 0000000000..c8bdaafdb8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/editing-0/spelling-and-grammar-checking/user-interaction-editing-spellcheck.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Editing: spellcheck attribute test</title> + <link rel="author" title="Baidu" href="mailto: guopengcheng@baidu.com"/> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#spelling-and-grammar-checking"/> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + <textarea id="testText1" spellcheck="true">Test textarea with spellcheck is true</textarea> + <textarea id="testText2" spellcheck="false">Test textarea with spellcheck is false</textarea> + <script type="text/javascript"> + test(function() { + assert_true(document.getElementById("testText1").spellcheck, "check for testText1 spellcheck value"); + assert_false(document.getElementById("testText2").spellcheck, "check for testText2 spellcheck value"); + }, "Getting spellcheck IDL attribute"); + test(function() { + var testElement = document.createElement("testElement"); + testElement.contentEditable = true; + testElement.spellcheck = true; + assert_true(testElement.spellcheck, "check for testElement.spellcheck value"); + assert_equals(testElement.getAttribute("spellcheck"), "true"); + }, "Setting spellcheck IDL attribute to true"); + test(function() { + var testElement = document.createElement("testElement"); + testElement.contentEditable = true; + testElement.spellcheck = false; + assert_false(testElement.spellcheck, "check for testText2 spellcheck value"); + assert_equals(testElement.getAttribute("spellcheck"), "false"); + }, "Setting spellcheck IDL attribute to false"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/focus/sequential-focus-navigation-and-the-tabindex-attribute/focus-tabindex-event.html b/testing/web-platform/tests/html/editing/focus/sequential-focus-navigation-and-the-tabindex-attribute/focus-tabindex-event.html new file mode 100644 index 0000000000..55619661ac --- /dev/null +++ b/testing/web-platform/tests/html/editing/focus/sequential-focus-navigation-and-the-tabindex-attribute/focus-tabindex-event.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>HTML Test: tabindex - focus, click</title> +<link rel="author" title="Intel" href="www.intel.com/"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<h2>Test steps</h2> +<p>Focus on the button below by "Tab" key, then press "Enter" key</p> + +<p><button type="button">Test tabIndex</button></p> + +<script> + +setup({explicit_done: true}); +setup({explicit_timeout: true}); + +promise_test(async t => { + const button = document.querySelector("button"); + on_event(button, "click", () => { + test(() => { + assert_true(document.activeElement == button, "Focus on the button by Tab key"); + }, "Check if click event will be fired when press the 'enter' key while the element is focused"); + done(); + }); + + window.focus(); + document.activeElement?.blur(); + getSelection().collapse(document.querySelector("p"), 0); + const enterKey = '\uE007'; + await test_driver.send_keys(button, enterKey); +}); + +</script> diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/beforematch-element-fragment-navigation.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/beforematch-element-fragment-navigation.html new file mode 100644 index 0000000000..812a55f318 --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/beforematch-element-fragment-navigation.html @@ -0,0 +1,200 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org"> +<link rel="help" href="https://github.com/WICG/display-locking"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id=parentid> + <div id=hiddenid> + <div id=childid>hello</div> + </div> +</div> + +<div id=spacer style="height:4000px">spacer</div> + +<script> +test(() => { + window.location.hash = ''; + hiddenid.hidden = 'until-found'; + window.location.hash = '#hiddenid'; + assert_false(hiddenid.hasAttribute('hidden')); +}, 'Verifies that fragment navigation reveals hidden=until-found elements.'); + +test(() => { + window.location.hash = ''; + parentid.hidden = 'until-found'; + hiddenid.hidden = 'until-found'; + childid.hidden = 'until-found'; + window.location.hash = 'childid'; + assert_false(parentid.hasAttribute('hidden'), 'parentid should not have the hidden attribute.'); + assert_false(hiddenid.hasAttribute('hidden'), 'hiddenid should not have the hidden attribute.'); + assert_false(childid.hasAttribute('hidden'), 'childid should not have the hidden attribute.'); +}, 'Verifies that fragment navigation reveals all parent hidden=until-found elements.'); + +test(() => { + window.location.hash = ''; + hiddenid.hidden = 'until-found'; + let beforematchFiredOnParent = false; + let beforematchFiredOnHidden = false; + let beforematchFiredOnChild = false; + parentid.onbeforematch = () => beforematchFiredOnParent = true; + hiddenid.onbeforematch = () => beforematchFiredOnHidden = true; + childid.onbeforematch = () => beforematchFiredOnChild = true; + + window.location.hash = '#childid'; + assert_true(beforematchFiredOnParent, 'beforematch should have been fired on parentid.'); + assert_true(beforematchFiredOnHidden, 'beforematch should have been fired on hiddenid.'); + assert_false(beforematchFiredOnChild, 'beforematch should not have been fired on childid.'); +}, 'Verifies that the beforematch event is fired synchronously and bubbles after fragment navigation.'); + +test(t => { + window.location.hash = ''; + window.scrollTo(0, 0); + assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.'); + + const target = document.createElement('div'); + target.textContent = 'target'; + target.id = 'target'; + target.hidden = 'until-found'; + document.body.appendChild(target); + const spacer = document.createElement('div'); + spacer.style.height = '4000px'; + t.add_cleanup(() => { + target.remove(); + spacer.remove(); + }); + + let beforematchCalled = false; + target.onbeforematch = () => { + assert_equals(window.pageYOffset, 0, 'scrolling should happen after beforematch is fired.'); + beforematchCalled = true; + // Move the target down the page. + document.body.appendChild(spacer); + target.remove(); + document.body.appendChild(target); + }; + + window.location.hash = '#target'; + assert_true(beforematchCalled, 'The beforematch event should have been fired.'); + + const offsetAfterMatch = window.pageYOffset; + assert_not_equals(offsetAfterMatch, 0, 'Fragment navigation should have scrolled down the page to the target element.'); + target.scrollIntoView(); + assert_equals(offsetAfterMatch, window.pageYOffset, `The scroll after beforematch should be the same as scrolling directly to the element's final destination.`); +}, 'Verifies that when a beforematch event handler moves a matching element, we scroll to its final location.'); + +test(t => { + window.location.hash = ''; + const foo = document.createElement('div'); + foo.textContent = 'foo'; + foo.id = 'foo'; + foo.hidden = 'until-found'; + document.body.appendChild(foo); + + const bar = document.createElement('div'); + bar.textContent = 'bar'; + bar.id = 'bar'; + bar.hidden = 'until-found'; + document.body.appendChild(bar); + + t.add_cleanup(() => { + foo.remove(); + bar.remove(); + }); + + let beforematchFiredOnFoo = false; + foo.onbeforematch = () => beforematchFiredOnFoo = true; + let beforematchFiredOnBar = false; + bar.onbeforematch = () => beforematchFiredOnBar = true; + + window.location.hash = '#bar'; + + assert_false(beforematchFiredOnFoo, 'foo was not navigated to, so it should not get the beforematch event.'); + assert_true(beforematchFiredOnBar, 'bar was navigated to, so it should get the beforematch event.'); + assert_true(window.pageYOffset > 0, 'the page should be scrolled down to bar.'); +}, 'Verifies that the beforematch event is fired on the right element when there are multiple hidden=until-found elements.'); + +test(t => { + window.location.hash = ''; + window.scrollTo(0, 0); + assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.'); + + const div = document.createElement('div'); + div.textContent = 'detach'; + div.id = 'detach'; + div.hidden = 'until-found'; + document.body.appendChild(div); + t.add_cleanup(() => div.remove()); + + let beforematchCalled = false; + div.onbeforematch = () => { + div.remove(); + beforematchCalled = true; + }; + + window.location.hash = '#detach'; + + assert_true(beforematchCalled, 'beforematch should be called when window.location.hash is set to #detach.'); + assert_true(window.pageYOffset === 0, 'The page should not be scrolled down to where #detach used to be.'); +}, 'Verifies that no scrolling occurs when an element selected by the fragment identifier is detached by the beforematch event handler.'); + +test(t => { + window.location.hash = ''; + window.scrollTo(0, 0); + assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.'); + + const div = document.createElement('div'); + div.textContent = 'displaynone'; + div.id = 'displaynone'; + div.hidden = 'until-found'; + document.body.appendChild(div); + t.add_cleanup(() => div.remove()); + + let beforematchCalled = false; + div.addEventListener('beforematch', () => { + div.style = 'display: none'; + beforematchCalled = true; + }); + + window.location.hash = '#displaynone'; + + assert_true(beforematchCalled, 'beforematch should be called when window.location.hash is set to #displaynone.'); + assert_true(window.pageYOffset === 0, 'The page should not be scrolled down to where #displaynone used to be.'); +}, `No scrolling should occur when the beforematch event handler sets the target element's style to display: none.`); + +test(t => { + window.location.hash = ''; + window.scrollTo(0, 0); + assert_true(window.pageYOffset === 0, 'Scroll should reset at the beginning of the test.'); + + const div = document.createElement('div'); + div.textContent = 'visibilityhidden'; + div.id = 'visibilityhidden'; + div.hidden = 'until-found'; + document.body.appendChild(div); + t.add_cleanup(() => div.remove()); + + let beforematchCalled = false; + div.addEventListener('beforematch', () => { + div.style = 'visibility: hidden'; + beforematchCalled = true; + }); + + window.location.hash = '#visibilityhidden'; + + assert_true(beforematchCalled, 'beforematch should be called when window.location.hash is set to #visibilityhidden.'); + assert_true(window.pageYOffset !== 0, 'The page should be scrolled down to where #visibilityhidden is.'); +}, `Scrolling should still occur when beforematch sets visiblity:hidden on the target element.`); + +test(t => { + window.location.hash = ''; + const div = document.createElement('div'); + div.id = 'target'; + div.textContent = 'target'; + document.body.appendChild(div); + t.add_cleanup(() => div.remove()); + div.addEventListener('beforematch', t.unreached_func('beforematch should not be fired without hidden=until-found.')); + window.location.hash = '#target'; +}, 'Verifies that the beforematch event is not fired on elements without hidden=until-found.'); +</script> diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1-ref.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1-ref.html new file mode 100644 index 0000000000..7346ce919d --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<title>The hidden attribute</title> +<link rel=author title=Ms2ger href=mailto:Ms2ger@gmail.com> +<p>This line should be visible. diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1a.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1a.html new file mode 100644 index 0000000000..036bfc88b5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1a.html @@ -0,0 +1,8 @@ +<!doctype html> +<title>The hidden attribute</title> +<link rel=match href=hidden-1-ref.html> +<link rel=author title=Ms2ger href=mailto:Ms2ger@gmail.com> +<link rel=help href=https://html.spec.whatwg.org/multipage/#the-hidden-attribute> +<link rel=help href=https://html.spec.whatwg.org/multipage/#hidden-elements> +<p>This line should be visible. +<p hidden>This line should not be visible. diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1b.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1b.html new file mode 100644 index 0000000000..3d8b05d349 --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1b.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>The hidden attribute</title> +<link rel=match href=hidden-1-ref.html> +<link rel=author title=Ms2ger href=mailto:Ms2ger@gmail.com> +<link rel=help href=https://html.spec.whatwg.org/multipage/#the-hidden-attribute> +<link rel=help href=https://html.spec.whatwg.org/multipage/#hidden-elements> +<style> +p { display: none; } +[hidden] { display: block; } +</style> +<p hidden>This line should be visible. diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1c.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1c.html new file mode 100644 index 0000000000..8a8cc63c48 --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1c.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>The hidden attribute</title> +<link rel=match href=hidden-1-ref.html> +<link rel=author title=Ms2ger href=mailto:Ms2ger@gmail.com> +<link rel=help href=https://html.spec.whatwg.org/multipage/#the-hidden-attribute> +<link rel=help href=https://html.spec.whatwg.org/multipage/#hidden-elements> +<p hidden>This line should be visible. +<p>This line should not be visible. +<script> +document.getElementsByTagName("p")[0].hidden = false; +document.getElementsByTagName("p")[1].hidden = true; +</script> diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1d.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1d.html new file mode 100644 index 0000000000..e759148f22 --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1d.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>The hidden attribute</title> +<link rel=match href=hidden-1-ref.html> +<link rel=author title=Ms2ger href=mailto:Ms2ger@gmail.com> +<link rel=help href=https://html.spec.whatwg.org/multipage/#the-hidden-attribute> +<link rel=help href=https://html.spec.whatwg.org/multipage/#hidden-elements> +<p hidden>This line should be visible. +<p>This line should not be visible. +<script> +document.getElementsByTagName("p")[0].removeAttribute("hidden"); +document.getElementsByTagName("p")[1].setAttribute("hidden", ""); +</script> diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1e.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1e.html new file mode 100644 index 0000000000..2f3f3c617e --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1e.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>The hidden attribute</title> +<link rel=match href=hidden-1-ref.html> +<link rel=author title=Ms2ger href=mailto:Ms2ger@gmail.com> +<link rel=help href=https://html.spec.whatwg.org/multipage/#the-hidden-attribute> +<link rel=help href=https://html.spec.whatwg.org/multipage/#hidden-elements> +<style> +p { display: block; } +</style> +<p hidden>This line should be visible. diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1f.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1f.html new file mode 100644 index 0000000000..6df30a6143 --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1f.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>The hidden attribute</title> +<link rel=match href=hidden-1-ref.html> +<link rel=author title=Ms2ger href=mailto:Ms2ger@gmail.com> +<link rel=help href=https://html.spec.whatwg.org/multipage/#the-hidden-attribute> +<link rel=help href=https://html.spec.whatwg.org/multipage/#hidden-elements> +<style> +p { display: block !important; } +</style> +<p hidden>This line should be visible. diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1g.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1g.html new file mode 100644 index 0000000000..849d61fe1e --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-1g.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>The hidden attribute</title> +<link rel=match href=hidden-1-ref.html> +<link rel=author title=Ms2ger href=mailto:Ms2ger@gmail.com> +<link rel=help href=https://html.spec.whatwg.org/multipage/#the-hidden-attribute> +<link rel=help href=https://html.spec.whatwg.org/multipage/#hidden-elements> +<p>This line should be visible. +<p hidden=hidden>This line should not be visible. +<p hidden=blue>This line should not be visible. +<p hidden=true>This line should not be visible. +<p hidden=false>This line should not be visible. diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-2-ref.svg b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-2-ref.svg new file mode 100644 index 0000000000..10931bfcab --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-2-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"> +<metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="author" title="Ms2ger" + href="mailto:Ms2ger@gmail.com"/> +</metadata> +<rect height="20" width="20"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-2.svg b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-2.svg new file mode 100644 index 0000000000..a5f08f6b27 --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-2.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"> +<metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="hidden-2-ref.svg" /> + <link xmlns="http://www.w3.org/1999/xhtml" rel="author" title="Ms2ger" + href="mailto:Ms2ger@gmail.com"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" + href="https://html.spec.whatwg.org/multipage/#the-hidden-attribute"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" + href="https://html.spec.whatwg.org/multipage/#hidden-elements"/> +</metadata> +<rect hidden="" height="20" width="20"/> +</svg> diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-idl.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-idl.html new file mode 100644 index 0000000000..331b63f93f --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-idl.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/whatwg/html/pull/7475"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div>hello</div> +<script> +const div = document.querySelector('div'); + +function runPropertyTest(assignedValue, expectedValue, expectedAttribute) { + test(() => { + div.hidden = assignedValue; + assert_equals(div.hidden, expectedValue, + `div.hidden = ${JSON.stringify(assignedValue)} should return ${JSON.stringify(expectedValue)}`); + assert_equals(div.getAttribute('hidden'), expectedAttribute, + `div.hidden = ${JSON.stringify(assignedValue)} should set the hidden attribute to ${JSON.stringify(expectedAttribute)}`); + }, `div.hidden = ${Number.isNaN(assignedValue) ? 'NaN' : JSON.stringify(assignedValue)}`); +} + +function runAttributeTest(assignedAttribute, expectedValue) { + test(() => { + div.setAttribute('hidden', assignedAttribute); + assert_equals(div.hidden, expectedValue); + }, `div.setAttribute('hidden', ${JSON.stringify(assignedAttribute)}) should make div.hidden return ${JSON.stringify(expectedValue)}`); +} + +runPropertyTest(false, false, null); +runPropertyTest(true, true, ''); +runPropertyTest('foo', true, ''); +runPropertyTest('false', true, ''); +runPropertyTest('', false, null); + +runAttributeTest('false', true); +runAttributeTest('foo', true); + +runPropertyTest('until-found', 'until-found', 'until-found'); +runPropertyTest('UNTIL-FOUND', 'until-found', 'until-found'); +runPropertyTest('UnTiL-FoUnD', 'until-found', 'until-found'); +runPropertyTest('unt\u0131l-found', true, ''); +runPropertyTest('unt\u0130l-found', true, ''); + +runPropertyTest(null, false, null); +runPropertyTest(undefined, false, null); + +runPropertyTest(1, true, ''); +runPropertyTest(0, false, null); +runPropertyTest(NaN, false, null); +</script> diff --git a/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-ua-stylesheet.html b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-ua-stylesheet.html new file mode 100644 index 0000000000..913ecc037c --- /dev/null +++ b/testing/web-platform/tests/html/editing/the-hidden-attribute/hidden-ua-stylesheet.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS"> +<link rel=help href="https://github.com/whatwg/html/pull/7475#issuecomment-1069313217"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id=div>hello world</div> +<table id=table> + <colgroup id=colgroup> + <col id=col></col> + </colgroup> +</table> + +<script> +function testDisplayNone(description) { + test(() => { + assert_equals(getComputedStyle(div).display, 'none', + `${description} should make the div display:none.`); + assert_equals(getComputedStyle(div).contentVisibility, 'visible', + `${description} should not affect the div's content-visibility property.`); + }, description); +} + +function testCVHidden(description) { + test(() => { + assert_equals(getComputedStyle(div).display, 'block', + `${description} should not affect the div's display property.`); + assert_equals(getComputedStyle(div).contentVisibility, 'hidden', + `${description} should make the div content-visibility:hidden.`); + }, description); +} + +function testNormal(description) { + test(() => { + assert_equals(getComputedStyle(div).display, 'block', + `${description} should not affect the div's display property.`); + assert_equals(getComputedStyle(div).contentVisibility, 'visible', + `${description} should not affect the div's content-visibility property.`); + }, description); +} + +test(() => { + div.removeAttribute('hidden'); + testNormal(`div.removeAttribute('hidden')`); + + div.setAttribute('hidden', ''); + testDisplayNone(`div.setAttribute('hidden', '')`); + + div.setAttribute('hidden', 'asdf'); + testDisplayNone(`div.setAttribute('hidden', 'asdf')`); + + div.setAttribute('hidden', 'until-found'); + testCVHidden(`div.setAttribute('hidden', 'until-found')`); + + div.setAttribute('hidden', 'UNTIL-FOUND'); + testCVHidden(`div.setAttribute('hidden', 'UNTIL-FOUND')`); + + div.setAttribute('hidden', 'UnTiL-FoUnD'); + testCVHidden(`div.setAttribute('hidden', 'UnTiL-FoUnD')`); + + div.setAttribute('hidden', '0'); + testDisplayNone(`div.setAttribute('hidden', '0')`); +}); +</script> |
