diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/html/editing/dnd/dropzone | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/editing/dnd/dropzone')
10 files changed, 292 insertions, 0 deletions
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> |