diff options
Diffstat (limited to 'testing/web-platform/tests/html/editing/dnd/platform')
124 files changed, 5060 insertions, 0 deletions
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 000000000..c3375d3d8 --- /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>
\ No newline at end of file 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 000000000..4136e2be7 --- /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>
\ No newline at end of file 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 000000000..85416da52 --- /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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-001.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-001.html new file mode 100644 index 000000000..ed275943c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-001.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-002.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-002.html new file mode 100644 index 000000000..3ca09e8b5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-002.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-003.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-003.html new file mode 100644 index 000000000..6d67ac1fe --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-003.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-004.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-004.html new file mode 100644 index 000000000..49337e2b8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-004.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-005.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-005.html new file mode 100644 index 000000000..3f6b479af --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-005.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/close-drag-006.html b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-006.html new file mode 100644 index 000000000..4e00a8472 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/close-drag-006.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>
\ No newline at end of file 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 000000000..953927f91 --- /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 000000000..9cca00077 --- /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 000000000..a1a5c4918 --- /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 000000000..640ad37ca --- /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 000000000..9aa78f25a --- /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 000000000..61eb8ec30 --- /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 000000000..c2abfaa31 --- /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 000000000..53b843467 --- /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 000000000..4f0953932 --- /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 000000000..bcc408e80 --- /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 000000000..15f78849f --- /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.html b/testing/web-platform/tests/html/editing/dnd/platform/drag-keypress.html new file mode 100644 index 000000000..adb543ad4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/drag-keypress.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/drag-link.html b/testing/web-platform/tests/html/editing/dnd/platform/drag-link.html new file mode 100644 index 000000000..c308d504f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/drag-link.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/drag-to-title.html b/testing/web-platform/tests/html/editing/dnd/platform/drag-to-title.html new file mode 100644 index 000000000..b7fe31c13 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/drag-to-title.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>
\ No newline at end of file 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 000000000..62115c7cf --- /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 000000000..b3db18077 --- /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>
\ No newline at end of file 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 000000000..af9840e8c --- /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>
\ No newline at end of file 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 000000000..608026f20 --- /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>
\ No newline at end of file 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 000000000..6283c24ce --- /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>
\ No newline at end of file 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 000000000..b915865d4 --- /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>
\ No newline at end of file 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 000000000..876f0b58a --- /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>
\ No newline at end of file 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 000000000..0a527b499 --- /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>
\ No newline at end of file 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 000000000..4b1806ac0 --- /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>
\ No newline at end of file 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 000000000..85f20badf --- /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>
\ No newline at end of file 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 000000000..c66c4681a --- /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>
\ No newline at end of file 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 000000000..efb5a5b79 --- /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>
\ No newline at end of file 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 000000000..83e6fa7f4 --- /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>
\ No newline at end of file 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 000000000..1d79b85ef --- /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>
\ No newline at end of file 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 000000000..b2de74169 --- /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>
\ No newline at end of file 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 000000000..ce1fec808 --- /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>
\ No newline at end of file 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 000000000..c5ec66488 --- /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>
\ No newline at end of file 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 000000000..61b73ba84 --- /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>
\ No newline at end of file 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 000000000..bcf65ce9e --- /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>
\ No newline at end of file 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 000000000..31dd82e51 --- /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 000000000..94258e44a --- /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 000000000..1fc6ef84d --- /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>
\ No newline at end of file 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 000000000..f28191d46 --- /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>
\ No newline at end of file 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 000000000..6e3926c9d --- /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>
\ No newline at end of file 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 000000000..6fdb79aa9 --- /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>
\ No newline at end of file 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 000000000..d9af799a5 --- /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>
\ No newline at end of file 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 000000000..c57b25dcb --- /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>
\ No newline at end of file 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 000000000..e30416b4f --- /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>
\ No newline at end of file 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 000000000..fc2616251 --- /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 000000000..6c8db5df2 --- /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 000000000..dd4128ed9 --- /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 000000000..fc2616251 --- /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 000000000..13340f442 --- /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>
\ No newline at end of file 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 000000000..3f91fb5fe --- /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>
\ No newline at end of file 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 000000000..6366dd4dc --- /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>
\ No newline at end of file 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 000000000..27d9126a9 --- /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>
\ No newline at end of file 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 000000000..352e831dc --- /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>
\ No newline at end of file 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 000000000..d5281a4b4 --- /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>
\ No newline at end of file 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 000000000..3e19f10de --- /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>
\ No newline at end of file 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 000000000..ca3e83c24 --- /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>
\ No newline at end of file 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 000000000..f5c7bab06 --- /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>
\ No newline at end of file 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 000000000..a80336032 --- /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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/modifiers/releasemodifiersdrag.html b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/releasemodifiersdrag.html new file mode 100644 index 000000000..3468d0a53 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/modifiers/releasemodifiersdrag.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>
\ No newline at end of file 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 000000000..678a2139a --- /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>
\ No newline at end of file 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 000000000..7053fc9aa --- /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>
\ No newline at end of file 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 000000000..810ade95f --- /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 000000000..cac76acf4 --- /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 000000000..ff61224a3 --- /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>
\ No newline at end of file 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 000000000..5899f7266 --- /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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/click-to-activate.js b/testing/web-platform/tests/html/editing/dnd/platform/plugin/click-to-activate.js new file mode 100644 index 000000000..2ea2f19c2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/click-to-activate.js @@ -0,0 +1 @@ +document.write(plugincode);
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/dragndrop.swf b/testing/web-platform/tests/html/editing/dnd/platform/plugin/dragndrop.swf Binary files differnew file mode 100644 index 000000000..6b49d46c5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/dragndrop.swf diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/dragndropleavedeactivate.swf b/testing/web-platform/tests/html/editing/dnd/platform/plugin/dragndropleavedeactivate.swf Binary files differnew file mode 100644 index 000000000..be486248d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/dragndropleavedeactivate.swf diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-001.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-001.html new file mode 100644 index 000000000..62dc5847a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop in Flash</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The orange square should disappear, and the blue square should turn yellow.</p> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-002.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-002.html new file mode 100644 index 000000000..caa5f1a9d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop alternating between Flash and page</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the pink square onto the blue square and release it. The drag placeholder should disappear (either when releasing, or when passing the black square), and the mouse cursor should return to normal.</li> + <li>Without moving your mouse outside the black square, drag the orange square onto the blue square and release it. The orange square should disappear, and the blue square should turn yellow. Fail if the orange square does not immediately respond to the drag attempt.</li> + <li>Drag the pink square onto the yellow square and release it. The drag placeholder should disappear, and the mouse cursor should return to normal. Fail if the pink square does not immediately respond to the drag attempt.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-003.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-003.html new file mode 100644 index 000000000..15c672e62 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>Incomplete drag and drop in Flash</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <!-- Test is based on expected behaviour where the mouseup is sent to the plugin because a drag was in operation. --> + <p>Drag the orange square until the mouse is outside the black square, then release it. Move the mouse over the blue square. Fail if the orange square continues to follow the mouse.</p> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-004.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-004.html new file mode 100644 index 000000000..430eae42b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-004.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop alternating between incompleted Flash drag and page</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the orange square until the mouse is outside the right side of the black square but the edge of the orange square can still be seen, then release it.</li> + <li>Without passing over the black square again, move the mouse to the pink square.</li> + <li>Drag the pink square onto the blue square and release it. The drag placeholder should disappear (either when releasing, or when passing the black square), and the mouse cursor should return to normal. Fail if the pink square does not immediately respond to the drag attempt.</li> + <li>Without passing over the black square again, move the mouse to the orange square. Fail if the orange square moves.</li> + <li>Drag the orange square onto the blue square and release it. The orange square should disappear, and the blue square should turn yellow. Fail if the orange square does not immediately respond to the drag attempt.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-005.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-005.html new file mode 100644 index 000000000..cf5343f2a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-005.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop in Flash with Alt+Tab</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the orange square over the blue square.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>Move the mouse around inside the black square. The orange square should continue to follow the mouse.</li> + </ol> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-006.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-006.html new file mode 100644 index 000000000..b77539fa2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-006.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop in Flash with Alt+Tab over page</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the orange square around until the mouse is outside the black square.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>Move the mouse inside the black square. The orange square should continue to follow the mouse.</li> + </ol> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-007.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-007.html new file mode 100644 index 000000000..44a69a4ce --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with Alt+Tab over Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the pink square over the blue square. The mouse cursor should be the no-drop cursor, or the platform's drop-allowed cursor.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>The mouse cursor should be the same cursor as in step 2.</li> + <li>Move the mouse outside the black square. The drag placeholder should follow the mouse (reappearing if it disappeared in step 2).</li> + <li>Release the drag. The drag placeholder should disappear, and the cursor should revert to the default mouse cursor.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-008.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-008.html new file mode 100644 index 000000000..31d3b8d51 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-008.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with right click over Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the pink 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; moving the mouse outside the black square should not cause the drag placeholder to continue following the mouse, and the mouse cursor should revert to default.</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; moving the mouse outside the black square should cause the drag placeholder to continue following the mouse, and the mouse cursor should show as no-drop or drop-allowed.</li> + <li>Fail in either case if the drag placeholder gets stuck temporarily or permanently over the blue square. Fail if an inappropriate right click function begins (eg. context menu opens).</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-009.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-009.html new file mode 100644 index 000000000..4c9cb2cab --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-009.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with right click and release over Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the pink square over the blue square.</li> + <li>Without releasing the drag, click the right mouse button, then release the drag.</li> + <li>Fail if the drag placeholder gets stuck over the blue square.</li> + <li>Move the mouse outside the black square. The mouse cursor should be the default mouse cursor.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-010.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-010.html new file mode 100644 index 000000000..f1f893393 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-010.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with middle click over Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the pink 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; moving the mouse outside the black square should not cause the drag placeholder to continue following the mouse, and the mouse cursor should revert to default.</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; moving the mouse outside the black square should cause the drag placeholder to continue following the mouse, and the mouse cursor should show as no-drop or drop-allowed.</li> + <li>Fail in either case if the drag placeholder gets stuck temporarily or permanently over the blue square. Fail if an inappropriate middle click function begins (eg. paste-and-go).</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-011.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-011.html new file mode 100644 index 000000000..8a5753b0c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-011.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with middle click and release over Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the pink square over the blue square.</li> + <li>Without releasing the drag, click the middle mouse button, then release the drag.</li> + <li>Fail if the drag placeholder gets stuck over the blue square.</li> + <li>Move the mouse outside the black square. The mouse cursor should be the default mouse cursor.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-101.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-101.html new file mode 100644 index 000000000..58d03fde8 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-101.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop in windowless Flash</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <p>Drag the orange square onto the blue square and release it. The orange square should disappear, and the blue square should turn yellow.</p> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-102.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-102.html new file mode 100644 index 000000000..428c191fb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-102.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop alternating between windowless Flash and page</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the pink square onto the blue square and release it. The drag placeholder should disappear (either when releasing, or when passing the black square), and the mouse cursor should return to normal.</li> + <li>Without moving your mouse outside the black square, drag the orange square onto the blue square and release it. The orange square should disappear, and the blue square should turn yellow. Fail if the orange square does not immediately respond to the drag attempt.</li> + <li>Drag the pink square onto the yellow square and release it. The drag placeholder should disappear, and the mouse cursor should return to normal. Fail if the pink square does not immediately respond to the drag attempt.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-103.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-103.html new file mode 100644 index 000000000..2ac8f1df6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-103.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>Incomplete drag and drop in windowless Flash</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <!-- Test is based on expected behaviour of windowless plugin where the mouseup is not sent to the plugin even though a drag was in operation. --> + <p>Drag the orange square until the mouse is outside the black square, then release it. Move the mouse over the blue square. Pass if the orange square follows the mouse.</p> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-104.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-104.html new file mode 100644 index 000000000..9f4a3ec1c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-104.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop alternating between incompleted windowless Flash drag and page</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the orange square until the mouse is outside the right side of the black square but the edge of the orange square can still be seen, then release it.</li> + <li>Without passing over the black square again, move the mouse to the pink square.</li> + <li>Drag the pink square onto the white area inside the black square and release it. The drag placeholder should disappear (either when releasing, or when passing the black square), and the mouse cursor should return to normal. The orange square should jump to the mouse position. Fail if the pink square does not immediately respond to the drag attempt.</li> + <li>The orange square may optionally continue to follow the mouse.</li> + <!-- There are no rules here. Browsers may mask the mouseup event from the plugin (since a dnd operation was in progress), or they may pass the mouseup to the plugin (since the dnd operation has completed). --> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-105.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-105.html new file mode 100644 index 000000000..3b072a423 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-105.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop in windowless Flash with Alt+Tab</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the orange square over the blue square.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>Move the mouse around inside the black square. The orange square should continue to follow the mouse.</li> + </ol> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-106.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-106.html new file mode 100644 index 000000000..f38fd302f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-106.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop in windowless Flash with Alt+Tab over page</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the orange square around until the mouse is outside the black square.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>Move the mouse inside the black square. The orange square should continue to follow the mouse.</li> + </ol> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-107.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-107.html new file mode 100644 index 000000000..972df6884 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-107.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with Alt+Tab over windowless Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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><strong>Note:</strong> Mac has no no-drop cursor.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the pink square over the blue square. The mouse cursor should be the no-drop cursor, or the platform's drop-allowed cursor.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>The mouse cursor should be the same cursor as in step 2.</li> + <li>Move the mouse outside the black square. The drag placeholder should follow the mouse (reappearing if it disappeared in step 2).</li> + <li>Release the drag. The drag placeholder should disappear, and the cursor should revert to the default mouse cursor.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-108.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-108.html new file mode 100644 index 000000000..7a145d060 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-108.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with right click over windowless Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the pink 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; moving the mouse outside the black square should not cause the drag placeholder to continue following the mouse, and the mouse cursor should revert to default.</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; moving the mouse outside the black square should cause the drag placeholder to continue following the mouse, and the mouse cursor should show as no-drop or drop-allowed.</li> + <li>Fail in either case if the drag placeholder gets stuck temporarily or permanently over the blue square. Fail if an inappropriate right click function begins (eg. context menu opens).</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-109.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-109.html new file mode 100644 index 000000000..e28e166d5 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-109.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with right click and release over windowless Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the pink square over the blue square.</li> + <li>Without releasing the drag, click the right mouse button, then release the drag.</li> + <li>Fail if the drag placeholder gets stuck over the blue square.</li> + <li>Move the mouse outside the black square. The mouse cursor should be the default mouse cursor.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-110.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-110.html new file mode 100644 index 000000000..07e6241cf --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-110.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with middle click over windowless Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the pink 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; moving the mouse outside the black square should not cause the drag placeholder to continue following the mouse, and the mouse cursor should revert to default.</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; moving the mouse outside the black square should cause the drag placeholder to continue following the mouse, and the mouse cursor should show as no-drop or drop-allowed.</li> + <li>Fail in either case if the drag placeholder gets stuck temporarily or permanently over the blue square. Fail if an inappropriate middle click function begins (eg. paste-and-go).</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-111.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-111.html new file mode 100644 index 000000000..587c70f24 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-111.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with middle click and release over windowless Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the pink square over the blue square.</li> + <li>Without releasing the drag, click the middle mouse button, then release the drag.</li> + <li>Fail if the drag placeholder gets stuck over the blue square.</li> + <li>Move the mouse outside the black square. The mouse cursor should be the default mouse cursor.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndrop.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-203.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-203.html new file mode 100644 index 000000000..a4d08ecd4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-203.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>Incomplete drag and drop with deactivate in Flash</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <!-- Test is based on expected behaviour where the mouseup is sent to the plugin because a drag was in operation. --> + <p>Drag the orange square until the mouse is outside the black square, then release it. Move the mouse over the blue square. Fail if the orange square continues to follow the mouse.</p> + <script type="text/javascript"> +var plugincode = '<object data="dragndropleavedeactivate.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-204.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-204.html new file mode 100644 index 000000000..4ba76e652 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-204.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with deactivate alternating between incompleted Flash drag and page</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the orange square until the mouse is outside the right side of the black square but the edge of the orange square can still be seen, then release it.</li> + <li>Without passing over the black square again, move the mouse to the pink square.</li> + <li>Drag the pink square onto the blue square and release it. The drag placeholder should disappear (either when releasing, or when passing the black square), and the mouse cursor should return to normal. Fail if the pink square does not immediately respond to the drag attempt.</li> + <li>Without passing over the black square again, move the mouse to the orange square. Fail if the orange square moves.</li> + <li>Drag the orange square onto the blue square and release it. The orange square should disappear, and the blue square should turn yellow. Fail if the orange square does not immediately respond to the drag attempt.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndropleavedeactivate.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-205.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-205.html new file mode 100644 index 000000000..e49add304 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-205.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with deactivate in Flash with Alt+Tab</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the orange square over the blue square.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>Move the mouse around inside the black square. The orange square should not follow the mouse.</li> + <li>Release the mouse button over the white area inside the black square. The orange square should disappear, and the blue square should turn yellow.</li> + </ol> + <script type="text/javascript"> +var plugincode = '<object data="dragndropleavedeactivate.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-206.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-206.html new file mode 100644 index 000000000..b3bae6e48 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-206.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with deactivate in Flash with Alt+Tab over page</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the orange square around until the mouse is outside the black square.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>Move the mouse over the blue square. The orange square should not continue to follow the mouse.</li> + </ol> + <script type="text/javascript"> +var plugincode = '<object data="dragndropleavedeactivate.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-207.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-207.html new file mode 100644 index 000000000..bfb4c4d10 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-207.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with deactivate with Alt+Tab over Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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><strong>Note:</strong> Mac has no no-drop cursor.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the pink square over the blue square. The mouse cursor should be the no-drop cursor, or the platform's drop-allowed cursor.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>The mouse cursor should be the same cursor as in step 2.</li> + <li>Move the mouse outside the black square. The drag placeholder should follow the mouse (reappearing if it disappeared in step 2).</li> + <li>Release the drag. The drag placeholder should disappear, and the cursor should revert to the default mouse cursor.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndropleavedeactivate.swf" type="application/x-shockwave-flash">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-303.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-303.html new file mode 100644 index 000000000..275e207df --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-303.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>Incomplete drag and drop with deactivate in windowless Flash</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <!-- Test is based on expected behaviour of windowless plugin where the mouseup is not sent to the plugin even though a drag was in operation. --> + <p>Drag the orange square until the mouse is outside the black square, then release it. Move the mouse over the blue square. Pass if the orange square follows the mouse.</p> + <script type="text/javascript"> +var plugincode = '<object data="dragndropleavedeactivate.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-304.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-304.html new file mode 100644 index 000000000..a68a8c3fa --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-304.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with deactivate alternating between incompleted windowless Flash drag and page</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Drag the orange square until the mouse is outside the right side of the black square but the edge of the orange square can still be seen, then release it.</li> + <li>Without passing over the black square again, move the mouse to the pink square.</li> + <li>Drag the pink square onto the white area inside the black square and release it. The drag placeholder should disappear (either when releasing, or when passing the black square), and the mouse cursor should return to normal. The orange square should jump to the mouse position. Fail if the pink square does not immediately respond to the drag attempt.</li> + <li>The orange square may optionally continue to follow the mouse.</li> + <!-- There are no rules here. Browsers may mask the mouseup event from the plugin (since a dnd operation was in progress), or they may pass the mouseup to the plugin (since the dnd operation has completed). --> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndropleavedeactivate.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-305.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-305.html new file mode 100644 index 000000000..3a702789a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-305.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with deactivate in windowless Flash with Alt+Tab</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the orange square over the blue square.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>Move the mouse around inside the black square. The orange square should continue to follow the mouse.</li> + </ol> + <script type="text/javascript"> +var plugincode = '<object data="dragndropleavedeactivate.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-306.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-306.html new file mode 100644 index 000000000..a8248bd69 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-306.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with deactivate in windowless Flash with Alt+Tab over page</title> + <style type="text/css"> +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </style> + </head> + <body> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the orange square around until the mouse is outside the black square.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>Move the mouse inside the black square. The orange square should continue to follow the mouse.</li> + </ol> + <script type="text/javascript"> +var plugincode = '<object data="dragndropleavedeactivate.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-307.html b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-307.html new file mode 100644 index 000000000..1def298cc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/plugin-dnd-307.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>Drag and drop with deactivate with Alt+Tab over windowless Flash</title> + <style type="text/css"> +div { + width: 100px; + height: 100px; + background: fuchsia; +} +object { + width: 400px; + height: 400px; + border: 5px solid black; +} + </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> + <noscript><p>Enable JavaScript and reload</p></noscript> + <ol> + <li>Ensure at least one other program is running, with its window maximised.</li> + <li>Drag the pink square over the blue square. The mouse cursor should be the no-drop cursor, or the platform's drop-allowed cursor.</li> + <li>Without releasing the mouse button, use Alt+Tab (or your system's equivalent) to switch to the other program, then back to this one.</li> + <li>The mouse cursor should be the same cursor as in step 2.</li> + <li>Move the mouse outside the black square. The drag placeholder should follow the mouse (reappearing if it disappeared in step 2).</li> + <li>Release the drag. The drag placeholder should disappear, and the cursor should revert to the default mouse cursor.</li> + </ol> + <div draggable="true"></div> + <script type="text/javascript"> +var plugincode = '<object data="dragndropleavedeactivate.swf" type="application/x-shockwave-flash"><param name="wmode" value="opaque">Flash plugin is required for this test.</object>'; + </script> + <script type="text/javascript" src="click-to-activate.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/dragndrop.hx b/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/dragndrop.hx new file mode 100644 index 000000000..25fc51ef0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/dragndrop.hx @@ -0,0 +1,133 @@ +import Std; +import flash.Lib; +import flash.events.MouseEvent; + +class DragNDrop +{ + static var s_box_draggable:Box; + static var s_box_target:Box; + static var s_dragging:Bool = false; + + private static function main() + { + /* Blue box (target). */ + s_box_target = new Box(0x0000ff, 100, 100, 150, 150); + /* Orange box (draggable). */ + s_box_draggable = new Box(0xffa500, 25, 25, 50, 50); + + flash.Lib.current.stage.addEventListener(MouseEvent.MOUSE_DOWN, OnMouseDown); + flash.Lib.current.stage.addEventListener(MouseEvent.MOUSE_MOVE, OnMouseMove); + flash.Lib.current.stage.addEventListener(MouseEvent.MOUSE_UP, OnMouseUp); + } + + static function OnMouseDown(event:MouseEvent):Void + { + if (s_box_draggable.IsHit(event.stageX, event.stageY)) + s_dragging = true; + } + + static function OnMouseUp(event:MouseEvent):Void + { + s_dragging = false; + + /* Check if passed. */ + if (s_box_draggable.IsWithin(s_box_target)) + { + s_box_draggable.Hide(); + s_box_target.SetColor(0xffee00); + } + } + + static function OnMouseMove(event:MouseEvent):Void + { + if (s_dragging) + { + ClearCanvas(); + s_box_target.Redraw(); + s_box_draggable.Move(event.stageX, event.stageY); + } + } + + static function ClearCanvas():Void + { + var mc:flash.display.MovieClip = flash.Lib.current; + mc.graphics.beginFill(0xffffff); + mc.graphics.drawRect(0, 0, flash.Lib.current.stage.width, flash.Lib.current.stage.height); + mc.graphics.endFill(); + } +} + +class Box +{ + var m_mc:flash.display.MovieClip; + var m_color:Int; + var m_rel_x:Float; + var m_rel_y:Float; + var m_x:Float; + var m_y:Float; + var m_width:Int; + var m_height:Int; + + public function new(color:Int, x:Int, y:Int, width:Int, height:Int) + { + m_mc = flash.Lib.current; + m_color = color; + m_x = x; + m_y = y; + m_width = width; + m_height = height; + + Redraw(); + } + + public function IsHit(x:Float, y:Float):Bool + { + if ((x >= m_x && x <= m_x + m_width) && (y >= m_y && y <= m_y + m_height)) + { + m_rel_x = x - m_x; + m_rel_y = y - m_y; + return true; + } + + return false; + } + + public function IsWithin(other:Box):Bool + { + return m_x >= other.m_x && m_x + m_width <= other.m_x + other.m_width + && m_y >= other.m_y && m_y + m_height <= other.m_y + other.m_height; + } + + public function Hide():Void + { + m_width = 0; + m_height = 0; + } + + public function SetColor(color:Int):Void + { + m_color = color; + Redraw(); + } + + public function Move(x:Float, y:Float):Void + { + /* Accounting for click offset. */ + m_x = x - m_rel_x; + m_y = y - m_rel_y; + Draw(Std.int(m_x), Std.int(m_y), m_width, m_height); + } + + public function Redraw():Void + { + Draw(Std.int(m_x), Std.int(m_y), m_width, m_height); + } + + private function Draw(x:Int, y:Int, width:Int, height:Int) + { + /* Draw moved rect. */ + m_mc.graphics.beginFill(m_color); + m_mc.graphics.drawRect(x, y, width, height); + m_mc.graphics.endFill(); + } +} diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/dragndrop.hxml b/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/dragndrop.hxml new file mode 100644 index 000000000..71f2eb5b9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/dragndrop.hxml @@ -0,0 +1 @@ +-swf dragndrop.swf
-swf-version 10
-main DragNDrop
-swf-header 300:300:25:FFFFFF
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/mouseup.hx b/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/mouseup.hx new file mode 100644 index 000000000..13a8757bd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/mouseup.hx @@ -0,0 +1,34 @@ +import flash.Lib; +import flash.display.Sprite; +import flash.events.MouseEvent; + +class MouseUp extends Sprite +{ + var s:Sprite; + + static function main() + { + new MouseUp(); + } + + public function new() + { + super(); + flash.Lib.current.addChild(this); + + s = new Sprite(); + s.graphics.beginFill(0xffa500); + s.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight); + s.graphics.endFill(); + stage.addChild(s); + + stage.addEventListener(MouseEvent.MOUSE_UP, OnMouseUp); + } + + function OnMouseUp(event:MouseEvent):Void + { + s.graphics.beginFill(0xffee00); + s.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight); + s.graphics.endFill(); + } +} diff --git a/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/mouseup.hxml b/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/mouseup.hxml new file mode 100644 index 000000000..d58859034 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/platform/plugin/swfsources/mouseup.hxml @@ -0,0 +1 @@ +-swf mouseup.swf
-swf-version 10
-main MouseUp
-swf-header 300:300:25:FFFFFF
\ No newline at end of file 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 000000000..548e4da8c --- /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>
\ No newline at end of file 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 000000000..a0e94f65b --- /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>
\ No newline at end of file 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 000000000..14f3db335 --- /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>
\ No newline at end of file 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 000000000..1fc552ec6 --- /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>
\ No newline at end of file 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 000000000..c4c729547 --- /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>
\ No newline at end of file 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 000000000..f4f1cf159 --- /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>
\ No newline at end of file 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 000000000..9c3a60387 --- /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>
\ No newline at end of file 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 000000000..363416de8 --- /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>
\ No newline at end of file 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 000000000..ed093f6fa --- /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>
\ No newline at end of file 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 000000000..4b4e6c468 --- /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>
\ No newline at end of file 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 000000000..8531ad935 --- /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>
\ No newline at end of file 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 000000000..030972b70 --- /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>
\ No newline at end of file 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 000000000..ce57c43eb --- /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>
\ No newline at end of file |