diff options
Diffstat (limited to 'testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface')
8 files changed, 651 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/DataTransfer-types-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/DataTransfer-types-manual.html new file mode 100644 index 0000000000..0a62997f69 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/DataTransfer-types-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>DataTransferItem Test: types - files</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-types"/> +<meta name="flags" content="interact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<p><div id="div" style="border: 2px green solid; width: 200px; height: 200px;"></div></p> + +<h2>Test steps:</h2> +<p>Drag a file enter the green box, then drop file out</p> + +<script> + +let div = document.getElementById("div"); + +setup({explicit_done: true}); +setup({explicit_timeout: true}); + +on_event(div, "dragenter", evt => { + let type = evt.dataTransfer.types[0]; + test(() => { + assert_equals(type, "Files"); + }, "Check if one of the types will be the string 'Files' when drag a file"); + done(); +}); + +</script> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/dndTransferCases-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/dndTransferCases-manual.html new file mode 100644 index 0000000000..6081b5d42c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/dndTransferCases-manual.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: dropzone_attribute_data_item_kind_string</title> + <link rel='author' title='Intel' href='http://www.intel.com'> + <link rel='author' title='Domenic Denicola' href='mailto:d@domenic.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-datatransfer-interface'> + <script src='/resources/testharness.js'></script> + <script src='/resources/testharnessreport.js'></script> + <style> + #drop { + border: 2px solid black; + width: 100px; + height: 100px; + padding: 20px; + } + #drag { + color: blue; + margin: 20px auto; + } + </style> + </head> + + <body> + <div>Select and drag the blue text to rectangular box.</div> + <div id='drag' draggable>blue text</div> + <div id='drop' dropzone='copy string:text/plain'></div> + <div id='log'> </div> + + <script> + var drag; + setup(function() { + drag = document.querySelector('#drag'); + }, {explicit_done: true, explicit_timeout: true}); + + on_event(drag, 'dragstart', function(event) { + test(function() { + assert_equals(event.dataTransfer.effectAllowed, 'uninitialized'); + }, 'effectAllowed should be "uninitialized"'); + + test(function() { + assert_equals(event.dataTransfer.types.constructor, Array, 'should be an array'); + assert_true(Object.isFrozen(event.dataTransfer.types), 'should be frozen'); + }, 'types should be a frozen array'); + + test(function() { + assert_false('contains' in event.dataTransfer.types); + assert_false('item' in event.dataTransfer.types); + }, 'types should not have any of the historical methods'); + + test(function() { + assert_equals(event.dataTransfer.types, event.dataTransfer.types); + }, 'types should return the same object from multiple reads (assuming no changes)'); + + test(function() { + var before = event.dataTransfer.types; + event.dataTransfer.clearData(); + assert_not_equals(event.dataTransfer.types, before); + }, 'types should return a different object after changes'); + + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/effectAllowed-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/effectAllowed-manual.html new file mode 100644 index 0000000000..08540b906a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/effectAllowed-manual.html @@ -0,0 +1,76 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Set a value to effectAllowed attribute</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/> + <meta name="assert" content="Set a value to effectAllowed attribute"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var TARGETEVENT1, TARGETEVENT2, TARGET1, TARGET2; + + function DragstartEvent(evt) + { + if ((TARGET1 == evt.target) && (TARGETEVENT1 == evt.type)) + { + evt.dataTransfer.effectAllowed = "move"; + } + } + function DragenterEvent(evt) + { + if ((TARGET2 == evt.target) && (TARGETEVENT2 == evt.type)) + { + if("move" == evt.dataTransfer.effectAllowed) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + } + + TARGETEVENT1 = "dragstart"; + TARGETEVENT2 = "dragenter"; + + window.onload = function() + { + TARGET1 = document.getElementById("target1"); + TARGET2 = document.getElementById("target2"); + AddEventListenersForElement(TARGETEVENT1, DragstartEvent, false, TARGET1); + AddEventListenersForElement(TARGETEVENT2, DragenterEvent, false, TARGET2); + } + </script> + </head> + <body> + <pre>Description: Set a value to effectAllowed attribute</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Drag the blue image and enter the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#datatransfer + </p> + <p> + On setting, if the new value is one of "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", or "uninitialized", then the attribute's current value must be set to the new value. + </p> + <img src="/images/blue.png" style="width:200px; height:100px" draggable="true" id="target1"/> + <br /><br /> + <input type="text" id="target2" style="border:2px green solid; width:200px; height:50px"></input> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/files-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/files-manual.html new file mode 100644 index 0000000000..7de0b4bbce --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/files-manual.html @@ -0,0 +1,81 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: files attribute returns a FileList</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/> + <meta name="assert" content="files attribute returns a FileList"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DropEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + var files = evt.dataTransfer.files; + if(('[object FileList]' == files)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + else + { + LogTestResult("FAIL"); + } + } + + function DragenterEvent(evt) + { + evt.preventDefault(); + } + + function DragoverEvent(evt) + { + evt.preventDefault(); + } + + EVENT = "drop"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DropEvent, false, TARGET); + AddEventListenersForElement("dragenter", DragenterEvent, false, TARGET); + AddEventListenersForElement("dragover", DragoverEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: files attribute returns a FileList</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Drag a file and drop it in the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#datatransfer + </p> + <p> + The files attribute must return a live FileList sequence consisting of File objects representing the files. + </p> + <textarea type="text" id="target" style="border:2px green solid; width:200px; height:50px"></textarea> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedDragDataTransfer-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedDragDataTransfer-manual.html new file mode 100644 index 0000000000..6d84f54efc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedDragDataTransfer-manual.html @@ -0,0 +1,142 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: drag DataTransfer protected status</title> + <link rel='author' title='Nika Layzell' href='mailto:nika@thelayzells.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-datatransfer-interface'> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + #drag { + width: 100px; + height: 100px; + display: inline-block; + color: #fff; + background-color: #f00; + } + #drop { + width: 100px; + height: 100px; + display: inline-block; + color: #fff; + background-color: #00f; + } + </style> + </head> + + <body> + <h3>Instructions</h3> + <p> + Drag the box labeled "drag" to the box labeled "drop" and release. + </p> + + <div id="drag" draggable="true">drag</div> + <div id="drop">drop</div> + + <div id="log"> </div> + + <script> + var MIME = "text/plain"; + + var drop; + setup(function() { + drop = document.querySelector("#drop"); + }, {explicit_done: true, explicit_timeout: true}); + + var STATUS_PROTECTED = "protected"; + var STATUS_READONLY = "readonly"; + var STATUS_READWRITE = "readwrite"; + var STATUS_DISCONNECTED = "disconnected"; + function status(dt) { + // Check if we can write to it. + try { + dt.setData("text/html", "_test"); + + if (dt.getData("text/html") == "_test") { + dt.clearData("text/html"); + assert_true(!dt.getData("text/html"), "ClearData should work..."); + return STATUS_READWRITE; + } + } catch(e) {} + + // If we can read the data then we're readonly + if (dt.getData(MIME)) { + return STATUS_READONLY; + } + + // If we can see that items exist (and read types) then we're protected + if (dt.items.length > 0) { + return STATUS_PROTECTED; + } + + // Otherwise we've been disconnected. + return STATUS_DISCONNECTED; + }; + + var drag_dt = null; + var over_dt = null; + var drop_dt = null; + on_event(document.body, "dragstart", function(e) { + drag_dt = e.dataTransfer; + over_dt = null; + drop_dt = null; + drag_dt.setData(MIME, "b"); + test(function() { + assert_equals(status(drag_dt), STATUS_READWRITE, + "drag_dt must be readwrite during dragstart"); + }, "dragstart event status"); + }); + on_event(drop, "dragover", function(e) { + if (!over_dt) { + over_dt = e.dataTransfer; + test(function() { + assert_equals(status(drag_dt), STATUS_DISCONNECTED, + "drag_dt mustbe disconnected during dragover"); + assert_equals(status(over_dt), STATUS_PROTECTED, + "over_dt mustbe protected during dragover"); + }, "dragover event status"); + test(function() { + assert_not_equals(drag_dt, over_dt, + "drag_dt must be a different DataTransfer object than over_dt"); + }, "dragover event identity"); + } + e.preventDefault(); + }); + on_event(drop, "drop", function(e) { + drop_dt = e.dataTransfer; + test(function() { + assert_equals(status(drag_dt), STATUS_DISCONNECTED, + "drag_dt mustbe disconnected during drop"); + assert_equals(status(over_dt), STATUS_DISCONNECTED, + "over_dt mustbe disconnected during drop"); + assert_equals(status(drop_dt), STATUS_READONLY, + "drop_dt mustbe readonly during drop"); + }, "drop event status"); + test(function() { + assert_not_equals(drop_dt, over_dt, + "drop_dt must be a different DataTransfer object than over_dt"); + assert_not_equals(drop_dt, drag_dt, + "drop_dt must be a different DataTransfer object than drag_dt"); + }, "drop event identity"); + test(function() { + assert_equals(drop_dt.getData(MIME), "b", + "the data should have been persisted"); + }, "drop event data"); + e.preventDefault(); + + setTimeout(function() { + test(function() { + assert_equals(status(drag_dt), STATUS_DISCONNECTED, + "drag_dt mustbe disconnected after drop"); + assert_equals(status(over_dt), STATUS_DISCONNECTED, + "over_dt mustbe disconnected after drop"); + assert_equals(status(drop_dt), STATUS_DISCONNECTED, + "drop_dt mustbe disconnected after drop"); + }, "after drop event status"); + done(); + }, 0); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedPasteDataTransfer-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedPasteDataTransfer-manual.html new file mode 100644 index 0000000000..20bf9c7a9a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/protectedPasteDataTransfer-manual.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset='utf-8'> + <title>HTML Test: paste DataTransfer protected status</title> + <link rel='author' title='Nika Layzell' href='mailto:nika@thelayzells.com'> + <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-datatransfer-interface'> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + + <body> + <h3>Instructions</h3> + <p> + Select the text in the text box and press Ctrl-C followed by Ctrl-V. + </p> + + <input type="text" id="input" value="text"> + + <div id="log"> </div> + + <script> + var MIME = "text/plain"; + + var input; + setup(function() { + input = document.querySelector("#input"); + }, {explicit_done: true, explicit_timeout: true}); + + var STATUS_PROTECTED = "protected"; + var STATUS_READONLY = "readonly"; + var STATUS_READWRITE = "readwrite"; + var STATUS_DISCONNECTED = "disconnected"; + function status(dt) { + // Check if we can write to it. + try { + dt.setData("text/html", "_test"); + + if (dt.getData("text/html") == "_test") { + dt.clearData("text/html"); + assert_true(!dt.getData("text/html"), "ClearData should work..."); + return STATUS_READWRITE; + } + } catch(e) {} + + // If we can read the data then we're readonly + if (dt.getData(MIME)) { + return STATUS_READONLY; + } + + // If we can see that items exist (and read types) then we're protected + if (dt.items.length > 0) { + return STATUS_PROTECTED; + } + + // Otherwise we've been disconnected. + return STATUS_DISCONNECTED; + }; + + let copy_dt = null; + let paste_dt = null; + on_event(input, "copy", function(e) { + copy_dt = e.clipboardData; + paste_dt = null; + copy_dt.setData(MIME, "b"); + + test(function() { + assert_equals(status(copy_dt), STATUS_READWRITE, + "copy_dt must be readwrite during copy"); + }, "copy event status"); + + e.preventDefault(); + }); + on_event(input, "paste", function(e) { + paste_dt = e.clipboardData; + + test(function() { + assert_equals(status(copy_dt), STATUS_DISCONNECTED, + "copy_dt mustbe disconnected during paste"); + assert_equals(status(paste_dt), STATUS_READONLY, + "paste_dt mustbe readonly during paste"); + }, "paste event status"); + test(function() { + assert_not_equals(copy_dt != paste_dt, + "copy_dt must be a different DataTransfer object than paste_dt"); + }, "paste event identity"); + test(function() { + assert_equals(paste_dt.getData(MIME), "b", + "the data should have been persisted"); + }, "paste event data"); + + e.preventDefault(); + + setTimeout(function() { + test(function() { + assert_equals(status(copy_dt), STATUS_DISCONNECTED, + "copy_dt mustbe disconnected after paste"); + assert_equals(status(paste_dt), STATUS_DISCONNECTED, + "paste_dt mustbe disconnected after paste"); + }, "after paste event status"); + done(); + }, 0); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/setData-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/setData-manual.html new file mode 100644 index 0000000000..f0f7cae600 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/setData-manual.html @@ -0,0 +1,78 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: Add an item to the drag data store item list whose data is the string given by setData method's second argument</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/> + <meta name="assert" content="Add an item to the drag data store item list whose data is the string given by setData method's second argument"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var TARGETEVENT1, TARGETEVENT2, TARGET1, TARGET2; + + function DragstartEvent(evt) + { + if ((TARGET1 == evt.target) && (TARGETEVENT1 == evt.type)) + { + evt.dataTransfer.setData("text", "SetText"); + } + } + function DropEvent(evt) + { + if ((TARGET2 == evt.target) && (TARGETEVENT2 == evt.type)) + { + if("SetText" == evt.dataTransfer.getData("text")) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + } + + TARGETEVENT1 = "dragstart"; + TARGETEVENT2 = "drop"; + + window.onload = function() + { + TARGET1 = document.getElementById("target1"); + TARGET2 = document.getElementById("target2"); + AddEventListenersForElement(TARGETEVENT1, DragstartEvent, false, TARGET1); + AddEventListenersForElement(TARGETEVENT2, DropEvent, false, TARGET2); + } + </script> + </head> + <body> + <pre>Description: Add an item to the drag data store item list whose data is the string given by setData method's second argument</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Drag the blue image and drop it in the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#datatransfer + </p> + <p> + If format equals "text", change it to "text/plain". + Remove the item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to format, if there is one. + Add an item to the drag data store item list whose kind is Plain Unicode string, whose type string is equal to format, and whose data is the string given by the method's second argument. + </p> + <img src="/images/blue.png" style="width:200px; height:100px" draggable="customValue2" id="target1"/> + <br /><br /> + <input type="text" id="target2" style="border:2px green solid; width:200px; height:50px"></input> + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/types-manual.html b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/types-manual.html new file mode 100644 index 0000000000..1730c4bc73 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/the-datatransfer-interface/types-manual.html @@ -0,0 +1,72 @@ +<!doctype html> +<html> + <head> + <title>HTML5 Drag and Drop: types attribute returns a DOMStringList</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/> + <meta name="assert" content="types attribute returns a DOMStringList"/> + <script src="../resources/dragdrop_support.js" type="text/javascript"></script> + <script type="text/javascript"> + var EVENT, TARGET; + + function DropEvent(evt) + { + if ((TARGET == evt.target) && (EVENT == evt.type)) + { + var types = evt.dataTransfer.types; + if(('[object DOMStringList]' == types)) + { + LogTestResult("PASS"); + } + else + { + LogTestResult("FAIL"); + } + } + else + { + LogTestResult("FAIL"); + } + } + + EVENT = "drop"; + + window.onload = function() + { + TARGET = document.getElementById("target"); + AddEventListenersForElement(EVENT, DropEvent, false, TARGET); + } + </script> + </head> + <body> + <pre>Description: types attribute returns a DOMStringList</pre> + <table id='testtable' border='1'> + <tr> + <td>Test Result</td> + <td>Test Assertion</td> + </tr> + <tr> + <td id='test_result'>Manual</td> + <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. + <div id="manualsteps"> + Steps: + <ol> + <li> Select the text inside the red box + <li> Drag and drop it in the green box + </ol> + </div> + </td> + </tr> + </table> + <p> + http://dev.w3.org/html5/spec/dnd.html#datatransfer + </p> + <p> + The types attribute must return a live DOMStringList. + </p> + <div style="border:2px red solid; width:200px; height:50px">SampleText</div> + <br /><br /> + <input type="text" id="target" style="border:2px green solid; width:200px; height:50px"></input> + </body> +</html> |