Merge pull request #280 from ibelem/submission/ibelem/draganddrop

draggable_attribute, dropzone_attribute and dragevent
web-platform-tests · Jan 27, 2014 · 8179086 · 8179086
2 parents 73eeb6c + c11ceba
commit 8179086
Show file tree

Hide file tree

Showing 23 changed files with 1,324 additions and 0 deletions.
diff --git a/html/editing/dnd/the-dragevent-interface/dragevent.html b/html/editing/dnd/the-dragevent-interface/dragevent.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>HTML Test: DragEvent</title>
+    <link rel='author' title='Intel' href='http://www.intel.com'>
+    <link rel='help' href='http://www.w3.org/html/wg/drafts/html/CR/editing.html#dndevents'>
+    <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, element;
+      var Events = ['ondragstart', 'ondrag', 'ondragover', 'ondragenter', 'ondragexit', 'ondragleave', 'ondrop', 'ondragend'];
+
+      setup(function() {
+          drag = document.querySelector('#drag');
+          element = document.createElement('div');
+        }, {explicit_done: true, explicit_timeout: true});
+
+      for(var i=0; i< Events.length; i++) {
+        test(function() {
+          assert_true(Events[i] in document, 'Check ' + Events[i] + ' in document');
+        }, 'Check ' + Events[i] + ' in document');
+      }
+
+      test(function() {
+        assert_inherits(element, 'ondragstart', 'Check if have ondragstart attribute');
+      }, 'Check if have ondragstart attribute');
+
+      test(function() {
+        assert_inherits(element, 'ondrag', 'Check if have ondrag attribute');
+      }, 'Check if have ondrag attribute');
+
+      test(function() {
+        assert_inherits(element, 'ondragenter', 'Check if have ondragenter attribute');
+      }, 'Check if have ondragenter attribute');
+
+      test(function() {
+        assert_inherits(element, 'ondragexit', 'Check if have ondragexit attribute');
+      }, 'Check if have ondragexit attribute');
+
+      test(function() {
+        assert_inherits(element, 'ondragleave', 'Check if have dragleave attribute');
+      }, 'Check if have dragleave attribute');
+
+      test(function() {
+        assert_inherits(element, 'ondragover', 'Check if have dragover attribute');
+      }, 'Check if have dragover attribute');
+
+      test(function() {
+        assert_inherits(element, 'ondrop', 'Check if have ondrop attribute');
+      }, 'Check if have ondrop attribute');
+
+      test(function() {
+        assert_inherits(element, 'ondragend', 'Check if have ondragend attribute');
+      }, 'Check if have ondragend attribute');
+
+      on_event(drag, 'dragstart', function(event) {
+        test(function() {
+          assert_equals(event.type, 'dragstart', 'Check if the dragstart event captured');
+        }, 'Check if the dragstart event captured');
+      });
+
+      on_event(drag, 'dragenter', function(event) {
+        test(function() {
+          assert_equals(event.type, 'dragenter', 'Check if the dragenter event captured');
+        }, 'Check if the dragenter event captured');
+      });
+
+      on_event(drag, 'dragend', function(event) {
+        test(function() {
+          assert_equals(event.type, 'dragend', 'Check if the dragend event captured');
+        }, 'Check if the dragend event captured');
+        done();
+      });
+
+
+    </script>
+  </body>
+</html>
diff --git a/html/editing/dnd/the-draggable-attribute/draggable_attribute.html b/html/editing/dnd/the-draggable-attribute/draggable_attribute.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>HTML Test: draggable_attribute</title>
+    <link rel='author' title='Intel' href='http://www.intel.com'>
+    <link rel='help' href='http://www.w3.org/html/wg/drafts/html/CR/editing.html#the-draggable-attribute'>
+    <script src='/resources/testharness.js'></script>
+    <script src='/resources/testharnessreport.js'></script>
+  </head>
+
+  <body>
+    <div id='log'> </div>
+
+    <script>
+      //The "data_all" below has been stolen from @Ms2ger's html/semantics/interfaces.html, thanks!
+      var data_all = [
+        ["abbr", ""],
+        ["acronym", ""],
+        ["address", ""],
+        ["applet", "Applet"],
+        ["audio", "Audio"],
+        ["b", ""],
+        ["base", "Base"],
+        ["basefont", "BaseFont"],
+        ["bdo", ""],
+        ["bgsound", "Unknown"],
+        ["big", ""],
+        ["blink", "Unknown"],
+        ["blockquote", "Quote"],
+        ["body", "Body"],
+        ["br", "BR"],
+        ["button", "Button"],
+        ["canvas", "Canvas"],
+        ["caption", "TableCaption"],
+        ["center", ""],
+        ["cite", ""],
+        ["code", ""],
+        ["col", "TableCol"],
+        ["colgroup", "TableCol"],
+        ["dd", ""],
+        ["del", "Mod"],
+        ["dfn", ""],
+        ["dir", "Directory"],
+        ["div", "Div"],
+        ["dl", "DList"],
+        ["dt", ""],
+        ["em", ""],
+        ["embed", "Embed"],
+        ["fieldset", "FieldSet"],
+        ["font", "Font"],
+        ["form", "Form"],
+        ["frame", "Frame"],
+        ["frameset", "FrameSet"],
+        ["h1", "Heading"],
+        ["h2", "Heading"],
+        ["h3", "Heading"],
+        ["h4", "Heading"],
+        ["h5", "Heading"],
+        ["h6", "Heading"],
+        ["head", "Head"],
+        ["hr", "HR"],
+        ["html", "Html"],
+        ["i", ""],
+        ["iframe", "IFrame"],
+        ["image", "Unknown"],
+        ["img", "Image"],
+        ["input", "Input"],
+        ["ins", "Mod"],
+        ["isindex", "Unknown"],
+        ["kbd", ""],
+        ["keygen", "Keygen"],
+        ["label", "Label"],
+        ["legend", "Legend"],
+        ["li", "LI"],
+        ["link", "Link"],
+        ["listing", ""],
+        ["map", "Map"],
+        ["marquee", "Marquee"],
+        ["menu", "Menu"],
+        ["meta", "Meta"],
+        ["multicol", "Unknown"],
+        ["nobr", ""],
+        ["noembed", ""],
+        ["noframes", ""],
+        ["noscript", ""],
+        ["object", "Object"],
+        ["ol", "OList"],
+        ["optgroup", "OptGroup"],
+        ["option", "Option"],
+        ["p", "Paragraph"],
+        ["param", "Param"],
+        ["plaintext", ""],
+        ["pre", "Pre"],
+        ["q", "Quote"],
+        ["s", ""],
+        ["samp", ""],
+        ["script", "Script"],
+        ["select", "Select"],
+        ["small", ""],
+        ["source", "Source"],
+        ["spacer", "Unknown"],
+        ["span", "Span"],
+        ["strike", ""],
+        ["strong", ""],
+        ["style", "Style"],
+        ["sub", ""],
+        ["sup", ""],
+        ["table", "Table"],
+        ["tbody", "TableSection"],
+        ["td", "TableDataCell"],
+        ["textarea", "TextArea"],
+        ["tfoot", "TableSection"],
+        ["th", "TableHeaderCell"],
+        ["thead", "TableSection"],
+        ["title", "Title"],
+        ["tr", "TableRow"],
+        ["tt", ""],
+        ["u", ""],
+        ["ul", "UList"],
+        ["var", ""],
+        ["video", "Video"],
+        ["wbr", ""],
+        ["xmp", ""],
+        ["section", ""],
+        ["nav", ""],
+        ["article", ""],
+        ["aside", ""],
+        ["hgroup", ""],
+        ["header", ""],
+        ["footer", ""],
+        ["time", "Unknown"],
+        ["mark", ""],
+        ["progress", "Progress"],
+        ["meter", "Meter"],
+        ["ruby", ""],
+        ["rt", ""],
+        ["rp", ""],
+        ["figure", ""],
+        ["datalist", "DataList"],
+        ["output", "Output"],
+        ["details", "Details"],
+        ["command", "Command"],
+        ["nextid", "Unknown"],
+        ["rb", "Unknown"],
+        ["bdi", ""],
+        ["data", "Data"],
+        ["a", "Anchor"],
+        ["area", "Area"],
+        ["dialog", "Dialog"],
+        ["figcaption", ""],
+        ["summary", ""],
+        ["track", "Track"]
+      ];
+
+      data_all.forEach(function(a) {
+        test(function() {
+          var eElement = document.createElement(a[0]);
+          assert_inherits(eElement, 'draggable', 'Element ' + a[0] +' should have draggable property');
+        }, 'Element ' + a[0] +' should have draggable property');
+      });
+
+      function run_test(element, element_name, exp) {
+        if (exp) {
+          assert_true(element.draggable, 'Element ' + element_name +' should be draggable');
+        } else {
+          assert_false(element.draggable, 'Element ' + element_name +' should not be draggable');
+        }
+      }
+
+      function run_idl_test(element, element_name, exp) {
+        if (exp) {
+          assert_equals(element.getAttribute('draggable'), 'true', 'Element ' + element_name +' should be draggable');
+        } else {
+          assert_equals(element.getAttribute('draggable'), 'false', 'Element ' + element_name +' should not be draggable');
+        }
+      }
+
+      data_all.forEach(function(a) {
+
+        test(function() {
+          //Default values for elements
+          //If the element is an img element, or, if the element is an a element with an href content attribute,
+          //the draggable IDL attribute must return true.
+          var eElement = document.createElement(a[0]);
+          switch (a[0]) {
+            case 'a':
+              eElement.setAttribute('href', 'http://w3.org');
+              run_test(eElement, 'a', true);
+              break;
+            case 'img':
+              run_test(eElement, 'img', true);
+              break;
+            default:
+              run_test(eElement, a[0], false);
+          }
+
+          //If an element's draggable content attribute has the state true,
+          //the draggable IDL attribute must return true.
+          eElement.setAttribute('draggable', 'true');
+          run_test(eElement, a[0] + ' draggable=\'true\'', true);
+
+          //If an element's draggable content attribute has the state false,
+          //the draggable IDL attribute must return false.
+          eElement.setAttribute('draggable', 'false');
+          run_test(eElement, a[0] + ' draggable=\'false\'', false);
+
+          //auto values for elements
+          //The element's draggable content attribute has the state auto.
+          //If the element is an img element, or, if the element is an a element with an href content attribute,
+          //the draggable IDL attribute must return true.
+          switch (a[0]) {
+            case 'a':
+              eElement.setAttribute('href', 'http://w3.org');
+              eElement.setAttribute('draggable', 'auto');
+              run_test(eElement, 'Element ' + 'a' + ' draggable=\'auto\'', true);
+              break;
+            case 'img':
+              eElement.setAttribute('draggable', 'auto');
+              run_test(eElement, 'Element ' + 'img' + ' draggable=\'auto\'', true);
+              break;
+            default:
+              run_test(eElement, 'Element ' + a[0] + ' draggable=\'auto\'', false);
+          }
+
+          //Foo values for elements
+          //The element's draggable content attribute value is not enumerated (true, false, auto) but unexpected.
+          //Fallback to defaults
+          switch (a[0]) {
+            case 'a':
+              eElement.setAttribute('href', 'http://w3.org');
+              eElement.setAttribute('draggable', 'foo');
+              run_test(eElement, 'Element ' + 'a' + ' draggable=\'foo\'', true);
+              break;
+            case 'img':
+              eElement.setAttribute('draggable', 'foo');
+              run_test(eElement, 'Element ' + 'img' + ' draggable=\'foo\'', true);
+              break;
+            default:
+              run_test(eElement, 'Element ' + a[0] + ' draggable=\'foo\'', false);
+          }
+
+          //An element with a draggable attribute should also have a title attribute
+          //that names the element for the purpose of non-visual interactions.
+          eElement.setAttribute('title', 'foo as title value');
+          assert_equals(typeof eElement.title, 'string', '<' + a[0] + '> draggable block has title attribute');
+
+          //If the draggable IDL attribute is set to the value false,
+          //the draggable content attribute must be set to the literal value false.
+          eElement.draggable = false;
+          run_idl_test(eElement, a[0] + '.getAttribute(\'draggable\') is \'false\'', false);
+
+          //If the draggable IDL attribute is set to the value true,
+          //the draggable content attribute must be set to the literal value true.
+          eElement.draggable = true;
+          run_idl_test(eElement, a[0] + '.getAttribute(\'draggable\') is \'true\'', true);
+          }, 'Element ' + a[0] +' draggable attribute test');
+
+        });
+    </script>
+  </body>
+</html>