LibWeb: Implement HTMLElement.draggable()

Author: https://github.com/lukasxcs 🔰
Commit: c2fc4b25cd
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5836
Reviewed-by: https://github.com/tcl3 ✅

Libraries/LibWeb/HTML/AttributeNames.h

@@ -73,6 +73,7 @@ namespace AttributeNames {
     __ENUMERATE_HTML_ATTRIBUTE(dirname, "dirname")                                       \
     __ENUMERATE_HTML_ATTRIBUTE(disabled, "disabled")                                     \
     __ENUMERATE_HTML_ATTRIBUTE(download, "download")                                     \
+    __ENUMERATE_HTML_ATTRIBUTE(draggable, "draggable")                                   \
     __ENUMERATE_HTML_ATTRIBUTE(enctype, "enctype")                                       \
     __ENUMERATE_HTML_ATTRIBUTE(ended, "ended")                                           \
     __ENUMERATE_HTML_ATTRIBUTE(enterkeyhint, "enterkeyhint")                             \

Libraries/LibWeb/HTML/HTMLElement.cpp

@@ -32,6 +32,7 @@
 #include <LibWeb/HTML/HTMLDialogElement.h>
 #include <LibWeb/HTML/HTMLElement.h>
 #include <LibWeb/HTML/HTMLLabelElement.h>
+#include <LibWeb/HTML/HTMLObjectElement.h>
 #include <LibWeb/HTML/HTMLParagraphElement.h>
 #include <LibWeb/HTML/PopoverInvokerElement.h>
 #include <LibWeb/HTML/ToggleEvent.h>
@@ -2093,4 +2094,41 @@ String HTMLElement::access_key_label() const
     return String {};
 }
 
+// https://html.spec.whatwg.org/multipage/dnd.html#dom-draggable
+bool HTMLElement::draggable() const
+{
+    auto attribute = get_attribute(HTML::AttributeNames::draggable);
+
+    // If an element's draggable content attribute has the state True, the draggable IDL attribute must return true.
+    if (attribute.has_value() && attribute->equals_ignoring_ascii_case("true"sv)) {
+        return true;
+    }
+
+    // If an element's draggable content attribute has the state False, the draggable IDL attribute must return false.
+    if (attribute.has_value() && attribute->equals_ignoring_ascii_case("false"sv)) {
+        return false;
+    }
+
+    // Otherwise, the element's draggable content attribute has the state Auto.
+
+    // If the element is an img element, the draggable IDL attribute must return true.
+    if (is<HTML::HTMLImageElement>(*this)) {
+        return true;
+    }
+
+    // If the element is an object element that represents an image, the draggable IDL attribute must return true.
+    if (is<HTML::HTMLObjectElement>(*this)) {
+        if (auto type_attribute = get_attribute(HTML::AttributeNames::type); type_attribute.has_value() && type_attribute->equals_ignoring_ascii_case("image"sv))
+            return true;
+    }
+
+    // If the element is an a element with an href content attribute, the draggable IDL attribute must return true.
+    if (is<HTML::HTMLAnchorElement>(*this) && has_attribute(HTML::AttributeNames::href)) {
+        return true;
+    }
+
+    // Otherwise, the draggable IDL attribute must return false.
+    return false;
+}
+
 }

Libraries/LibWeb/HTML/HTMLElement.h

@@ -157,6 +157,9 @@ public:
 
     bool is_inert() const { return m_inert; }
 
+    bool draggable() const;
+    void set_draggable(bool draggable) { MUST(set_attribute(HTML::AttributeNames::draggable, draggable ? "true"_string : "false"_string)); }
+
     virtual bool is_valid_invoker_command(String&) { return false; }
     virtual void invoker_command_steps(DOM::Element&, String&) { }
 

Libraries/LibWeb/HTML/HTMLElement.idl

@@ -23,7 +23,7 @@ interface HTMLElement : Element {
     undefined click();
     [Reflect=accesskey, CEReactions] attribute DOMString accessKey;
     readonly attribute DOMString accessKeyLabel;
-    [FIXME, CEReactions] attribute boolean draggable;
+    [CEReactions] attribute boolean draggable;
     [FIXME, CEReactions] attribute boolean spellcheck;
     [FIXME, CEReactions] attribute DOMString autocapitalize;
     [FIXME, CEReactions] attribute boolean autocorrect;

Tests/LibWeb/Text/expected/wpt-import/html/editing/dnd/dom/draggable.txt

@@ -0,0 +1,32 @@
+Harness status: OK
+
+Found 27 tests
+
+27 Pass
+Pass	an <a> element should have a draggable property
+Pass	a <div> element should have a draggable property
+Pass	an <img> element should have a draggable property
+Pass	an <a> element should be draggable by default
+Pass	a <div> element should not be draggable by default
+Pass	an <img> element should be draggable by default
+Pass	an <a> element with draggable="true" should be draggable
+Pass	a <div> element with draggable="true" should be draggable
+Pass	an <img> element with draggable="true" should be draggable
+Pass	an <a> element with draggable="false" should not be draggable
+Pass	a <div> element with draggable="false" should not be draggable
+Pass	an <img> element with draggable="false" should not be draggable
+Pass	an <a> element with draggable="auto" should be draggable
+Pass	a <div> element with draggable="auto" should not be draggable
+Pass	an <img> element with draggable="auto" should be draggable
+Pass	an <a> element with draggable="foo" should be draggable
+Pass	a <div> element with draggable="foo" should not be draggable
+Pass	an <img> element with draggable="foo" should be draggable
+Pass	an <a> element with the draggable property set to true through a script should be draggable
+Pass	a <div> element with the draggable property set to true through a script should be draggable
+Pass	an <img> element with the draggable property set to true through a script should be draggable
+Pass	an <a> element with the draggable property set to false through a script should not be draggable
+Pass	a <div> element with the draggable property set to false through a script should not be draggable
+Pass	an <img> element with the draggable property set to false through a script should not be draggable
+Pass	an <a> element with the draggable property set to "foo" through a script should be draggable
+Pass	a <div> element with the draggable property set to "foo" through a script should be draggable
+Pass	an <img> element with the draggable property set to "foo" through a script should be draggable

Tests/LibWeb/Text/input/wpt-import/html/editing/dnd/dom/draggable.html

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<meta charset='utf-8'>
+<title>drag &amp; drop – draggable attribute</title>
+<style>div#test_elements { display: none; }</style>
+
+<script src='../../../../resources/testharness.js'></script>
+<script src='../../../../resources/testharnessreport.js'></script>
+
+<noscript><p>Enable JavaScript and reload.</p></noscript>
+
+<div id='log'></div>
+
+<div id='test_elements'>
+
+ <div id='defaults'>
+  <a href='#'>.</a>
+  <div></div>
+  <img src='../resources/1x1-transparent.gif'>
+ </div>
+
+ <div id='draggable'>
+  <a draggable='true' href='#'>.</a>
+  <div draggable='true'></div>
+  <img draggable='true' src='../resources/1x1-transparent.gif'>
+ </div>
+
+ <div id='draggable_false'>
+  <a draggable='false' href='#'>.</a>
+  <div draggable='false'></div>
+  <img draggable='false' src='../resources/1x1-transparent.gif'>
+ </div>
+
+ <div id='draggable_auto'>
+  <a draggable='auto' href='#'>.</a>
+  <div draggable='auto'></div>
+  <img draggable='auto' src='../resources/1x1-transparent.gif'>
+ </div>
+
+ <div id='draggable_foo'>
+  <a draggable='foo' href='#'>.</a>
+  <div draggable='foo'></div>
+  <img draggable='foo' src='../resources/1x1-transparent.gif'>
+ </div>
+
+ <div id='changable_true'>
+  <a href='#'>.</a>
+  <div></div>
+  <img src='../resources/1x1-transparent.gif'>
+ </div>
+
+ <div id='changable_false'>
+  <a href='#'>.</a>
+  <div></div>
+  <img src='../resources/1x1-transparent.gif'>
+ </div>
+
+ <div id='changable_foo'>
+  <a href='#'>.</a>
+  <div></div>
+  <img src='../resources/1x1-transparent.gif'>
+ </div>
+
+
+</div>
+
+<script>
+var foo = document.getElementById('foo');
+
+/* Does the .draggable property exist? */
+test(function () {
+  assert_idl_attribute(document.querySelector('#defaults a'), 'draggable');
+}, 'an <a> element should have a draggable property');
+
+test(function () {
+  assert_idl_attribute(document.querySelector('#defaults div'), 'draggable');
+}, 'a <div> element should have a draggable property');
+
+test(function () {
+  assert_idl_attribute(document.querySelector('#defaults img'), 'draggable');
+}, 'an <img> element should have a draggable property');
+
+
+/* Check the default values on different types of elements */
+test(function () {
+  assert_true(document.querySelector('#defaults a').draggable);
+}, 'an <a> element should be draggable by default');
+
+test(function () {
+  assert_false(document.querySelector('#defaults div').draggable);
+}, 'a <div> element should not be draggable by default');
+
+test(function () {
+  assert_true(document.querySelector('#defaults img').draggable);
+}, 'an <img> element should be draggable by default');
+
+
+/* If draggable="true" is set, all the elements should be draggable */
+test(function () {
+  assert_true(document.querySelector('#draggable a').draggable);
+}, 'an <a> element with draggable="true" should be draggable');
+
+test(function () {
+  assert_true(document.querySelector('#draggable div').draggable);
+}, 'a <div> element with draggable="true" should be draggable');
+
+test(function () {
+  assert_true(document.querySelector('#draggable img').draggable);
+}, 'an <img> element with draggable="true" should be draggable');
+
+
+/* If draggable="false" is set, none of the elements should be draggable */
+test(function () {
+  assert_false(document.querySelector('#draggable_false a').draggable);
+}, 'an <a> element with draggable="false" should not be draggable');
+
+test(function () {
+  assert_false(document.querySelector('#draggable_false div').draggable);
+}, 'a <div> element with draggable="false" should not be draggable');
+
+test(function () {
+  assert_false(document.querySelector('#draggable_false img').draggable);
+}, 'an <img> element with draggable="false" should not be draggable');
+
+
+/* If draggable="auto" is set, fall back to the defaults */
+test(function () {
+  assert_true(document.querySelector('#draggable_auto a').draggable);
+}, 'an <a> element with draggable="auto" should be draggable');
+
+test(function () {
+  assert_false(document.querySelector('#draggable_auto div').draggable);
+}, 'a <div> element with draggable="auto" should not be draggable');
+
+test(function () {
+  assert_true(document.querySelector('#draggable_auto img').draggable);
+}, 'an <img> element with draggable="auto" should be draggable');
+
+
+/* If draggable="foo" is set, fall back to the defaults */
+test(function () {
+  assert_true(document.querySelector('#draggable_foo a').draggable);
+}, 'an <a> element with draggable="foo" should be draggable');
+
+test(function () {
+  assert_false(document.querySelector('#draggable_foo div').draggable);
+}, 'a <div> element with draggable="foo" should not be draggable');
+
+test(function () {
+  assert_true(document.querySelector('#draggable_foo img').draggable);
+}, 'an <img> element with draggable="foo" should be draggable');
+
+
+/* Setting the element.droppable attribute to true for all elements */
+test(function () {
+  document.querySelector('#changable_true a').draggable = true;
+  assert_true(document.querySelector('#changable_true a').draggable);
+}, 'an <a> element with the draggable property set to true through a script should be draggable');
+
+test(function () {
+  document.querySelector('#changable_true div').draggable = true;
+  assert_true(document.querySelector('#changable_true div').draggable);
+}, 'a <div> element with the draggable property set to true through a script should be draggable');
+
+test(function () {
+  document.querySelector('#changable_true img').draggable = true;
+  assert_true(document.querySelector('#changable_true img').draggable);
+}, 'an <img> element with the draggable property set to true through a script should be draggable');
+
+
+/* Setting the element.droppable attribute to false for all elements */
+test(function () {
+  document.querySelector('#changable_false a').draggable = false;
+  assert_false(document.querySelector('#changable_false a').draggable);
+}, 'an <a> element with the draggable property set to false through a script should not be draggable');
+
+test(function () {
+  document.querySelector('#changable_false div').draggable = false;
+  assert_false(document.querySelector('#changable_false div').draggable);
+}, 'a <div> element with the draggable property set to false through a script should not be draggable');
+
+test(function () {
+  document.querySelector('#changable_false img').draggable = false;
+  assert_false(document.querySelector('#changable_false img').draggable);
+}, 'an <img> element with the draggable property set to false through a script should not be draggable');
+
+
+/* Setting the element.droppable attribute to "foo" for all elements */
+test(function () {
+  document.querySelector('#changable_foo a').draggable = 'foo';
+  assert_true(document.querySelector('#changable_foo a').draggable);
+}, 'an <a> element with the draggable property set to "foo" through a script should be draggable');
+
+test(function () {
+  document.querySelector('#changable_foo div').draggable = 'auto';
+  assert_true(document.querySelector('#changable_foo div').draggable);
+}, 'a <div> element with the draggable property set to "foo" through a script should be draggable');
+
+test(function () {
+  document.querySelector('#changable_foo img').draggable = 'foo';
+  assert_true(document.querySelector('#changable_foo img').draggable);
+}, 'an <img> element with the draggable property set to "foo" through a script should be draggable');
+</script>
+
+
+
+</body>
+</html>