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