diff options
Diffstat (limited to 'testing/web-platform/tests/html/editing/dnd/platform/interrupt')
25 files changed, 835 insertions, 0 deletions
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 |