Fix htmlElement.dir and implement document.dir

jsdom · Apr 24, 2017 · 3a1c2e0 · 3a1c2e0
1 parent 3aca01a
commit 3a1c2e0
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 2 deletions.
diff --git a/lib/jsdom/living/nodes/Document-impl.js b/lib/jsdom/living/nodes/Document-impl.js
@@ -569,6 +569,15 @@ class DocumentImpl extends NodeImpl {
     element.textContent = val;
   }
 
+  get dir() {
+    return this.documentElement ? this.documentElement.dir : "";
+  }
+  set dir(value) {
+    if (this.documentElement) {
+      this.documentElement.dir = value;
+    }
+  }
+
   get head() {
     return this.documentElement ? firstChildWithHTMLLocalName(this.documentElement, "head") : null;
   }

diff --git a/lib/jsdom/living/nodes/Document.idl b/lib/jsdom/living/nodes/Document.idl
@@ -53,7 +53,7 @@ partial /*sealed*/ interface Document {
   // DOM tree accessors
 //  getter object (DOMString name);
   attribute DOMString title;
-//  attribute DOMString dir;
+  attribute DOMString dir;
   attribute HTMLElement? body;
   readonly attribute HTMLHeadElement? head;
   [SameObject] readonly attribute HTMLCollection images;

diff --git a/lib/jsdom/living/nodes/HTMLElement-impl.js b/lib/jsdom/living/nodes/HTMLElement-impl.js
@@ -100,6 +100,21 @@ class HTMLElementImpl extends ElementImpl {
     this._clickInProgress = false;
   }
 
+  get dir() {
+    let dirValue = this.getAttribute("dir");
+    if (dirValue !== null) {
+      dirValue = dirValue.toLowerCase();
+
+      if (["ltr", "rtl", "auto"].includes(dirValue)) {
+        return dirValue;
+      }
+    }
+    return "";
+  }
+  set dir(value) {
+    this.setAttribute("dir", value);
+  }
+
   get style() {
     return this._style;
   }

diff --git a/lib/jsdom/living/nodes/HTMLElement.idl b/lib/jsdom/living/nodes/HTMLElement.idl
@@ -3,7 +3,7 @@ interface HTMLElement : Element {
   [Reflect] attribute DOMString title;
   [Reflect] attribute DOMString lang;
 //  attribute boolean translate;
-  [Reflect] attribute DOMString dir; // TODO this should be limited to known values only; [Reflect] by itself is incorrect
+  attribute DOMString dir;
 //  [SameObject] readonly attribute DOMStringMap dataset;
 
   // user interaction

diff --git a/test/web-platform-tests/index.js b/test/web-platform-tests/index.js
@@ -128,6 +128,7 @@ describe("Web Platform Tests", () => {
     "html/dom/dynamic-markup-insertion/document-writeln/document.writeln-02.html",
     "html/dom/dynamic-markup-insertion/document-writeln/document.writeln-03.html",
     "html/dom/elements/global-attributes/classlist-nonstring.html",
+    "html/dom/elements/global-attributes/document-dir.html",
     "html/editing/focus/focus-management/focus-events.html",
     "html/editing/focus/focus-management/focus-event-targets-simple.html",
     "html/editing/focus/document-level-focus-apis/document-level-apis.html",

diff --git a/test/web-platform-tests/to-upstream.js b/test/web-platform-tests/to-upstream.js
@@ -63,6 +63,7 @@ describe("Local tests in Web Platform Test format (to-upstream)", () => {
     "encoding/meta/no-meta.html",
     "html/browsers/windows/nested-browsing-contexts/iframe-referrer.html",
     "html/dom/elements/elements-in-the-dom/click-in-progress-flag.html",
+    "html/dom/elements/global-attributes/dir-attribute.html",
     "html/editing/activation/click-bail-on-disabled.html",
     "html/editing/focus/focus-management/active-element.html",
     "html/editing/focus/focus-management/focus-on-all-elements.html",

diff --git a/test/web-platform-tests/to-upstream/html/dom/elements/global-attributes/dir-attribute.html b/test/web-platform-tests/to-upstream/html/dom/elements/global-attributes/dir-attribute.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html dir="rtl">
+<title>The dir attribute</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+
+<p id="get-no-dir"></p>
+<p id="get-is-ltr" dir="ltr"></p>
+<p id="get-is-invalid" dir="whatisthisfor"></p>
+
+<p id="set-empty-dir" dir="auto"></p>
+<p id="set-to-ltr"></p>
+<p id="set-to-invalid"></p>
+
+<script>
+"use strict";
+
+test(() => {
+  const el = document.getElementById("get-no-dir");
+
+  assert_equals(el.dir, "");
+  assert_equals(el.getAttribute("dir"), null);
+}, "Get element without dir attribute");
+
+test(() => {
+  const el = document.getElementById("get-is-ltr");
+
+  assert_equals(el.dir, "ltr");
+  assert_equals(el.getAttribute("dir"), "ltr");
+}, "Get element with ltr dir attribute");
+
+test(() => {
+  const el = document.getElementById("get-is-invalid");
+
+  assert_equals(el.dir, "");
+  assert_equals(el.getAttribute("dir"), "whatisthisfor");
+}, "Get element with invalid dir attribute");
+
+test(() => {
+  const el = document.getElementById("set-empty-dir");
+
+  el.dir = "";
+
+  assert_equals(el.dir, "");
+  assert_equals(el.getAttribute("dir"), "");
+}, "Set dir attribute to the empty string");
+
+test(() => {
+  const el = document.getElementById("set-to-ltr");
+
+  el.dir = "LTR";
+
+  assert_equals(el.dir, "ltr");
+  assert_equals(el.getAttribute("dir"), "LTR");
+}, "Set dir attribute to ltr");
+
+test(() => {
+  const el = document.getElementById("set-to-invalid");
+
+  el.dir = "whatisthisfor";
+
+  assert_equals(el.dir, "");
+  assert_equals(el.getAttribute("dir"), "whatisthisfor");
+}, "Set dir attribute to an invalid value");
+</script>