From 98c4f506b72d1a0d2553537afc27243f69254d4c Mon Sep 17 00:00:00 2001
From: Pierre Tachoire <pierre@lightpanda.io>
Date: Fri, 1 Dec 2023 15:36:56 +0100
Subject: [PATCH 1/6] dom: implement element.*Attribute

---
 src/dom/element.zig                           |  50 +
 src/netsurf.zig                               |  28 +
 src/run_tests.zig                             |   2 +
 tests/wpt/dom/nodes/Element-hasAttribute.html |  32 +
 .../wpt/dom/nodes/Element-hasAttributes.html  |  40 +
 .../dom/nodes/Element-removeAttribute.html    |  58 ++
 .../dom/nodes/Element-removeAttributeNS.html  |  18 +
 .../Element-setAttribute-crbug-1138487.html   |  22 +
 tests/wpt/dom/nodes/Element-setAttribute.html |  38 +
 tests/wpt/dom/nodes/attributes.html           | 858 ++++++++++++++++++
 tests/wpt/dom/nodes/attributes.js             |  18 +
 tests/wpt/dom/nodes/productions.js            |   3 +
 12 files changed, 1167 insertions(+)
 create mode 100644 tests/wpt/dom/nodes/Element-hasAttribute.html
 create mode 100644 tests/wpt/dom/nodes/Element-hasAttributes.html
 create mode 100644 tests/wpt/dom/nodes/Element-removeAttribute.html
 create mode 100644 tests/wpt/dom/nodes/Element-removeAttributeNS.html
 create mode 100644 tests/wpt/dom/nodes/Element-setAttribute-crbug-1138487.html
 create mode 100644 tests/wpt/dom/nodes/Element-setAttribute.html
 create mode 100644 tests/wpt/dom/nodes/attributes.html
 create mode 100644 tests/wpt/dom/nodes/attributes.js
 create mode 100644 tests/wpt/dom/nodes/productions.js

diff --git a/src/dom/element.zig b/src/dom/element.zig
index c5f9a645..0410ad1e 100644
--- a/src/dom/element.zig
+++ b/src/dom/element.zig
@@ -2,6 +2,10 @@ const std = @import("std");
 
 const parser = @import("../netsurf.zig");
 
+const jsruntime = @import("jsruntime");
+const Case = jsruntime.test_utils.Case;
+const checkCases = jsruntime.test_utils.checkCases;
+
 const Node = @import("node.zig").Node;
 const HTMLElem = @import("../html/elements.zig");
 pub const Union = @import("../html/elements.zig").Union;
@@ -22,4 +26,50 @@ pub const Element = struct {
     pub fn get_localName(self: *parser.Element) ![]const u8 {
         return try parser.elementLocalName(self);
     }
+
+    pub fn _getAttribute(self: *parser.Element, qname: []const u8) !?[]const u8 {
+        return try parser.elementGetAttribute(self, qname);
+    }
+
+    pub fn _setAttribute(self: *parser.Element, qname: []const u8, value: []const u8) !void {
+        return try parser.elementSetAttribute(self, qname, value);
+    }
+
+    pub fn _removeAttribute(self: *parser.Element, qname: []const u8) !void {
+        return try parser.elementRemoveAttribute(self, qname);
+    }
+
+    pub fn _hasAttribute(self: *parser.Element, qname: []const u8) !bool {
+        return try parser.elementHasAttribute(self, qname);
+    }
 };
+
+// Tests
+// -----
+
+pub fn testExecFn(
+    _: std.mem.Allocator,
+    js_env: *jsruntime.Env,
+    comptime _: []jsruntime.API,
+) !void {
+    var attribute = [_]Case{
+        .{ .src = "let div = document.getElementById('content')", .ex = "undefined" },
+        .{ .src = "div.getAttribute('id')", .ex = "content" },
+
+        .{ .src = "div.hasAttribute('foo')", .ex = "false" },
+        .{ .src = "div.getAttribute('foo')", .ex = "null" },
+
+        .{ .src = "div.setAttribute('foo', 'bar')", .ex = "undefined" },
+        .{ .src = "div.hasAttribute('foo')", .ex = "true" },
+        .{ .src = "div.getAttribute('foo')", .ex = "bar" },
+
+        .{ .src = "div.setAttribute('foo', 'baz')", .ex = "undefined" },
+        .{ .src = "div.hasAttribute('foo')", .ex = "true" },
+        .{ .src = "div.getAttribute('foo')", .ex = "baz" },
+
+        .{ .src = "div.removeAttribute('foo')", .ex = "undefined" },
+        .{ .src = "div.hasAttribute('foo')", .ex = "false" },
+        .{ .src = "div.getAttribute('foo')", .ex = "null" },
+    };
+    try checkCases(js_env, &attribute);
+}
diff --git a/src/netsurf.zig b/src/netsurf.zig
index a7d0a22f..1c857ad6 100644
--- a/src/netsurf.zig
+++ b/src/netsurf.zig
@@ -749,6 +749,34 @@ pub fn elementGetAttribute(elem: *Element, name: []const u8) !?[]const u8 {
     return stringToData(s.?);
 }
 
+pub fn elementSetAttribute(elem: *Element, qname: []const u8, value: []const u8) !void {
+    const err = elementVtable(elem).dom_element_set_attribute.?(
+        elem,
+        try stringFromData(qname),
+        try stringFromData(value),
+    );
+    try DOMErr(err);
+}
+
+pub fn elementRemoveAttribute(elem: *Element, qname: []const u8) !void {
+    const err = elementVtable(elem).dom_element_remove_attribute.?(
+        elem,
+        try stringFromData(qname),
+    );
+    try DOMErr(err);
+}
+
+pub fn elementHasAttribute(elem: *Element, qname: []const u8) !bool {
+    var res: bool = undefined;
+    const err = elementVtable(elem).dom_element_has_attribute.?(
+        elem,
+        try stringFromData(qname),
+        &res,
+    );
+    try DOMErr(err);
+    return res;
+}
+
 pub fn elementHasClass(elem: *Element, class: []const u8) !bool {
     var res: bool = undefined;
     const err = elementVtable(elem).dom_element_has_class.?(
diff --git a/src/run_tests.zig b/src/run_tests.zig
index 9edab848..e478b84f 100644
--- a/src/run_tests.zig
+++ b/src/run_tests.zig
@@ -11,6 +11,7 @@ const HTMLDocumentTestExecFn = @import("html/document.zig").testExecFn;
 const nodeTestExecFn = @import("dom/node.zig").testExecFn;
 const characterDataTestExecFn = @import("dom/character_data.zig").testExecFn;
 const textTestExecFn = @import("dom/text.zig").testExecFn;
+const elementTestExecFn = @import("dom/element.zig").testExecFn;
 const HTMLCollectionTestExecFn = @import("dom/html_collection.zig").testExecFn;
 const DOMExceptionTestExecFn = @import("dom/exceptions.zig").testExecFn;
 const DOMImplementationExecFn = @import("dom/implementation.zig").testExecFn;
@@ -56,6 +57,7 @@ fn testsAllExecFn(
         nodeTestExecFn,
         characterDataTestExecFn,
         textTestExecFn,
+        elementTestExecFn,
         HTMLCollectionTestExecFn,
         DOMExceptionTestExecFn,
         DOMImplementationExecFn,
diff --git a/tests/wpt/dom/nodes/Element-hasAttribute.html b/tests/wpt/dom/nodes/Element-hasAttribute.html
new file mode 100644
index 00000000..26528d75
--- /dev/null
+++ b/tests/wpt/dom/nodes/Element-hasAttribute.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Element.prototype.hasAttribute</title>
+<link rel=help href="https://dom.spec.whatwg.org/#dom-element-hasattribute">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<span data-e2="2" data-F2="3" id="t"></span>
+
+<script>
+"use strict";
+
+test(() => {
+
+  const el = document.createElement("p");
+  el.setAttributeNS("foo", "x", "first");
+
+  assert_true(el.hasAttribute("x"));
+
+}, "hasAttribute should check for attribute presence, irrespective of namespace");
+
+test(() => {
+
+  const el = document.getElementById("t");
+
+  assert_true(el.hasAttribute("data-e2"));
+  assert_true(el.hasAttribute("data-E2"));
+  assert_true(el.hasAttribute("data-f2"));
+  assert_true(el.hasAttribute("data-F2"));
+
+}, "hasAttribute should work with all attribute casings");
+</script>
diff --git a/tests/wpt/dom/nodes/Element-hasAttributes.html b/tests/wpt/dom/nodes/Element-hasAttributes.html
new file mode 100644
index 00000000..fbb9c233
--- /dev/null
+++ b/tests/wpt/dom/nodes/Element-hasAttributes.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<meta charset="utf-8">
+<title></title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<button></button>
+<div id="foo"></div>
+<p data-foo=""></p>
+
+<script>
+test(function() {
+    var buttonElement = document.getElementsByTagName('button')[0];
+    assert_equals(buttonElement.hasAttributes(), false, 'hasAttributes() on empty element must return false.');
+
+    var emptyDiv = document.createElement('div');
+    assert_equals(emptyDiv.hasAttributes(), false, 'hasAttributes() on dynamically created empty element must return false.');
+
+}, 'element.hasAttributes() must return false when the element does not have attribute.');
+
+test(function() {
+    var divWithId = document.getElementById('foo');
+    assert_equals(divWithId.hasAttributes(), true, 'hasAttributes() on element with id attribute must return true.');
+
+    var divWithClass = document.createElement('div');
+    divWithClass.setAttribute('class', 'foo');
+    assert_equals(divWithClass.hasAttributes(), true, 'hasAttributes() on dynamically created element with class attribute must return true.');
+
+    var pWithCustomAttr = document.getElementsByTagName('p')[0];
+    assert_equals(pWithCustomAttr.hasAttributes(), true, 'hasAttributes() on element with custom attribute must return true.');
+
+    var divWithCustomAttr = document.createElement('div');
+    divWithCustomAttr.setAttribute('data-custom', 'foo');
+    assert_equals(divWithCustomAttr.hasAttributes(), true, 'hasAttributes() on dynamically created element with custom attribute must return true.');
+
+}, 'element.hasAttributes() must return true when the element has attribute.');
+
+</script>
+</body>
diff --git a/tests/wpt/dom/nodes/Element-removeAttribute.html b/tests/wpt/dom/nodes/Element-removeAttribute.html
new file mode 100644
index 00000000..df79e62c
--- /dev/null
+++ b/tests/wpt/dom/nodes/Element-removeAttribute.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Element.prototype.removeAttribute</title>
+<link rel=help href="https://dom.spec.whatwg.org/#dom-element-removeattribute">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+"use strict";
+
+test(() => {
+
+  const el = document.createElement("p");
+  el.setAttribute("x", "first");
+  el.setAttributeNS("foo", "x", "second");
+
+  assert_equals(el.attributes.length, 2);
+  assert_equals(el.getAttribute("x"), "first");
+  assert_equals(el.getAttributeNS(null, "x"), "first");
+  assert_equals(el.getAttributeNS("foo", "x"), "second");
+
+  // removeAttribute removes the first attribute with name "x" that
+  // we set on the element, irrespective of namespace.
+  el.removeAttribute("x");
+
+  // The only attribute remaining should be the second one.
+  assert_equals(el.getAttribute("x"), "second");
+  assert_equals(el.getAttributeNS(null, "x"), null);
+  assert_equals(el.getAttributeNS("foo", "x"), "second");
+  assert_equals(el.attributes.length, 1, "one attribute");
+
+}, "removeAttribute should remove the first attribute, irrespective of namespace, when the first attribute is " +
+   "not in a namespace");
+
+test(() => {
+
+  const el = document.createElement("p");
+  el.setAttributeNS("foo", "x", "first");
+  el.setAttributeNS("foo2", "x", "second");
+
+  assert_equals(el.attributes.length, 2);
+  assert_equals(el.getAttribute("x"), "first");
+  assert_equals(el.getAttributeNS("foo", "x"), "first");
+  assert_equals(el.getAttributeNS("foo2", "x"), "second");
+
+  // removeAttribute removes the first attribute with name "x" that
+  // we set on the element, irrespective of namespace.
+  el.removeAttribute("x");
+
+  // The only attribute remaining should be the second one.
+  assert_equals(el.getAttribute("x"), "second");
+  assert_equals(el.getAttributeNS("foo", "x"), null);
+  assert_equals(el.getAttributeNS("foo2", "x"), "second");
+  assert_equals(el.attributes.length, 1, "one attribute");
+
+}, "removeAttribute should remove the first attribute, irrespective of namespace, when the first attribute is " +
+   "in a namespace");
+</script>
diff --git a/tests/wpt/dom/nodes/Element-removeAttributeNS.html b/tests/wpt/dom/nodes/Element-removeAttributeNS.html
new file mode 100644
index 00000000..a2773e6f
--- /dev/null
+++ b/tests/wpt/dom/nodes/Element-removeAttributeNS.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Element.removeAttributeNS</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="attributes.js"></script>
+<div id="log"></div>
+<script>
+var XML = "http://www.w3.org/XML/1998/namespace"
+
+test(function() {
+  var el = document.createElement("foo")
+  el.setAttributeNS(XML, "a:bb", "pass")
+  attr_is(el.attributes[0], "pass", "bb", XML, "a", "a:bb")
+  el.removeAttributeNS(XML, "a:bb")
+  assert_equals(el.attributes.length, 1)
+  attr_is(el.attributes[0], "pass", "bb", XML, "a", "a:bb")
+}, "removeAttributeNS should take a local name.")
+</script>
diff --git a/tests/wpt/dom/nodes/Element-setAttribute-crbug-1138487.html b/tests/wpt/dom/nodes/Element-setAttribute-crbug-1138487.html
new file mode 100644
index 00000000..9aa9ed81
--- /dev/null
+++ b/tests/wpt/dom/nodes/Element-setAttribute-crbug-1138487.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+// Regression test for crbug.com/1138487.
+//
+// It was possible for a non-ASCII-lowercase string to be used when inserting
+// into the attribute collection if a hashtable encountered it during probing
+// while looking for the ASCII-lowercase equivalent.
+//
+// This caused such a string to be illegally used as an attribute name, thus
+// causing inconsistent behavior in future attribute lookup.
+test(() => {
+  const el = document.createElement('div');
+  el.setAttribute('labelXQL', 'abc');
+  el.setAttribute('_valueXQL', 'def');
+  assert_equals(el.getAttribute('labelXQL'), 'abc');
+  assert_equals(el.getAttribute('labelxql'), 'abc');
+  assert_equals(el.getAttribute('_valueXQL'), 'def');
+  assert_equals(el.getAttribute('_valuexql'), 'def');
+}, "Attributes first seen in mixed ASCII case should not be corrupted.");
+</script>
diff --git a/tests/wpt/dom/nodes/Element-setAttribute.html b/tests/wpt/dom/nodes/Element-setAttribute.html
new file mode 100644
index 00000000..76094068
--- /dev/null
+++ b/tests/wpt/dom/nodes/Element-setAttribute.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Element.prototype.setAttribute</title>
+<link rel=help href="https://dom.spec.whatwg.org/#dom-element-setattribute">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+"use strict";
+
+test(() => {
+
+  const el = document.createElement("p");
+  el.setAttributeNS("foo", "x", "first");
+  el.setAttributeNS("foo2", "x", "second");
+
+  el.setAttribute("x", "changed");
+
+  assert_equals(el.attributes.length, 2);
+  assert_equals(el.getAttribute("x"), "changed");
+  assert_equals(el.getAttributeNS("foo", "x"), "changed");
+  assert_equals(el.getAttributeNS("foo2", "x"), "second");
+
+}, "setAttribute should change the first attribute, irrespective of namespace");
+
+test(() => {
+  // https://github.com/whatwg/dom/issues/31
+
+  const el = document.createElement("p");
+  el.setAttribute("FOO", "bar");
+
+  assert_equals(el.getAttribute("foo"), "bar");
+  assert_equals(el.getAttribute("FOO"), "bar");
+  assert_equals(el.getAttributeNS("", "foo"), "bar");
+  assert_equals(el.getAttributeNS("", "FOO"), null);
+
+}, "setAttribute should lowercase before setting");
+</script>
diff --git a/tests/wpt/dom/nodes/attributes.html b/tests/wpt/dom/nodes/attributes.html
new file mode 100644
index 00000000..c6db7eb8
--- /dev/null
+++ b/tests/wpt/dom/nodes/attributes.html
@@ -0,0 +1,858 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Attributes tests</title>
+<link rel=help href="https://dom.spec.whatwg.org/#attr">
+<link rel=help href="https://dom.spec.whatwg.org/#dom-element-setattribute">
+<link rel=help href="https://dom.spec.whatwg.org/#dom-element-setattributens">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="attributes.js"></script>
+<script src="productions.js"></script>
+<div id="log"></div>
+<span id="test1"></span>
+<span class="&amp;&lt;&gt;foo"></span>
+<span id="test2">
+  <span ~=""></span>
+  <span ~></span>
+  <span></span>
+</span>
+<script>
+var XML = "http://www.w3.org/XML/1998/namespace"
+var XMLNS = "http://www.w3.org/2000/xmlns/"
+
+// toggleAttribute exhaustive tests
+// Step 1
+test(function() {
+  var el = document.createElement("foo")
+  for (var i = 0; i < invalid_names.length; i++) {
+    assert_throws_dom("INVALID_CHARACTER_ERR", function() { el.toggleAttribute(invalid_names[i], true) })
+  }
+  for (var i = 0; i < invalid_names.length; i++) {
+    assert_throws_dom("INVALID_CHARACTER_ERR", function() { el.toggleAttribute(invalid_names[i]) })
+  }
+  for (var i = 0; i < invalid_names.length; i++) {
+    assert_throws_dom("INVALID_CHARACTER_ERR", function() { el.toggleAttribute(invalid_names[i], false) })
+  }
+}, "When qualifiedName does not match the Name production, an " +
+   "INVALID_CHARACTER_ERR exception is to be thrown. (toggleAttribute)")
+test(function() {
+  var el = document.getElementById("test2")
+  for (var i = 0; i < el.children.length; i++) {
+    assert_throws_dom("INVALID_CHARACTER_ERR", function() {
+      el.children[i].toggleAttribute("~", false)
+    })
+  }
+  for (var i = 0; i < el.children.length; i++) {
+    assert_throws_dom("INVALID_CHARACTER_ERR", function() {
+      el.children[i].toggleAttribute("~")
+    })
+  }
+  for (var i = 0; i < el.children.length; i++) {
+    assert_throws_dom("INVALID_CHARACTER_ERR", function() {
+      el.children[i].toggleAttribute("~", true)
+    })
+  }
+}, "When qualifiedName does not match the Name production, an " +
+   "INVALID_CHARACTER_ERR exception is to be thrown, even if the attribute " +
+   "is already present. (toggleAttribute)")
+
+// Step 2
+test(function() {
+  var el = document.createElement("div")
+  assert_true(el.toggleAttribute("ALIGN"))
+  assert_true(!el.hasAttributeNS("", "ALIGN"))
+  assert_true(el.hasAttributeNS("", "align"))
+  assert_true(el.hasAttribute("align"))
+  assert_true(!el.toggleAttribute("ALIGN"))
+  assert_true(!el.hasAttributeNS("", "ALIGN"))
+  assert_true(!el.hasAttributeNS("", "align"))
+  assert_true(!el.hasAttribute("align"))
+}, "toggleAttribute should lowercase its name argument (upper case attribute)")
+test(function() {
+  var el = document.createElement("div")
+  assert_true(el.toggleAttribute("CHEEseCaKe"))
+  assert_true(!el.hasAttributeNS("", "CHEEseCaKe"))
+  assert_true(el.hasAttributeNS("", "cheesecake"))
+  assert_true(el.hasAttribute("cheesecake"))
+}, "toggleAttribute should lowercase its name argument (mixed case attribute)")
+
+// Step 3
+test(function() {
+  var el = document.createElement("foo")
+  var tests = ["xmlns", "xmlns:a", "xmlnsx", "xmlns0"]
+  for (var i = 0; i < tests.length; i++) {
+    assert_true(el.toggleAttribute(tests[i]));
+    assert_true(el.hasAttribute(tests[i]));
+  }
+}, "toggleAttribute should not throw even when qualifiedName starts with 'xmlns'")
+
+// Step 4
+test(function() {
+  var el = document.createElement("foo")
+  for (var i = 0; i < valid_names.length; i++) {
+    assert_true(el.toggleAttribute(valid_names[i]))
+    assert_true(el.hasAttribute(valid_names[i]))
+    assert_true(!el.toggleAttribute(valid_names[i]))
+    assert_true(!el.hasAttribute(valid_names[i]))
+    // Check using force attr
+    assert_true(el.toggleAttribute(valid_names[i], true))
+    assert_true(el.hasAttribute(valid_names[i]))
+    assert_true(el.toggleAttribute(valid_names[i], true))
+    assert_true(el.hasAttribute(valid_names[i]))
+    assert_true(!el.toggleAttribute(valid_names[i], false))
+    assert_true(!el.hasAttribute(valid_names[i]))
+  }
+}, "Basic functionality should be intact. (toggleAttribute)")
+
+// Step 5
+test(function() {
+  var el = document.createElement("foo")
+  el.toggleAttribute("a")
+  el.toggleAttribute("b")
+  el.setAttribute("a", "thing")
+  el.toggleAttribute("c")
+  attributes_are(el, [["a", "thing"],
+                      ["b", ""],
+                      ["c", ""]])
+}, "toggleAttribute should not change the order of previously set attributes.")
+test(function() {
+  var el = document.createElement("baz")
+  el.setAttributeNS("ab", "attr", "fail")
+  el.setAttributeNS("kl", "attr", "pass")
+  el.toggleAttribute("attr")
+  attributes_are(el, [["attr", "pass", "kl"]])
+}, "toggleAttribute should set the first attribute with the given name")
+test(function() {
+  // Based on a test by David Flanagan.
+  var el = document.createElement("baz")
+  el.setAttributeNS("foo", "foo:bar", "1");
+  el.setAttributeNS("foo", "foo:bat", "2");
+  assert_equals(el.getAttribute("foo:bar"), "1")
+  assert_equals(el.getAttribute("foo:bat"), "2")
+  attr_is(el.attributes[0], "1", "bar", "foo", "foo", "foo:bar")
+  attr_is(el.attributes[1], "2", "bat", "foo", "foo", "foo:bat")
+  el.toggleAttribute("foo:bar");
+  assert_true(!el.hasAttribute("foo:bar"))
+  attr_is(el.attributes[0], "2", "bat", "foo", "foo", "foo:bat")
+}, "toggleAttribute should set the attribute with the given qualified name")
+
+test(function() {
+  var el = document.createElement("foo")
+  el.style = "color: red; background-color: green"
+  assert_equals(el.toggleAttribute("style"), false)
+}, "Toggling element with inline style should make inline style disappear")
+
+// setAttribute exhaustive tests
+// Step 1
+test(function() {
+  var el = document.createElement("foo")
+  for (var i = 0; i < invalid_names.length; i++) {
+    assert_throws_dom("INVALID_CHARACTER_ERR", function() { el.setAttribute(invalid_names[i], "test") })
+  }
+}, "When qualifiedName does not match the Name production, an " +
+   "INVALID_CHARACTER_ERR exception is to be thrown. (setAttribute)")
+test(function() {
+  var el = document.getElementById("test2")
+  for (var i = 0; i < el.children.length; i++) {
+    assert_throws_dom("INVALID_CHARACTER_ERR", function() {
+      el.children[i].setAttribute("~", "test")
+    })
+  }
+}, "When qualifiedName does not match the Name production, an " +
+   "INVALID_CHARACTER_ERR exception is to be thrown, even if the attribute " +
+   "is already present. (setAttribute)")
+
+// Step 2
+test(function() {
+  var el = document.createElement("div")
+  el.setAttribute("ALIGN", "left")
+  assert_equals(el.getAttributeNS("", "ALIGN"), null)
+  assert_equals(el.getAttributeNS("", "align"), "left")
+  assert_equals(el.getAttribute("align"), "left")
+}, "setAttribute should lowercase its name argument (upper case attribute)")
+test(function() {
+  var el = document.createElement("div")
+  el.setAttribute("CHEEseCaKe", "tasty")
+  assert_equals(el.getAttributeNS("", "CHEEseCaKe"), null)
+  assert_equals(el.getAttributeNS("", "cheesecake"), "tasty")
+  assert_equals(el.getAttribute("cheesecake"), "tasty")
+}, "setAttribute should lowercase its name argument (mixed case attribute)")
+
+// Step 3
+test(function() {
+  var el = document.createElement("foo")
+  var tests = ["xmlns", "xmlns:a", "xmlnsx", "xmlns0"]
+  for (var i = 0; i < tests.length; i++) {
+    el.setAttribute(tests[i], "success");
+  }
+}, "setAttribute should not throw even when qualifiedName starts with 'xmlns'")
+
+// Step 4
+test(function() {
+  var el = document.createElement("foo")
+  for (var i = 0; i < valid_names.length; i++) {
+    el.setAttribute(valid_names[i], "test")
+    assert_equals(el.getAttribute(valid_names[i]), "test")
+  }
+}, "Basic functionality should be intact.")
+
+// Step 5
+test(function() {
+  var el = document.createElement("foo")
+  el.setAttribute("a", "1")
+  el.setAttribute("b", "2")
+  el.setAttribute("a", "3")
+  el.setAttribute("c", "4")
+  attributes_are(el, [["a", "3"],
+                      ["b", "2"],
+                      ["c", "4"]])
+}, "setAttribute should not change the order of previously set attributes.")
+test(function() {
+  var el = document.createElement("baz")
+  el.setAttributeNS("ab", "attr", "fail")
+  el.setAttributeNS("kl", "attr", "pass")
+  el.setAttribute("attr", "pass")
+  attributes_are(el, [["attr", "pass", "ab"],
+                      ["attr", "pass", "kl"]])
+}, "setAttribute should set the first attribute with the given name")
+test(function() {
+  // Based on a test by David Flanagan.
+  var el = document.createElement("baz")
+  el.setAttributeNS("foo", "foo:bar", "1");
+  assert_equals(el.getAttribute("foo:bar"), "1")
+  attr_is(el.attributes[0], "1", "bar", "foo", "foo", "foo:bar")
+  el.setAttribute("foo:bar", "2");
+  assert_equals(el.getAttribute("foo:bar"), "2")
+  attr_is(el.attributes[0], "2", "bar", "foo", "foo", "foo:bar")
+}, "setAttribute should set the attribute with the given qualified name")
+
+// setAttributeNS exhaustive tests
+// Step 1
+test(function() {
+  var el = document.createElement("foo")
+  for (var i = 0, il = invalid_names.length; i < il; ++i) {
+    assert_throws_dom("INVALID_CHARACTER_ERR",
+                      function() { el.setAttributeNS("a", invalid_names[i], "fail") })
+  }
+}, "When qualifiedName does not match the Name production, an " +
+   "INVALID_CHARACTER_ERR exception is to be thrown. (setAttributeNS)")
+
+test(function() {
+  var el = document.getElementById("test2")
+  for (var i = 0; i < el.children.length; i++) {
+    assert_throws_dom("INVALID_CHARACTER_ERR", function() {
+      el.children[i].setAttributeNS(null, "~", "test")
+    })
+  }
+}, "When qualifiedName does not match the Name production, an " +
+   "INVALID_CHARACTER_ERR exception is to be thrown, even if the attribute " +
+   "is already present. (setAttributeNS)")
+
+// Step 2
+test(function() {
+  var el = document.createElement("foo")
+  for (var i = 0, il = invalid_qnames.length; i < il; ++i) {
+    assert_throws_dom("INVALID_CHARACTER_ERR",
+                      function() { el.setAttributeNS("a", invalid_qnames[i], "fail") },
+                      "Expected exception for " + invalid_qnames[i] + ".")
+  }
+}, "When qualifiedName does not match the QName production, an " +
+   "INVALID_CHARACTER_ERR exception is to be thrown.")
+
+// Step 3
+test(function() {
+  var el = document.createElement("foo")
+  el.setAttributeNS(null, "aa", "bb")
+  el.setAttributeNS("", "xx", "bb")
+  attributes_are(el, [["aa", "bb"],
+                      ["xx", "bb"]])
+}, "null and the empty string should result in a null namespace.")
+
+// Step 4
+test(function() {
+  var el = document.createElement("foo")
+  assert_throws_dom("NAMESPACE_ERR",
+                    function() { el.setAttributeNS("", "aa:bb", "fail") })
+  assert_throws_dom("NAMESPACE_ERR",
+                    function() { el.setAttributeNS(null, "aa:bb", "fail") })
+}, "A namespace is required to use a prefix.")
+
+// Step 5
+test(function() {
+  var el = document.createElement("foo")
+  assert_throws_dom("NAMESPACE_ERR",
+                    function() { el.setAttributeNS("a", "xml:bb", "fail") })
+}, "The xml prefix should not be allowed for arbitrary namespaces")
+test(function() {
+  var el = document.createElement("foo")
+  el.setAttributeNS(XML, "a:bb", "pass")
+  assert_equals(el.attributes.length, 1)
+  attr_is(el.attributes[0], "pass", "bb", XML, "a", "a:bb")
+}, "XML-namespaced attributes don't need an xml prefix")
+
+// Step 6
+test(function() {
+  var el = document.createElement("foo")
+  assert_throws_dom("NAMESPACE_ERR",
+                    function() { el.setAttributeNS("a", "xmlns:bb", "fail") })
+}, "The xmlns prefix should not be allowed for arbitrary namespaces")
+test(function() {
+  var el = document.createElement("foo")
+  assert_throws_dom("NAMESPACE_ERR",
+                    function() { el.setAttributeNS("a", "xmlns", "fail") })
+}, "The xmlns qualified name should not be allowed for arbitrary namespaces")
+test(function() {
+  var el = document.createElement("foo")
+  el.setAttributeNS("ns", "a:xmlns", "pass")
+  assert_equals(el.attributes.length, 1)
+  attr_is(el.attributes[0], "pass", "xmlns", "ns", "a", "a:xmlns")
+}, "xmlns should be allowed as local name")
+
+// Step 7
+test(function() {
+  var el = document.createElement("foo")
+  assert_throws_dom("NAMESPACE_ERR",
+                    function() { el.setAttributeNS(XMLNS, "a:xmlns", "fail") })
+  assert_throws_dom("NAMESPACE_ERR",
+                    function() { el.setAttributeNS(XMLNS, "b:foo", "fail") })
+}, "The XMLNS namespace should require xmlns as prefix or qualified name")
+test(function() {
+  var el = document.createElement("foo")
+  el.setAttributeNS(XMLNS, "xmlns:a", "pass")
+  assert_equals(el.attributes.length, 1)
+  attr_is(el.attributes[0], "pass", "a", XMLNS, "xmlns", "xmlns:a")
+}, "xmlns should be allowed as prefix in the XMLNS namespace")
+test(function() {
+  var el = document.createElement("foo")
+  el.setAttributeNS(XMLNS, "xmlns", "pass")
+  assert_equals(el.attributes.length, 1)
+  attr_is(el.attributes[0], "pass", "xmlns", XMLNS, null, "xmlns")
+}, "xmlns should be allowed as qualified name in the XMLNS namespace")
+
+// Step 8-9
+test(function() {
+  var el = document.createElement("foo")
+  el.setAttributeNS("a", "foo:bar", "X")
+  assert_equals(el.attributes.length, 1)
+  attr_is(el.attributes[0], "X", "bar", "a", "foo", "foo:bar")
+
+  el.setAttributeNS("a", "quux:bar", "Y")
+  assert_equals(el.attributes.length, 1)
+  attr_is(el.attributes[0], "Y", "bar", "a", "foo", "foo:bar")
+  el.removeAttributeNS("a", "bar")
+}, "Setting the same attribute with another prefix should not change the prefix")
+
+// Miscellaneous tests
+test(function() {
+  var el = document.createElement("iframe")
+  el.setAttribute("src", "file:///home")
+  assert_equals(el.getAttribute("src"), "file:///home")
+}, "setAttribute should not throw even if a load is not allowed")
+test(function() {
+  var docFragment = document.createDocumentFragment()
+  var newOne = document.createElement("newElement")
+  newOne.setAttribute("newdomestic", "Yes")
+  docFragment.appendChild(newOne)
+  var domesticNode = docFragment.firstChild
+  var attr = domesticNode.attributes.item(0)
+  attr_is(attr, "Yes", "newdomestic", null, null, "newdomestic")
+}, "Attributes should work in document fragments.")
+test(function() {
+  var el = document.createElement("foo")
+  el.setAttribute("x", "y")
+  var attr = el.attributes[0]
+  attr.value = "Y&lt;"
+  attr_is(attr, "Y&lt;", "x", null, null, "x")
+  assert_equals(el.getAttribute("x"), "Y&lt;")
+}, "Attribute values should not be parsed.")
+test(function() {
+  var el = document.getElementsByTagName("span")[0]
+  attr_is(el.attributes[0], "test1", "id", null, null, "id")
+}, "Specified attributes should be accessible.")
+test(function() {
+  var el = document.getElementsByTagName("span")[1]
+  attr_is(el.attributes[0], "&<>foo", "class", null, null, "class")
+}, "Entities in attributes should have been expanded while parsing.")
+
+test(function() {
+  var el = document.createElement("div")
+  assert_equals(el.hasAttribute("bar"), false)
+  assert_equals(el.hasAttributeNS(null, "bar"), false)
+  assert_equals(el.hasAttributeNS("", "bar"), false)
+  assert_equals(el.getAttribute("bar"), null)
+  assert_equals(el.getAttributeNS(null, "bar"), null)
+  assert_equals(el.getAttributeNS("", "bar"), null)
+}, "Unset attributes return null")
+test(function() {
+  var el = document.createElement("div")
+  el.setAttributeNS("ab", "attr", "t1")
+  el.setAttributeNS("kl", "attr", "t2")
+  assert_equals(el.hasAttribute("attr"), true)
+  assert_equals(el.hasAttributeNS("ab", "attr"), true)
+  assert_equals(el.hasAttributeNS("kl", "attr"), true)
+  assert_equals(el.getAttribute("attr"), "t1")
+  assert_equals(el.getAttributeNS("ab", "attr"), "t1")
+  assert_equals(el.getAttributeNS("kl", "attr"), "t2")
+  assert_equals(el.getAttributeNS(null, "attr"), null)
+  assert_equals(el.getAttributeNS("", "attr"), null)
+}, "First set attribute is returned by getAttribute")
+test(function() {
+  var el = document.createElement("div")
+  el.setAttribute("style", "color:#fff;")
+  assert_equals(el.hasAttribute("style"), true)
+  assert_equals(el.hasAttributeNS(null, "style"), true)
+  assert_equals(el.hasAttributeNS("", "style"), true)
+  assert_equals(el.getAttribute("style"), "color:#fff;")
+  assert_equals(el.getAttributeNS(null, "style"), "color:#fff;")
+  assert_equals(el.getAttributeNS("", "style"), "color:#fff;")
+}, "Style attributes are not normalized")
+test(function() {
+  var el = document.createElement("div")
+  el.setAttributeNS("", "ALIGN", "left")
+  assert_equals(el.hasAttribute("ALIGN"), false)
+  assert_equals(el.hasAttribute("align"), false)
+  assert_equals(el.hasAttributeNS(null, "ALIGN"), true)
+  assert_equals(el.hasAttributeNS(null, "align"), false)
+  assert_equals(el.hasAttributeNS("", "ALIGN"), true)
+  assert_equals(el.hasAttributeNS("", "align"), false)
+  assert_equals(el.getAttribute("ALIGN"), null)
+  assert_equals(el.getAttribute("align"), null)
+  assert_equals(el.getAttributeNS(null, "ALIGN"), "left")
+  assert_equals(el.getAttributeNS("", "ALIGN"), "left")
+  assert_equals(el.getAttributeNS(null, "align"), null)
+  assert_equals(el.getAttributeNS("", "align"), null)
+  el.removeAttributeNS("", "ALIGN")
+}, "Only lowercase attributes are returned on HTML elements (upper case attribute)")
+test(function() {
+  var el = document.createElement("div")
+  el.setAttributeNS("", "CHEEseCaKe", "tasty")
+  assert_equals(el.hasAttribute("CHEESECAKE"), false)
+  assert_equals(el.hasAttribute("CHEEseCaKe"), false)
+  assert_equals(el.hasAttribute("cheesecake"), false)
+  assert_equals(el.hasAttributeNS("", "CHEESECAKE"), false)
+  assert_equals(el.hasAttributeNS("", "CHEEseCaKe"), true)
+  assert_equals(el.hasAttributeNS("", "cheesecake"), false)
+  assert_equals(el.hasAttributeNS(null, "CHEESECAKE"), false)
+  assert_equals(el.hasAttributeNS(null, "CHEEseCaKe"), true)
+  assert_equals(el.hasAttributeNS(null, "cheesecake"), false)
+  assert_equals(el.getAttribute("CHEESECAKE"), null)
+  assert_equals(el.getAttribute("CHEEseCaKe"), null)
+  assert_equals(el.getAttribute("cheesecake"), null)
+  assert_equals(el.getAttributeNS(null, "CHEESECAKE"), null)
+  assert_equals(el.getAttributeNS("", "CHEESECAKE"), null)
+  assert_equals(el.getAttributeNS(null, "CHEEseCaKe"), "tasty")
+  assert_equals(el.getAttributeNS("", "CHEEseCaKe"), "tasty")
+  assert_equals(el.getAttributeNS(null, "cheesecake"), null)
+  assert_equals(el.getAttributeNS("", "cheesecake"), null)
+  el.removeAttributeNS("", "CHEEseCaKe")
+}, "Only lowercase attributes are returned on HTML elements (mixed case attribute)")
+test(function() {
+  var el = document.createElement("div")
+  document.body.appendChild(el)
+  el.setAttributeNS("", "align", "left")
+  el.setAttributeNS("xx", "align", "right")
+  el.setAttributeNS("", "foo", "left")
+  el.setAttributeNS("xx", "foo", "right")
+  assert_equals(el.hasAttribute("align"), true)
+  assert_equals(el.hasAttribute("foo"), true)
+  assert_equals(el.hasAttributeNS("xx", "align"), true)
+  assert_equals(el.hasAttributeNS(null, "foo"), true)
+  assert_equals(el.getAttribute("align"), "left")
+  assert_equals(el.getAttribute("foo"), "left")
+  assert_equals(el.getAttributeNS("xx", "align"), "right")
+  assert_equals(el.getAttributeNS(null, "foo"), "left")
+  assert_equals(el.getAttributeNS("", "foo"), "left")
+  el.removeAttributeNS("", "align")
+  el.removeAttributeNS("xx", "align")
+  el.removeAttributeNS("", "foo")
+  el.removeAttributeNS("xx", "foo")
+  document.body.removeChild(el)
+}, "First set attribute is returned with mapped attribute set first")
+test(function() {
+  var el = document.createElement("div")
+  el.setAttributeNS("xx", "align", "right")
+  el.setAttributeNS("", "align", "left")
+  el.setAttributeNS("xx", "foo", "right")
+  el.setAttributeNS("", "foo", "left")
+  assert_equals(el.hasAttribute("align"), true)
+  assert_equals(el.hasAttribute("foo"), true)
+  assert_equals(el.hasAttributeNS("xx", "align"), true)
+  assert_equals(el.hasAttributeNS(null, "foo"), true)
+  assert_equals(el.getAttribute("align"), "right")
+  assert_equals(el.getAttribute("foo"), "right")
+  assert_equals(el.getAttributeNS("xx", "align"), "right")
+  assert_equals(el.getAttributeNS(null, "foo"), "left")
+  assert_equals(el.getAttributeNS("", "foo"), "left")
+  el.removeAttributeNS("", "align")
+  el.removeAttributeNS("xx", "align")
+  el.removeAttributeNS("", "foo")
+  el.removeAttributeNS("xx", "foo")
+}, "First set attribute is returned with mapped attribute set later")
+
+test(function() {
+  var el = document.createElementNS("http://www.example.com", "foo")
+  el.setAttribute("A", "test")
+  assert_equals(el.hasAttribute("A"), true, "hasAttribute()")
+  assert_equals(el.hasAttributeNS("", "A"), true, "el.hasAttributeNS(\"\")")
+  assert_equals(el.hasAttributeNS(null, "A"), true, "el.hasAttributeNS(null)")
+  assert_equals(el.hasAttributeNS(undefined, "A"), true, "el.hasAttributeNS(undefined)")
+  assert_equals(el.hasAttributeNS("foo", "A"), false, "el.hasAttributeNS(\"foo\")")
+
+  assert_equals(el.getAttribute("A"), "test", "getAttribute()")
+  assert_equals(el.getAttributeNS("", "A"), "test", "el.getAttributeNS(\"\")")
+  assert_equals(el.getAttributeNS(null, "A"), "test", "el.getAttributeNS(null)")
+  assert_equals(el.getAttributeNS(undefined, "A"), "test", "el.getAttributeNS(undefined)")
+  assert_equals(el.getAttributeNS("foo", "A"), null, "el.getAttributeNS(\"foo\")")
+}, "Non-HTML element with upper-case attribute")
+
+test(function() {
+  var el = document.createElement("div")
+  el.setAttribute("pre:fix", "value 1")
+  el.setAttribute("fix", "value 2")
+
+  var prefixed = el.attributes[0]
+  assert_equals(prefixed.localName, "pre:fix", "prefixed local name")
+  assert_equals(prefixed.namespaceURI, null, "prefixed namespace")
+
+  var unprefixed = el.attributes[1]
+  assert_equals(unprefixed.localName, "fix", "unprefixed local name")
+  assert_equals(unprefixed.namespaceURI, null, "unprefixed namespace")
+
+  el.removeAttributeNS(null, "pre:fix")
+  assert_equals(el.attributes[0], unprefixed)
+}, "Attribute with prefix in local name")
+
+test(function() {
+  var el = document.createElement("div")
+  el.setAttribute("foo", "bar")
+  var attr = el.attributes[0]
+  assert_equals(attr.ownerElement, el)
+  el.removeAttribute("foo")
+  assert_equals(attr.ownerElement, null)
+}, "Attribute loses its owner when removed")
+
+test(function() {
+  var el = document.createElement("div")
+  el.setAttribute("foo", "bar")
+  var attr = el.attributes[0]
+  var attrNode = el.getAttributeNode("foo");
+  var attrNodeNS = el.getAttributeNodeNS("", "foo");
+  assert_equals(attr, attrNode);
+  assert_equals(attr, attrNodeNS);
+  el.setAttributeNS("x", "foo2", "bar2");
+  var attr2 = el.attributes[1];
+  var attrNodeNS2 = el.getAttributeNodeNS("x", "foo2");
+  assert_equals(attr2, attrNodeNS2);
+}, "Basic functionality of getAttributeNode/getAttributeNodeNS")
+
+test(function() {
+  var el = document.createElement("div")
+  el.setAttribute("foo", "bar")
+  var attrNode = el.getAttributeNode("foo");
+  var attrNodeNS = el.getAttributeNodeNS("", "foo");
+  assert_equals(attrNode, attrNodeNS);
+  el.removeAttribute("foo");
+  var el2 = document.createElement("div");
+  el2.setAttributeNode(attrNode);
+  assert_equals(attrNode, el2.getAttributeNode("foo"));
+  assert_equals(attrNode, el2.attributes[0]);
+  assert_equals(attrNode.ownerElement, el2);
+  assert_equals(attrNode.value, "bar");
+
+   var el3 = document.createElement("div");
+   el2.removeAttribute("foo");
+   el3.setAttribute("foo", "baz");
+   el3.setAttributeNode(attrNode);
+   assert_equals(el3.getAttribute("foo"), "bar");
+}, "Basic functionality of setAttributeNode")
+
+test(function() {
+  var el = document.createElement("div");
+  var attr1 = document.createAttributeNS("ns1", "p1:name");
+  attr1.value = "value1";
+  var attr2 = document.createAttributeNS("ns2", "p2:name");
+  attr2.value = "value2";
+  el.setAttributeNode(attr1);
+  el.setAttributeNode(attr2);
+  assert_equals(el.getAttributeNodeNS("ns1", "name").value, "value1");
+  assert_equals(el.getAttributeNodeNS("ns2", "name").value, "value2");
+}, "setAttributeNode should distinguish attributes with same local name and different namespaces")
+
+test(function() {
+  var el = document.createElement("div");
+  var attr1 = document.createAttributeNS("ns1", "p1:name");
+  attr1.value = "value1";
+  var attr2 = document.createAttributeNS("ns1", "p1:NAME");
+  attr2.value = "VALUE2";
+  el.setAttributeNode(attr1);
+  el.setAttributeNode(attr2);
+  assert_equals(el.getAttributeNodeNS("ns1", "name").value, "value1");
+  assert_equals(el.getAttributeNodeNS("ns1", "NAME").value, "VALUE2");
+}, "setAttributeNode doesn't have case-insensitivity even with an HTMLElement")
+
+test(function() {
+  var el = document.createElement("div")
+  el.setAttributeNS("x", "foo", "bar")
+  var attrNode = el.getAttributeNodeNS("x", "foo");
+  el.removeAttribute("foo");
+  var el2 = document.createElement("div");
+  el2.setAttributeNS("x", "foo", "baz");
+  el2.setAttributeNodeNS(attrNode);
+  assert_equals(el2.getAttributeNS("x", "foo"), "bar");
+}, "Basic functionality of setAttributeNodeNS")
+
+test(function() {
+  var el = document.createElement("div");
+  var other = document.createElement("div");
+  var attr = document.createAttribute("foo");
+  assert_equals(el.setAttributeNode(attr), null);
+  assert_equals(attr.ownerElement, el);
+  assert_throws_dom("INUSE_ATTRIBUTE_ERR",
+                  function() { other.setAttributeNode(attr) },
+                  "Attribute already associated with el")
+}, "If attr’s element is neither null nor element, throw an InUseAttributeError.");
+
+test(function() {
+  var el = document.createElement("div");
+  var attr = document.createAttribute("foo");
+  assert_equals(el.setAttributeNode(attr), null);
+  el.setAttribute("bar", "qux");
+  assert_equals(el.setAttributeNode(attr), attr);
+  assert_equals(el.attributes[0], attr);
+}, "Replacing an attr by itself");
+
+test(function() {
+  var el = document.createElement("div")
+  el.setAttribute("foo", "bar")
+  var attrNode = el.getAttributeNode("foo");
+  el.removeAttributeNode(attrNode);
+  var el2 = document.createElement("div");
+  el2.setAttributeNode(attrNode);
+  assert_equals(el2.attributes[0], attrNode);
+  assert_equals(el.attributes.length, 0);
+}, "Basic functionality of removeAttributeNode")
+
+test(function() {
+  var el = document.createElement("div")
+  el.setAttribute("foo", "bar")
+  var attrNode = el.getAttributeNode("foo");
+  var el2 = document.createElement("div");
+  assert_throws_dom("INUSE_ATTRIBUTE_ERR", function(){el2.setAttributeNode(attrNode)});
+}, "setAttributeNode on bound attribute should throw InUseAttributeError")
+
+// Have to use an async_test to see what a DOMAttrModified listener sees,
+// because otherwise the event dispatch code will swallow our exceptions.  And
+// we want to make sure this test always happens, even when no mutation events
+// run.
+var setAttributeNode_mutation_test = async_test("setAttributeNode, if it fires mutation events, should fire one with the new node when resetting an existing attribute");
+
+test(function(){
+  var el = document.createElement("div")
+  var attrNode1 = document.createAttribute("foo");
+  attrNode1.value = "bar";
+  el.setAttributeNode(attrNode1);
+  var attrNode2 = document.createAttribute("foo");
+  attrNode2.value = "baz";
+
+  el.addEventListener("DOMAttrModified", function(e) {
+    // If this never gets called, that's OK, I guess.  But if it gets called, it
+    // better represent a single modification with attrNode2 as the relatedNode.
+    // We have to do an inner test() call here, because otherwise the exceptions
+    // our asserts trigger will get swallowed by the event dispatch code.
+    setAttributeNode_mutation_test.step(function() {
+      assert_equals(e.attrName, "foo");
+      assert_equals(e.attrChange, MutationEvent.MODIFICATION);
+      assert_equals(e.prevValue, "bar");
+      assert_equals(e.newValue, "baz");
+      assert_equals(e.relatedNode, attrNode2);
+    });
+  });
+
+  var oldNode = el.setAttributeNode(attrNode2);
+  assert_equals(oldNode, attrNode1,
+                "Must return the old attr node from a setAttributeNode call");
+}, "setAttributeNode, if it fires mutation events, should fire one with the new node when resetting an existing attribute (outer shell)");
+setAttributeNode_mutation_test.done();
+
+test(function(){
+  var el = document.createElement("div")
+  el.setAttribute("a", "b");
+  el.setAttribute("c", "d");
+
+  assert_array_equals(Array.prototype.map.call(el.attributes, function(a) { return a.name }),
+                      ["a", "c"]);
+  assert_array_equals(Array.prototype.map.call(el.attributes, function(a) { return a.value }),
+                      ["b", "d"]);
+
+  var attrNode = document.createAttribute("a");
+  attrNode.value = "e";
+  el.setAttributeNode(attrNode);
+
+  assert_array_equals(Array.prototype.map.call(el.attributes, function(a) { return a.name }),
+                      ["a", "c"]);
+  assert_array_equals(Array.prototype.map.call(el.attributes, function(a) { return a.value }),
+                      ["e", "d"]);
+}, "setAttributeNode called with an Attr that has the same name as an existing one should not change attribute order");
+
+test(function() {
+  var el = document.createElement("div");
+  el.setAttribute("foo", "bar");
+  assert_equals(el.getAttributeNames().length, 1);
+  assert_equals(el.getAttributeNames()[0], el.attributes[0].name);
+  assert_equals(el.getAttributeNames()[0], "foo");
+
+  el.removeAttribute("foo");
+  assert_equals(el.getAttributeNames().length, 0);
+
+  el.setAttribute("foo", "bar");
+  el.setAttributeNS("", "FOO", "bar");
+  el.setAttributeNS("dummy1", "foo", "bar");
+  el.setAttributeNS("dummy2", "dummy:foo", "bar");
+  assert_equals(el.getAttributeNames().length, 4);
+  assert_equals(el.getAttributeNames()[0], "foo");
+  assert_equals(el.getAttributeNames()[1], "FOO");
+  assert_equals(el.getAttributeNames()[2], "foo");
+  assert_equals(el.getAttributeNames()[3], "dummy:foo");
+  assert_equals(el.getAttributeNames()[0], el.attributes[0].name);
+  assert_equals(el.getAttributeNames()[1], el.attributes[1].name);
+  assert_equals(el.getAttributeNames()[2], el.attributes[2].name);
+  assert_equals(el.getAttributeNames()[3], el.attributes[3].name);
+
+  el.removeAttributeNS("", "FOO");
+  assert_equals(el.getAttributeNames().length, 3);
+  assert_equals(el.getAttributeNames()[0], "foo");
+  assert_equals(el.getAttributeNames()[1], "foo");
+  assert_equals(el.getAttributeNames()[2], "dummy:foo");
+  assert_equals(el.getAttributeNames()[0], el.attributes[0].name);
+  assert_equals(el.getAttributeNames()[1], el.attributes[1].name);
+  assert_equals(el.getAttributeNames()[2], el.attributes[2].name);
+}, "getAttributeNames tests");
+
+function getEnumerableOwnProps1(obj) {
+  var arr = [];
+  for (var prop in obj) {
+    if (obj.hasOwnProperty(prop)) {
+      arr.push(prop);
+    }
+  }
+  return arr;
+}
+
+function getEnumerableOwnProps2(obj) {
+  return Object.getOwnPropertyNames(obj).filter(
+    function (name) { return Object.getOwnPropertyDescriptor(obj, name).enumerable; })
+}
+
+test(function() {
+  var el = document.createElement("div");
+  el.setAttribute("a", "");
+  el.setAttribute("b", "");
+  assert_array_equals(getEnumerableOwnProps1(el.attributes),
+                      ["0", "1"])
+  assert_array_equals(getEnumerableOwnProps2(el.attributes),
+                      ["0", "1"])
+  assert_array_equals(Object.getOwnPropertyNames(el.attributes),
+                      ["0", "1", "a", "b"])
+}, "Own property correctness with basic attributes");
+
+test(function() {
+  var el = document.createElement("div");
+  el.setAttributeNS("", "a", "");
+  el.setAttribute("b", "");
+  el.setAttributeNS("foo", "a", "");
+  assert_array_equals(getEnumerableOwnProps1(el.attributes),
+                      ["0", "1", "2"])
+  assert_array_equals(getEnumerableOwnProps2(el.attributes),
+                      ["0", "1", "2"])
+  assert_array_equals(Object.getOwnPropertyNames(el.attributes),
+                      ["0", "1", "2", "a", "b"])
+  for (var propName of Object.getOwnPropertyNames(el.attributes)) {
+    assert_true(el.attributes[propName] instanceof Attr,
+                "el.attributes has an Attr for property name " + propName);
+  }
+}, "Own property correctness with non-namespaced attribute before same-name namespaced one");
+
+test(function() {
+  var el = document.createElement("div");
+  el.setAttributeNS("foo", "a", "");
+  el.setAttribute("b", "");
+  el.setAttributeNS("", "a", "");
+  assert_array_equals(getEnumerableOwnProps1(el.attributes),
+                      ["0", "1", "2"])
+  assert_array_equals(getEnumerableOwnProps2(el.attributes),
+                      ["0", "1", "2"])
+  assert_array_equals(Object.getOwnPropertyNames(el.attributes),
+                      ["0", "1", "2", "a", "b"])
+  for (var propName of Object.getOwnPropertyNames(el.attributes)) {
+    assert_true(el.attributes[propName] instanceof Attr,
+                "el.attributes has an Attr for property name " + propName);
+  }
+}, "Own property correctness with namespaced attribute before same-name non-namespaced one");
+
+test(function() {
+  var el = document.createElement("div");
+  el.setAttributeNS("foo", "a:b", "");
+  el.setAttributeNS("foo", "c:d", "");
+  el.setAttributeNS("bar", "a:b", "");
+  assert_array_equals(getEnumerableOwnProps1(el.attributes),
+                      ["0", "1", "2"])
+  assert_array_equals(getEnumerableOwnProps2(el.attributes),
+                      ["0", "1", "2"])
+  assert_array_equals(Object.getOwnPropertyNames(el.attributes),
+                      ["0", "1", "2", "a:b", "c:d"])
+  for (var propName of Object.getOwnPropertyNames(el.attributes)) {
+    assert_true(el.attributes[propName] instanceof Attr,
+                "el.attributes has an Attr for property name " + propName);
+  }
+}, "Own property correctness with two namespaced attributes with the same name-with-prefix");
+
+test(function() {
+  var el = document.createElement("div");
+  el.setAttributeNS("foo", "A:B", "");
+  el.setAttributeNS("bar", "c:D", "");
+  el.setAttributeNS("baz", "e:F", "");
+  el.setAttributeNS("qux", "g:h", "");
+  el.setAttributeNS("", "I", "");
+  el.setAttributeNS("", "j", "");
+  assert_array_equals(Object.getOwnPropertyNames(el.attributes),
+                      ["0", "1", "2", "3", "4", "5", "g:h", "j"])
+  for (var propName of Object.getOwnPropertyNames(el.attributes)) {
+    assert_true(el.attributes[propName] instanceof Attr,
+                "el.attributes has an Attr for property name " + propName);
+  }
+}, "Own property names should only include all-lowercase qualified names for an HTML element in an HTML document");
+
+test(function() {
+  var el = document.createElementNS("", "div");
+  el.setAttributeNS("foo", "A:B", "");
+  el.setAttributeNS("bar", "c:D", "");
+  el.setAttributeNS("baz", "e:F", "");
+  el.setAttributeNS("qux", "g:h", "");
+  el.setAttributeNS("", "I", "");
+  el.setAttributeNS("", "j", "");
+  assert_array_equals(Object.getOwnPropertyNames(el.attributes),
+                      ["0", "1", "2", "3", "4", "5", "A:B", "c:D", "e:F", "g:h", "I", "j"])
+  for (var propName of Object.getOwnPropertyNames(el.attributes)) {
+    assert_true(el.attributes[propName] instanceof Attr,
+                "el.attributes has an Attr for property name " + propName);
+  }
+}, "Own property names should include all qualified names for a non-HTML element in an HTML document");
+
+test(function() {
+  var doc = document.implementation.createDocument(null, "");
+  assert_equals(doc.contentType, "application/xml");
+  var el = doc.createElementNS("http://www.w3.org/1999/xhtml", "div");
+  el.setAttributeNS("foo", "A:B", "");
+  el.setAttributeNS("bar", "c:D", "");
+  el.setAttributeNS("baz", "e:F", "");
+  el.setAttributeNS("qux", "g:h", "");
+  el.setAttributeNS("", "I", "");
+  el.setAttributeNS("", "j", "");
+  assert_array_equals(Object.getOwnPropertyNames(el.attributes),
+                      ["0", "1", "2", "3", "4", "5", "A:B", "c:D", "e:F", "g:h", "I", "j"])
+  for (var propName of Object.getOwnPropertyNames(el.attributes)) {
+    assert_true(el.attributes[propName] instanceof Attr,
+                "el.attributes has an Attr for property name " + propName);
+  }
+}, "Own property names should include all qualified names for an HTML element in a non-HTML document");
+</script>
diff --git a/tests/wpt/dom/nodes/attributes.js b/tests/wpt/dom/nodes/attributes.js
new file mode 100644
index 00000000..ef32bf6a
--- /dev/null
+++ b/tests/wpt/dom/nodes/attributes.js
@@ -0,0 +1,18 @@
+function attr_is(attr, v, ln, ns, p, n) {
+  assert_equals(attr.value, v)
+  assert_equals(attr.nodeValue, v)
+  assert_equals(attr.textContent, v)
+  assert_equals(attr.localName, ln)
+  assert_equals(attr.namespaceURI, ns)
+  assert_equals(attr.prefix, p)
+  assert_equals(attr.name, n)
+  assert_equals(attr.nodeName, n);
+  assert_equals(attr.specified, true)
+}
+
+function attributes_are(el, l) {
+  for (var i = 0, il = l.length; i < il; i++) {
+    attr_is(el.attributes[i], l[i][1], l[i][0], (l[i].length < 3) ? null : l[i][2], null, l[i][0])
+    assert_equals(el.attributes[i].ownerElement, el)
+  }
+}
diff --git a/tests/wpt/dom/nodes/productions.js b/tests/wpt/dom/nodes/productions.js
new file mode 100644
index 00000000..218797fc
--- /dev/null
+++ b/tests/wpt/dom/nodes/productions.js
@@ -0,0 +1,3 @@
+var invalid_names = ["", "invalid^Name", "\\", "'", '"', "0", "0:a"] // XXX
+var valid_names = ["x", "X", ":", "a:0"]
+var invalid_qnames = [":a", "b:", "x:y:z"] // XXX

From acf737152c45330080ad1382806e58b9edfff3cf Mon Sep 17 00:00:00 2001
From: Pierre Tachoire <pierre@lightpanda.io>
Date: Fri, 1 Dec 2023 16:25:52 +0100
Subject: [PATCH 2/6] dom: implement element.toggleAttribute

---
 src/dom/element.zig | 67 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 54 insertions(+), 13 deletions(-)

diff --git a/src/dom/element.zig b/src/dom/element.zig
index 0410ad1e..51f7e80b 100644
--- a/src/dom/element.zig
+++ b/src/dom/element.zig
@@ -42,6 +42,36 @@ pub const Element = struct {
     pub fn _hasAttribute(self: *parser.Element, qname: []const u8) !bool {
         return try parser.elementHasAttribute(self, qname);
     }
+
+    // https://dom.spec.whatwg.org/#dom-element-toggleattribute
+    pub fn _toggleAttribute(self: *parser.Element, qname: []const u8, force: ?bool) !bool {
+        const exists = try parser.elementHasAttribute(self, qname);
+
+        // If attribute is null, then:
+        if (!exists) {
+            // If force is not given or is true, create an attribute whose
+            // local name is qualifiedName, value is the empty string and node
+            // document is this’s node document, then append this attribute to
+            // this, and then return true.
+            if (force == null or force.?) {
+                try parser.elementSetAttribute(self, qname, "");
+                return true;
+            }
+
+            // Return false.
+            return false;
+        }
+
+        // Otherwise, if force is not given or is false, remove an attribute
+        // given qualifiedName and this, and then return false.
+        if (force == null or !force.?) {
+            try parser.elementRemoveAttribute(self, qname);
+            return false;
+        }
+
+        // Return true.
+        return true;
+    }
 };
 
 // Tests
@@ -53,23 +83,34 @@ pub fn testExecFn(
     comptime _: []jsruntime.API,
 ) !void {
     var attribute = [_]Case{
-        .{ .src = "let div = document.getElementById('content')", .ex = "undefined" },
-        .{ .src = "div.getAttribute('id')", .ex = "content" },
+        .{ .src = "let a = document.getElementById('content')", .ex = "undefined" },
+        .{ .src = "a.getAttribute('id')", .ex = "content" },
 
-        .{ .src = "div.hasAttribute('foo')", .ex = "false" },
-        .{ .src = "div.getAttribute('foo')", .ex = "null" },
+        .{ .src = "a.hasAttribute('foo')", .ex = "false" },
+        .{ .src = "a.getAttribute('foo')", .ex = "null" },
 
-        .{ .src = "div.setAttribute('foo', 'bar')", .ex = "undefined" },
-        .{ .src = "div.hasAttribute('foo')", .ex = "true" },
-        .{ .src = "div.getAttribute('foo')", .ex = "bar" },
+        .{ .src = "a.setAttribute('foo', 'bar')", .ex = "undefined" },
+        .{ .src = "a.hasAttribute('foo')", .ex = "true" },
+        .{ .src = "a.getAttribute('foo')", .ex = "bar" },
 
-        .{ .src = "div.setAttribute('foo', 'baz')", .ex = "undefined" },
-        .{ .src = "div.hasAttribute('foo')", .ex = "true" },
-        .{ .src = "div.getAttribute('foo')", .ex = "baz" },
+        .{ .src = "a.setAttribute('foo', 'baz')", .ex = "undefined" },
+        .{ .src = "a.hasAttribute('foo')", .ex = "true" },
+        .{ .src = "a.getAttribute('foo')", .ex = "baz" },
 
-        .{ .src = "div.removeAttribute('foo')", .ex = "undefined" },
-        .{ .src = "div.hasAttribute('foo')", .ex = "false" },
-        .{ .src = "div.getAttribute('foo')", .ex = "null" },
+        .{ .src = "a.removeAttribute('foo')", .ex = "undefined" },
+        .{ .src = "a.hasAttribute('foo')", .ex = "false" },
+        .{ .src = "a.getAttribute('foo')", .ex = "null" },
     };
     try checkCases(js_env, &attribute);
+
+    var toggleAttr = [_]Case{
+        .{ .src = "let b = document.getElementById('content')", .ex = "undefined" },
+        .{ .src = "b.toggleAttribute('foo')", .ex = "true" },
+        .{ .src = "b.hasAttribute('foo')", .ex = "true" },
+        .{ .src = "b.getAttribute('foo')", .ex = "" },
+
+        .{ .src = "b.toggleAttribute('foo')", .ex = "false" },
+        .{ .src = "b.hasAttribute('foo')", .ex = "false" },
+    };
+    try checkCases(js_env, &toggleAttr);
 }

From dcb095d9df941a7da5bdbe8ca862fce9965ddbde Mon Sep 17 00:00:00 2001
From: Pierre Tachoire <pierre@lightpanda.io>
Date: Fri, 1 Dec 2023 16:51:58 +0100
Subject: [PATCH 3/6] dom: add element.HasAttributes

---
 src/dom/element.zig | 5 +++++
 src/netsurf.zig     | 7 +++++++
 2 files changed, 12 insertions(+)

diff --git a/src/dom/element.zig b/src/dom/element.zig
index 51f7e80b..2e725102 100644
--- a/src/dom/element.zig
+++ b/src/dom/element.zig
@@ -27,6 +27,10 @@ pub const Element = struct {
         return try parser.elementLocalName(self);
     }
 
+    pub fn _hasAttributes(self: *parser.Element) !bool {
+        return try parser.nodeHasAttributes(parser.elementToNode(self));
+    }
+
     pub fn _getAttribute(self: *parser.Element, qname: []const u8) !?[]const u8 {
         return try parser.elementGetAttribute(self, qname);
     }
@@ -84,6 +88,7 @@ pub fn testExecFn(
 ) !void {
     var attribute = [_]Case{
         .{ .src = "let a = document.getElementById('content')", .ex = "undefined" },
+        .{ .src = "a.hasAttributes()", .ex = "true" },
         .{ .src = "a.getAttribute('id')", .ex = "content" },
 
         .{ .src = "a.hasAttribute('foo')", .ex = "false" },
diff --git a/src/netsurf.zig b/src/netsurf.zig
index 1c857ad6..b0423032 100644
--- a/src/netsurf.zig
+++ b/src/netsurf.zig
@@ -630,6 +630,13 @@ pub fn nodeReplaceChild(node: *Node, new_child: *Node, old_child: *Node) !*Node
     return res.?;
 }
 
+pub fn nodeHasAttributes(node: *Node) !bool {
+    var res: bool = undefined;
+    const err = nodeVtable(node).dom_node_has_attributes.?(node, &res);
+    try DOMErr(err);
+    return res;
+}
+
 // nodeToElement is an helper to convert a node to an element.
 pub inline fn nodeToElement(node: *Node) *Element {
     return @as(*Element, @ptrCast(node));

From ad5c6236a7b78c0a345167c7783f7759981a019d Mon Sep 17 00:00:00 2001
From: Pierre Tachoire <pierre@lightpanda.io>
Date: Sat, 2 Dec 2023 10:54:12 +0100
Subject: [PATCH 4/6] dom: add NamedNodeMap implementation

and create Attr type
---
 src/dom/attribute.zig    |  15 +++++
 src/dom/dom.zig          |   2 +
 src/dom/element.zig      |  10 +++
 src/dom/namednodemap.zig |  80 ++++++++++++++++++++++++
 src/dom/node.zig         |   3 +
 src/netsurf.zig          | 132 +++++++++++++++++++++++++++++++++++++++
 src/run_tests.zig        |   2 +
 7 files changed, 244 insertions(+)
 create mode 100644 src/dom/attribute.zig
 create mode 100644 src/dom/namednodemap.zig

diff --git a/src/dom/attribute.zig b/src/dom/attribute.zig
new file mode 100644
index 00000000..78563920
--- /dev/null
+++ b/src/dom/attribute.zig
@@ -0,0 +1,15 @@
+const std = @import("std");
+
+const parser = @import("../netsurf.zig");
+
+const Node = @import("node.zig").Node;
+const DOMException = @import("exceptions.zig").DOMException;
+
+// WEB IDL https://dom.spec.whatwg.org/#attr
+pub const Attr = struct {
+    pub const Self = parser.Attribute;
+    pub const prototype = *Node;
+    pub const mem_guarantied = true;
+
+    pub const Exception = DOMException;
+};
diff --git a/src/dom/dom.zig b/src/dom/dom.zig
index 6a29a937..564dc7ca 100644
--- a/src/dom/dom.zig
+++ b/src/dom/dom.zig
@@ -3,12 +3,14 @@ const generate = @import("../generate.zig");
 const DOMException = @import("exceptions.zig").DOMException;
 const EventTarget = @import("event_target.zig").EventTarget;
 const DOMImplementation = @import("implementation.zig").DOMImplementation;
+const NamedNodeMap = @import("namednodemap.zig").NamedNodeMap;
 const Nod = @import("node.zig");
 
 pub const Interfaces = generate.Tuple(.{
     DOMException,
     EventTarget,
     DOMImplementation,
+    NamedNodeMap,
     Nod.Node,
     Nod.Interfaces,
 });
diff --git a/src/dom/element.zig b/src/dom/element.zig
index 2e725102..13678947 100644
--- a/src/dom/element.zig
+++ b/src/dom/element.zig
@@ -10,12 +10,16 @@ const Node = @import("node.zig").Node;
 const HTMLElem = @import("../html/elements.zig");
 pub const Union = @import("../html/elements.zig").Union;
 
+const DOMException = @import("exceptions.zig").DOMException;
+
 // WEB IDL https://dom.spec.whatwg.org/#element
 pub const Element = struct {
     pub const Self = parser.Element;
     pub const prototype = *Node;
     pub const mem_guarantied = true;
 
+    pub const Exception = DOMException;
+
     pub fn toInterface(e: *parser.Element) !Union {
         return try HTMLElem.toInterface(Union, e);
     }
@@ -27,6 +31,10 @@ pub const Element = struct {
         return try parser.elementLocalName(self);
     }
 
+    pub fn get_attributes(self: *parser.Element) !*parser.NamedNodeMap {
+        return try parser.nodeGetAttributes(parser.elementToNode(self));
+    }
+
     pub fn _hasAttributes(self: *parser.Element) !bool {
         return try parser.nodeHasAttributes(parser.elementToNode(self));
     }
@@ -89,6 +97,8 @@ pub fn testExecFn(
     var attribute = [_]Case{
         .{ .src = "let a = document.getElementById('content')", .ex = "undefined" },
         .{ .src = "a.hasAttributes()", .ex = "true" },
+        .{ .src = "a.attributes.length", .ex = "1" },
+
         .{ .src = "a.getAttribute('id')", .ex = "content" },
 
         .{ .src = "a.hasAttribute('foo')", .ex = "false" },
diff --git a/src/dom/namednodemap.zig b/src/dom/namednodemap.zig
new file mode 100644
index 00000000..8c62a842
--- /dev/null
+++ b/src/dom/namednodemap.zig
@@ -0,0 +1,80 @@
+const std = @import("std");
+
+const parser = @import("../netsurf.zig");
+
+const jsruntime = @import("jsruntime");
+const Case = jsruntime.test_utils.Case;
+const checkCases = jsruntime.test_utils.checkCases;
+
+const DOMException = @import("exceptions.zig").DOMException;
+
+// WEB IDL https://dom.spec.whatwg.org/#namednodemap
+pub const NamedNodeMap = struct {
+    pub const Self = parser.NamedNodeMap;
+    pub const mem_guarantied = true;
+
+    pub const Exception = DOMException;
+
+    // TODO implement LegacyUnenumerableNamedProperties.
+    // https://webidl.spec.whatwg.org/#LegacyUnenumerableNamedProperties
+
+    pub fn get_length(self: *parser.NamedNodeMap) !u32 {
+        return try parser.namedNodeMapGetLength(self);
+    }
+
+    pub fn _item(self: *parser.NamedNodeMap, index: u32) !?*parser.Attribute {
+        return try parser.namedNodeMapItem(self, index);
+    }
+
+    pub fn _getNamedItem(self: *parser.NamedNodeMap, qname: []const u8) !?*parser.Attribute {
+        return try parser.namedNodeMapGetNamedItem(self, qname);
+    }
+
+    pub fn _getNamedItemNS(
+        self: *parser.NamedNodeMap,
+        namespace: []const u8,
+        localname: []const u8,
+    ) !?*parser.Attribute {
+        return try parser.namedNodeMapGetNamedItemNS(self, namespace, localname);
+    }
+
+    pub fn _setNamedItem(self: *parser.NamedNodeMap, attr: *parser.Attribute) !?*parser.Attribute {
+        return try parser.namedNodeMapSetNamedItem(self, attr);
+    }
+
+    pub fn _setNamedItemNS(self: *parser.NamedNodeMap, attr: *parser.Attribute) !?*parser.Attribute {
+        return try parser.namedNodeMapSetNamedItemNS(self, attr);
+    }
+
+    pub fn _removeNamedItem(self: *parser.NamedNodeMap, qname: []const u8) !*parser.Attribute {
+        return try parser.namedNodeMapRemoveNamedItem(self, qname);
+    }
+
+    pub fn _removeNamedItemNS(
+        self: *parser.NamedNodeMap,
+        namespace: []const u8,
+        localname: []const u8,
+    ) !*parser.Attribute {
+        return try parser.namedNodeMapRemoveNamedItemNS(self, namespace, localname);
+    }
+};
+
+// Tests
+// -----
+
+pub fn testExecFn(
+    _: std.mem.Allocator,
+    js_env: *jsruntime.Env,
+    comptime _: []jsruntime.API,
+) !void {
+    var setItem = [_]Case{
+        .{ .src = "let a = document.getElementById('content').attributes", .ex = "undefined" },
+        .{ .src = "a.length", .ex = "1" },
+        .{ .src = "a.item(0)", .ex = "[object Attr]" },
+        .{ .src = "a.item(1)", .ex = "null" },
+        .{ .src = "a.getNamedItem('id')", .ex = "[object Attr]" },
+        .{ .src = "a.getNamedItem('foo')", .ex = "null" },
+        .{ .src = "a.setNamedItem(a.getNamedItem('id'))", .ex = "[object Attr]" },
+    };
+    try checkCases(js_env, &setItem);
+}
diff --git a/src/dom/node.zig b/src/dom/node.zig
index 710364f4..4f5c1672 100644
--- a/src/dom/node.zig
+++ b/src/dom/node.zig
@@ -11,6 +11,7 @@ const parser = @import("../netsurf.zig");
 const EventTarget = @import("event_target.zig").EventTarget;
 
 // DOM
+const Attr = @import("attribute.zig").Attr;
 const CData = @import("character_data.zig");
 const Element = @import("element.zig").Element;
 const Document = @import("document.zig").Document;
@@ -23,6 +24,7 @@ const HTMLElem = @import("../html/elements.zig");
 
 // Node interfaces
 pub const Interfaces = generate.Tuple(.{
+    Attr,
     CData.CharacterData,
     CData.Interfaces,
     Element,
@@ -52,6 +54,7 @@ pub const Node = struct {
             .text => .{ .Text = @as(*parser.Text, @ptrCast(node)) },
             .document => .{ .HTMLDocument = @as(*parser.DocumentHTML, @ptrCast(node)) },
             .document_type => .{ .DocumentType = @as(*parser.DocumentType, @ptrCast(node)) },
+            .attribute => .{ .Attr = @as(*parser.Attribute, @ptrCast(node)) },
             else => @panic("node type not handled"), // TODO
         };
     }
diff --git a/src/netsurf.zig b/src/netsurf.zig
index b0423032..6d9b593c 100644
--- a/src/netsurf.zig
+++ b/src/netsurf.zig
@@ -336,6 +336,131 @@ fn DOMErr(except: DOMException) DOMError!void {
 // EventTarget
 pub const EventTarget = c.dom_event_target;
 
+// NamedNodeMap
+pub const NamedNodeMap = c.dom_namednodemap;
+
+pub fn namedNodeMapGetLength(nnm: *NamedNodeMap) !u32 {
+    var ln: u32 = undefined;
+    const err = c.dom_namednodemap_get_length(nnm, &ln);
+    try DOMErr(err);
+    return ln;
+}
+
+pub fn namedNodeMapItem(nnm: *NamedNodeMap, index: u32) !?*Attribute {
+    var n: [*c]c.dom_node = undefined;
+    const err = c._dom_namednodemap_item(nnm, index, &n);
+    try DOMErr(err);
+
+    if (n == null) {
+        return null;
+    }
+
+    // cast [*c]c.dom_node into *Attribute
+    return @as(*Attribute, @ptrCast(n));
+}
+
+pub fn namedNodeMapGetNamedItem(nnm: *NamedNodeMap, qname: []const u8) !?*Attribute {
+    var n: [*c]c.dom_node = undefined;
+    const err = c._dom_namednodemap_get_named_item(nnm, try stringFromData(qname), &n);
+    try DOMErr(err);
+
+    if (n == null) {
+        return null;
+    }
+
+    // cast [*c]c.dom_node into *Attribute
+    return @as(*Attribute, @ptrCast(n));
+}
+
+pub fn namedNodeMapGetNamedItemNS(
+    nnm: *NamedNodeMap,
+    namespace: []const u8,
+    localname: []const u8,
+) !?*Attribute {
+    var n: [*c]c.dom_node = undefined;
+    const err = c._dom_namednodemap_get_named_item_ns(
+        nnm,
+        try stringFromData(namespace),
+        try stringFromData(localname),
+        &n,
+    );
+    try DOMErr(err);
+
+    if (n == null) {
+        return null;
+    }
+
+    // cast [*c]c.dom_node into *Attribute
+    return @as(*Attribute, @ptrCast(n));
+}
+
+// Convert a parser pointer to a public dom_node pointer.
+fn toDOMNode(comptime T: type, v: *T) [*c]c.dom_node {
+    const v_aligned: *align(@alignOf([*c]c.dom_node)) T = @alignCast(v);
+    return @ptrCast(v_aligned);
+}
+
+pub fn namedNodeMapSetNamedItem(nnm: *NamedNodeMap, attr: *Attribute) !?*Attribute {
+    var n: [*c]c.dom_node = undefined;
+    const err = c._dom_namednodemap_set_named_item(
+        nnm,
+        toDOMNode(Attribute, attr),
+        &n,
+    );
+    try DOMErr(err);
+
+    if (n == null) {
+        return null;
+    }
+
+    // cast [*c]c.dom_node into *Attribute
+    return @as(*Attribute, @ptrCast(n));
+}
+
+pub fn namedNodeMapSetNamedItemNS(nnm: *NamedNodeMap, attr: *Attribute) !?*Attribute {
+    var n: [*c]c.dom_node = undefined;
+    const err = c._dom_namednodemap_set_named_item_ns(
+        nnm,
+        toDOMNode(Attribute, attr),
+        &n,
+    );
+    try DOMErr(err);
+
+    if (n == null) {
+        return null;
+    }
+
+    // cast [*c]c.dom_node into *Attribute
+    return @as(*Attribute, @ptrCast(n));
+}
+
+pub fn namedNodeMapRemoveNamedItem(nnm: *NamedNodeMap, qname: []const u8) !*Attribute {
+    var n: [*c]c.dom_node = undefined;
+    const err = c._dom_namednodemap_remove_named_item(nnm, try stringFromData(qname), &n);
+    try DOMErr(err);
+
+    // cast [*c]c.dom_node into *Attribute
+    return @as(*Attribute, @ptrCast(n));
+}
+
+pub fn namedNodeMapRemoveNamedItemNS(
+    nnm: *NamedNodeMap,
+    namespace: []const u8,
+    localname: []const u8,
+) !*Attribute {
+    var n: [*c]c.dom_node = undefined;
+    const err = c._dom_namednodemap_remove_named_item_ns(
+        nnm,
+        try stringFromData(namespace),
+        try stringFromData(localname),
+        &n,
+    );
+    try DOMErr(err);
+
+    // cast [*c]c.dom_node into *Attribute
+    return @as(*Attribute, @ptrCast(n));
+}
+
 // NodeType
 
 pub const NodeType = enum(u4) {
@@ -637,6 +762,13 @@ pub fn nodeHasAttributes(node: *Node) !bool {
     return res;
 }
 
+pub fn nodeGetAttributes(node: *Node) !*NamedNodeMap {
+    var res: ?*NamedNodeMap = undefined;
+    const err = nodeVtable(node).dom_node_get_attributes.?(node, &res);
+    try DOMErr(err);
+    return res.?;
+}
+
 // nodeToElement is an helper to convert a node to an element.
 pub inline fn nodeToElement(node: *Node) *Element {
     return @as(*Element, @ptrCast(node));
diff --git a/src/run_tests.zig b/src/run_tests.zig
index e478b84f..58520055 100644
--- a/src/run_tests.zig
+++ b/src/run_tests.zig
@@ -15,6 +15,7 @@ const elementTestExecFn = @import("dom/element.zig").testExecFn;
 const HTMLCollectionTestExecFn = @import("dom/html_collection.zig").testExecFn;
 const DOMExceptionTestExecFn = @import("dom/exceptions.zig").testExecFn;
 const DOMImplementationExecFn = @import("dom/implementation.zig").testExecFn;
+const NamedNodeMapExecFn = @import("dom/namednodemap.zig").testExecFn;
 
 var doc: *parser.DocumentHTML = undefined;
 
@@ -61,6 +62,7 @@ fn testsAllExecFn(
         HTMLCollectionTestExecFn,
         DOMExceptionTestExecFn,
         DOMImplementationExecFn,
+        NamedNodeMapExecFn,
     };
 
     inline for (testFns) |testFn| {

From e1e4b13be9aa1253d0f7c4fec1acf87f84fa93eb Mon Sep 17 00:00:00 2001
From: Pierre Tachoire <pierre@lightpanda.io>
Date: Tue, 5 Dec 2023 09:15:54 +0100
Subject: [PATCH 5/6] dom: remove useless Exception decl

---
 src/dom/attribute.zig | 2 --
 src/dom/element.zig   | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/dom/attribute.zig b/src/dom/attribute.zig
index 78563920..758a71fb 100644
--- a/src/dom/attribute.zig
+++ b/src/dom/attribute.zig
@@ -10,6 +10,4 @@ pub const Attr = struct {
     pub const Self = parser.Attribute;
     pub const prototype = *Node;
     pub const mem_guarantied = true;
-
-    pub const Exception = DOMException;
 };
diff --git a/src/dom/element.zig b/src/dom/element.zig
index 13678947..e7380e3d 100644
--- a/src/dom/element.zig
+++ b/src/dom/element.zig
@@ -18,8 +18,6 @@ pub const Element = struct {
     pub const prototype = *Node;
     pub const mem_guarantied = true;
 
-    pub const Exception = DOMException;
-
     pub fn toInterface(e: *parser.Element) !Union {
         return try HTMLElem.toInterface(Union, e);
     }

From a3f07c894cf31e289acfe0216d657de578fdce85 Mon Sep 17 00:00:00 2001
From: Pierre Tachoire <pierre@lightpanda.io>
Date: Tue, 5 Dec 2023 09:44:47 +0100
Subject: [PATCH 6/6] netsurf: one line null check

---
 src/netsurf.zig | 69 +++++++++++++++++--------------------------------
 1 file changed, 24 insertions(+), 45 deletions(-)

diff --git a/src/netsurf.zig b/src/netsurf.zig
index 6d9b593c..d0fee760 100644
--- a/src/netsurf.zig
+++ b/src/netsurf.zig
@@ -351,9 +351,7 @@ pub fn namedNodeMapItem(nnm: *NamedNodeMap, index: u32) !?*Attribute {
     const err = c._dom_namednodemap_item(nnm, index, &n);
     try DOMErr(err);
 
-    if (n == null) {
-        return null;
-    }
+    if (n == null) return null;
 
     // cast [*c]c.dom_node into *Attribute
     return @as(*Attribute, @ptrCast(n));
@@ -364,9 +362,7 @@ pub fn namedNodeMapGetNamedItem(nnm: *NamedNodeMap, qname: []const u8) !?*Attrib
     const err = c._dom_namednodemap_get_named_item(nnm, try stringFromData(qname), &n);
     try DOMErr(err);
 
-    if (n == null) {
-        return null;
-    }
+    if (n == null) return null;
 
     // cast [*c]c.dom_node into *Attribute
     return @as(*Attribute, @ptrCast(n));
@@ -386,9 +382,7 @@ pub fn namedNodeMapGetNamedItemNS(
     );
     try DOMErr(err);
 
-    if (n == null) {
-        return null;
-    }
+    if (n == null) return null;
 
     // cast [*c]c.dom_node into *Attribute
     return @as(*Attribute, @ptrCast(n));
@@ -409,9 +403,7 @@ pub fn namedNodeMapSetNamedItem(nnm: *NamedNodeMap, attr: *Attribute) !?*Attribu
     );
     try DOMErr(err);
 
-    if (n == null) {
-        return null;
-    }
+    if (n == null) return null;
 
     // cast [*c]c.dom_node into *Attribute
     return @as(*Attribute, @ptrCast(n));
@@ -426,9 +418,7 @@ pub fn namedNodeMapSetNamedItemNS(nnm: *NamedNodeMap, attr: *Attribute) !?*Attri
     );
     try DOMErr(err);
 
-    if (n == null) {
-        return null;
-    }
+    if (n == null) return null;
 
     // cast [*c]c.dom_node into *Attribute
     return @as(*Attribute, @ptrCast(n));
@@ -493,9 +483,7 @@ pub fn nodeListItem(nodeList: *NodeList, index: u32) !?*Node {
     const err = c._dom_nodelist_item(nodeList, index, &n);
     try DOMErr(err);
 
-    if (n == null) {
-        return null;
-    }
+    if (n == null) return null;
 
     // cast [*c]c.dom_node into *Node
     return @as(*Node, @ptrCast(n));
@@ -550,9 +538,8 @@ pub fn nodeNextElementSibling(node: *Node) !?*Element {
     var n = node;
     while (true) {
         const res = try nodeNextSibling(n);
-        if (res == null) {
-            return null;
-        }
+        if (res == null) return null;
+
         if (try nodeType(res.?) == .element) {
             return @as(*Element, @ptrCast(res.?));
         }
@@ -572,9 +559,8 @@ pub fn nodePreviousElementSibling(node: *Node) !?*Element {
     var n = node;
     while (true) {
         const res = try nodePreviousSibling(n);
-        if (res == null) {
-            return null;
-        }
+        if (res == null) return null;
+
         if (try nodeType(res.?) == .element) {
             return @as(*Element, @ptrCast(res.?));
         }
@@ -618,9 +604,8 @@ pub fn nodeValue(node: *Node) !?[]const u8 {
     var s: ?*String = undefined;
     const err = nodeVtable(node).dom_node_get_node_value.?(node, &s);
     try DOMErr(err);
-    if (s == null) {
-        return null;
-    }
+    if (s == null) return null;
+
     return stringToData(s.?);
 }
 
@@ -716,9 +701,8 @@ pub fn nodeLookupPrefix(node: *Node, namespace: []const u8) !?[]const u8 {
         &s,
     );
     try DOMErr(err);
-    if (s == null) {
-        return null;
-    }
+    if (s == null) return null;
+
     return stringToData(s.?);
 }
 
@@ -730,9 +714,8 @@ pub fn nodeLookupNamespaceURI(node: *Node, prefix: ?[]const u8) !?[]const u8 {
         &s,
     );
     try DOMErr(err);
-    if (s == null) {
-        return null;
-    }
+    if (s == null) return null;
+
     return stringToData(s.?);
 }
 
@@ -882,9 +865,8 @@ pub fn elementGetAttribute(elem: *Element, name: []const u8) !?[]const u8 {
         &s,
     );
     try DOMErr(err);
-    if (s == null) {
-        return null;
-    }
+    if (s == null) return null;
+
     return stringToData(s.?);
 }
 
@@ -1218,9 +1200,8 @@ pub fn documentHTMLParseFromFileAlloc(allocator: std.mem.Allocator, filename: []
 pub fn documentHTMLParseFromFile(filename: [:0]const u8) !*DocumentHTML {
     // create a null terminated c string.
     const doc = c.wr_create_doc_dom_from_file(filename.ptr);
-    if (doc == null) {
-        return error.ParserError;
-    }
+    if (doc == null) return error.ParserError;
+
     return @as(*DocumentHTML, @ptrCast(doc.?));
 }
 
@@ -1240,9 +1221,8 @@ pub fn documentHTMLParseFromStrAlloc(allocator: std.mem.Allocator, str: []const
 // The caller is responsible for closing the document.
 pub fn documentHTMLParseFromStr(cstr: [:0]const u8) !*DocumentHTML {
     const doc = c.wr_create_doc_dom_from_string(cstr.ptr);
-    if (doc == null) {
-        return error.ParserError;
-    }
+    if (doc == null) return error.ParserError;
+
     return @as(*DocumentHTML, @ptrCast(doc.?));
 }
 
@@ -1260,8 +1240,7 @@ pub inline fn documentHTMLBody(doc_html: *DocumentHTML) !?*Body {
     var body: ?*ElementHTML = undefined;
     const err = documentHTMLVtable(doc_html).get_body.?(doc_html, &body);
     try DOMErr(err);
-    if (body == null) {
-        return null;
-    }
+    if (body == null) return null;
+
     return @as(*Body, @ptrCast(body.?));
 }