From d1f8555c1eba1a370b8b3b9ea7e47ba74ae0d0cd Mon Sep 17 00:00:00 2001
From: Pierre Tachoire <pierre@lightpanda.io>
Date: Wed, 13 Dec 2023 13:38:24 +0100
Subject: [PATCH] element: implement parenteNode accessors

---
 src/dom/element.zig                           | 29 ++++++++++
 .../wpt/dom/Element-childElement-null-svg.svg | 20 +++++++
 .../dom/Element-childElement-null-xhtml.xhtml | 20 +++++++
 tests/wpt/dom/Element-childElement-null.html  | 15 +++++
 ...ment-childElementCount-dynamic-add-svg.svg | 22 +++++++
 ...-childElementCount-dynamic-add-xhtml.xhtml | 22 +++++++
 ...Element-childElementCount-dynamic-add.html | 17 ++++++
 ...t-childElementCount-dynamic-remove-svg.svg | 22 +++++++
 ...ildElementCount-dynamic-remove-xhtml.xhtml | 22 +++++++
 ...ment-childElementCount-dynamic-remove.html | 17 ++++++
 .../Element-childElementCount-nochild-svg.svg | 19 ++++++
 ...ment-childElementCount-nochild-xhtml.xhtml | 19 ++++++
 .../Element-childElementCount-nochild.html    | 14 +++++
 .../wpt/dom/Element-childElementCount-svg.svg | 25 ++++++++
 .../dom/Element-childElementCount-xhtml.xhtml | 25 ++++++++
 tests/wpt/dom/Element-childElementCount.html  | 20 +++++++
 tests/wpt/dom/Element-children.html           | 58 +++++++++++++++++++
 ...ement-firstElementChild-entity-xhtml.xhtml | 27 +++++++++
 .../dom/Element-firstElementChild-entity.svg  | 26 +++++++++
 ...lement-firstElementChild-namespace-svg.svg | 26 +++++++++
 ...nt-firstElementChild-namespace-xhtml.xhtml | 28 +++++++++
 .../Element-firstElementChild-namespace.html  | 21 +++++++
 .../wpt/dom/Element-firstElementChild-svg.svg | 23 ++++++++
 .../dom/Element-firstElementChild-xhtml.xhtml | 23 ++++++++
 tests/wpt/dom/Element-firstElementChild.html  | 18 ++++++
 .../wpt/dom/Element-lastElementChild-svg.svg  | 22 +++++++
 .../dom/Element-lastElementChild-xhtml.xhtml  | 22 +++++++
 tests/wpt/dom/Element-lastElementChild.html   | 17 ++++++
 28 files changed, 639 insertions(+)
 create mode 100644 tests/wpt/dom/Element-childElement-null-svg.svg
 create mode 100644 tests/wpt/dom/Element-childElement-null-xhtml.xhtml
 create mode 100644 tests/wpt/dom/Element-childElement-null.html
 create mode 100644 tests/wpt/dom/Element-childElementCount-dynamic-add-svg.svg
 create mode 100644 tests/wpt/dom/Element-childElementCount-dynamic-add-xhtml.xhtml
 create mode 100644 tests/wpt/dom/Element-childElementCount-dynamic-add.html
 create mode 100644 tests/wpt/dom/Element-childElementCount-dynamic-remove-svg.svg
 create mode 100644 tests/wpt/dom/Element-childElementCount-dynamic-remove-xhtml.xhtml
 create mode 100644 tests/wpt/dom/Element-childElementCount-dynamic-remove.html
 create mode 100644 tests/wpt/dom/Element-childElementCount-nochild-svg.svg
 create mode 100644 tests/wpt/dom/Element-childElementCount-nochild-xhtml.xhtml
 create mode 100644 tests/wpt/dom/Element-childElementCount-nochild.html
 create mode 100644 tests/wpt/dom/Element-childElementCount-svg.svg
 create mode 100644 tests/wpt/dom/Element-childElementCount-xhtml.xhtml
 create mode 100644 tests/wpt/dom/Element-childElementCount.html
 create mode 100644 tests/wpt/dom/Element-children.html
 create mode 100644 tests/wpt/dom/Element-firstElementChild-entity-xhtml.xhtml
 create mode 100644 tests/wpt/dom/Element-firstElementChild-entity.svg
 create mode 100644 tests/wpt/dom/Element-firstElementChild-namespace-svg.svg
 create mode 100644 tests/wpt/dom/Element-firstElementChild-namespace-xhtml.xhtml
 create mode 100644 tests/wpt/dom/Element-firstElementChild-namespace.html
 create mode 100644 tests/wpt/dom/Element-firstElementChild-svg.svg
 create mode 100644 tests/wpt/dom/Element-firstElementChild-xhtml.xhtml
 create mode 100644 tests/wpt/dom/Element-firstElementChild.html
 create mode 100644 tests/wpt/dom/Element-lastElementChild-svg.svg
 create mode 100644 tests/wpt/dom/Element-lastElementChild-xhtml.xhtml
 create mode 100644 tests/wpt/dom/Element-lastElementChild.html

diff --git a/src/dom/element.zig b/src/dom/element.zig
index c696c61f..1a506681 100644
--- a/src/dom/element.zig
+++ b/src/dom/element.zig
@@ -157,6 +157,26 @@ pub const Element = struct {
         return try collection.HTMLCollectionChildren(parser.elementToNode(self), false);
     }
 
+    pub fn get_firstElementChild(self: *parser.Element) !?Union {
+        var children = try get_children(self);
+        return try children._item(0);
+    }
+
+    pub fn get_lastElementChild(self: *parser.Element) !?Union {
+        // TODO we could check the last child node first, if it's an element,
+        // we can return it directly instead of looping twice over the
+        // children.
+        var children = try get_children(self);
+        const ln = try children.get_length();
+        if (ln == 0) return null;
+        return try children._item(ln - 1);
+    }
+
+    pub fn get_childElementCount(self: *parser.Element) !u32 {
+        var children = try get_children(self);
+        return try children.get_length();
+    }
+
     pub fn deinit(_: *parser.Element, _: std.mem.Allocator) void {}
 };
 
@@ -228,4 +248,13 @@ pub fn testExecFn(
         .{ .src = "b.hasAttribute('foo')", .ex = "false" },
     };
     try checkCases(js_env, &toggleAttr);
+
+    var parentNode = [_]Case{
+        .{ .src = "let c = document.getElementById('content')", .ex = "undefined" },
+        .{ .src = "c.children.length", .ex = "3" },
+        .{ .src = "c.firstElementChild.nodeName", .ex = "A" },
+        .{ .src = "c.lastElementChild.nodeName", .ex = "P" },
+        .{ .src = "c.childElementCount", .ex = "3" },
+    };
+    try checkCases(js_env, &parentNode);
 }
diff --git a/tests/wpt/dom/Element-childElement-null-svg.svg b/tests/wpt/dom/Element-childElement-null-svg.svg
new file mode 100644
index 00000000..38848287
--- /dev/null
+++ b/tests/wpt/dom/Element-childElement-null-svg.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     version="1.1"
+     width="100%" height="100%" viewBox="0 0 400 400">
+<title>Null test</title>
+<h:script src="/resources/testharness.js"/>
+<h:script src="/resources/testharnessreport.js"/>
+
+<text x="200" y="40" font-size="25" fill="black" text-anchor="middle">Test of firstElementChild and lastChildElement returning null</text>
+<text id="parentEl" x="200" y="70" font-size="20" fill="black" text-anchor="middle" font-weight="bold">Test</text>
+
+<h:script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  assert_equals(parentEl.firstElementChild, null)
+  assert_equals(parentEl.lastElementChild, null)
+})
+]]></h:script>
+</svg>
diff --git a/tests/wpt/dom/Element-childElement-null-xhtml.xhtml b/tests/wpt/dom/Element-childElement-null-xhtml.xhtml
new file mode 100644
index 00000000..daedab6d
--- /dev/null
+++ b/tests/wpt/dom/Element-childElement-null-xhtml.xhtml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Null Test</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<h1>Test of firstElementChild and lastChildElement returning null</h1>
+<div id="log"></div>
+<p id="parentEl" style="font-weight:bold;">Test.</p>
+<script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  assert_equals(parentEl.firstElementChild, null)
+  assert_equals(parentEl.lastElementChild, null)
+})
+]]></script>
+</body>
+</html>
diff --git a/tests/wpt/dom/Element-childElement-null.html b/tests/wpt/dom/Element-childElement-null.html
new file mode 100644
index 00000000..1863a41d
--- /dev/null
+++ b/tests/wpt/dom/Element-childElement-null.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Null test</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<h1>Test of firstElementChild and lastChildElement returning null</h1>
+<div id="log"></div>
+<p id="parentEl" style="font-weight:bold;">Test.</p>
+<script>
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  assert_equals(parentEl.firstElementChild, null)
+  assert_equals(parentEl.lastElementChild, null)
+})
+</script>
diff --git a/tests/wpt/dom/Element-childElementCount-dynamic-add-svg.svg b/tests/wpt/dom/Element-childElementCount-dynamic-add-svg.svg
new file mode 100644
index 00000000..d149f1ea
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-dynamic-add-svg.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     version="1.1"
+     width="100%" height="100%" viewBox="0 0 400 400">
+<title>Dynamic Adding of Elements</title>
+<h:script src="/resources/testharness.js"/>
+<h:script src="/resources/testharnessreport.js"/>
+
+<text x="200" y="40" font-size="25" fill="black" text-anchor="middle">Test of Dynamic Adding of Elements</text>
+<text id="parentEl" x="200" y="70" font-size="20" fill="black" text-anchor="middle">The result of this test is
+<tspan id="first_element_child" font-weight="bold">unknown.</tspan></text>
+
+<h:script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var newChild = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+  parentEl.appendChild(newChild);
+  assert_equals(parentEl.childElementCount, 2)
+})
+]]></h:script>
+</svg>
diff --git a/tests/wpt/dom/Element-childElementCount-dynamic-add-xhtml.xhtml b/tests/wpt/dom/Element-childElementCount-dynamic-add-xhtml.xhtml
new file mode 100644
index 00000000..c97ed196
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-dynamic-add-xhtml.xhtml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Dynamic Adding of Elements</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<h1>Test of Dynamic Adding of Elements</h1>
+<div id="log"></div>
+<p id="parentEl">The result of this test is
+<span id="first_element_child" style="font-weight:bold;">logged above.</span></p>
+<script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var newChild = document.createElement("span");
+  parentEl.appendChild(newChild);
+  assert_equals(parentEl.childElementCount, 2)
+})
+]]></script>
+</body>
+</html>
diff --git a/tests/wpt/dom/Element-childElementCount-dynamic-add.html b/tests/wpt/dom/Element-childElementCount-dynamic-add.html
new file mode 100644
index 00000000..3e7490b2
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-dynamic-add.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Dynamic Adding of Elements</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<h1>Test of Dynamic Adding of Elements</h1>
+<div id="log"></div>
+<p id="parentEl">The result of this test is
+<span id="first_element_child" style="font-weight:bold;">logged above.</span></p>
+<script>
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var newChild = document.createElement("span");
+  parentEl.appendChild(newChild);
+  assert_equals(parentEl.childElementCount, 2)
+})
+</script>
diff --git a/tests/wpt/dom/Element-childElementCount-dynamic-remove-svg.svg b/tests/wpt/dom/Element-childElementCount-dynamic-remove-svg.svg
new file mode 100644
index 00000000..bf99de65
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-dynamic-remove-svg.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     version="1.1"
+     width="100%" height="100%" viewBox="0 0 400 400">
+<title>Dynamic Removal of Elements</title>
+<h:script src="/resources/testharness.js"/>
+<h:script src="/resources/testharnessreport.js"/>
+
+<text x="200" y="40" font-size="25" fill="black" text-anchor="middle">Test of Dynamic Removal of Elements</text>
+<text id="parentEl" x="200" y="70" font-size="20" fill="black" text-anchor="middle">The result of this test is
+<tspan id="first_element_child" font-weight="bold">unknown.</tspan><tspan id="last_element_child"> </tspan></text>
+
+<h:script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var lec = parentEl.lastElementChild;
+  parentEl.removeChild(lec);
+  assert_equals(parentEl.childElementCount, 1)
+})
+]]></h:script>
+</svg>
diff --git a/tests/wpt/dom/Element-childElementCount-dynamic-remove-xhtml.xhtml b/tests/wpt/dom/Element-childElementCount-dynamic-remove-xhtml.xhtml
new file mode 100644
index 00000000..f0009b0a
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-dynamic-remove-xhtml.xhtml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Dynamic Removal of Elements</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<h1>Test of Removal Adding of Elements</h1>
+<div id="log"></div>
+<p id="parentEl">The result of this test is
+<span id="first_element_child" style="font-weight:bold;">logged above.</span><span id="last_element_child"> </span></p>
+<script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var lec = parentEl.lastElementChild;
+  parentEl.removeChild(lec);
+  assert_equals(parentEl.childElementCount, 1)
+})
+]]></script>
+</body>
+</html>
diff --git a/tests/wpt/dom/Element-childElementCount-dynamic-remove.html b/tests/wpt/dom/Element-childElementCount-dynamic-remove.html
new file mode 100644
index 00000000..3f7e7c7e
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-dynamic-remove.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Dynamic Removal of Elements</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<h1>Test of Dynamic Removal of Elements</h1>
+<div id="log"></div>
+<p id="parentEl">The result of this test is
+<span id="first_element_child" style="font-weight:bold;">unknown.</span><span id="last_element_child"> </span></p>
+<script>
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var lec = parentEl.lastElementChild;
+  parentEl.removeChild(lec);
+  assert_equals(parentEl.childElementCount, 1)
+})
+</script>
diff --git a/tests/wpt/dom/Element-childElementCount-nochild-svg.svg b/tests/wpt/dom/Element-childElementCount-nochild-svg.svg
new file mode 100644
index 00000000..8ba57436
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-nochild-svg.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     version="1.1"
+     width="100%" height="100%" viewBox="0 0 400 400">
+<title>childElementCount</title>
+<h:script src="/resources/testharness.js"/>
+<h:script src="/resources/testharnessreport.js"/>
+
+<text x="200" y="40" font-size="25" fill="black" text-anchor="middle">Test of childElementCount with No Child Element Nodes</text>
+<text id="parentEl" x="200" y="70" font-size="20" fill="black" text-anchor="middle" font-weight="bold">Test</text>
+
+<h:script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  assert_equals(parentEl.childElementCount, 0)
+})
+]]></h:script>
+</svg>
diff --git a/tests/wpt/dom/Element-childElementCount-nochild-xhtml.xhtml b/tests/wpt/dom/Element-childElementCount-nochild-xhtml.xhtml
new file mode 100644
index 00000000..f567a20c
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-nochild-xhtml.xhtml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>childElementCount without Child Element Nodes</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<h1>Test of childElementCount with No Child Element Nodes</h1>
+<div id="log"></div>
+<p id="parentEl" style="font-weight:bold;">Test.</p>
+<script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  assert_equals(parentEl.childElementCount, 0)
+})
+]]></script>
+</body>
+</html>
diff --git a/tests/wpt/dom/Element-childElementCount-nochild.html b/tests/wpt/dom/Element-childElementCount-nochild.html
new file mode 100644
index 00000000..fb52fb20
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-nochild.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>childElementCount without Child Element Nodes</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<h1>Test of childElementCount with No Child Element Nodes</h1>
+<div id="log"></div>
+<p id="parentEl" style="font-weight:bold;">Test.</p>
+<script>
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  assert_equals(parentEl.childElementCount, 0)
+})
+</script>
diff --git a/tests/wpt/dom/Element-childElementCount-svg.svg b/tests/wpt/dom/Element-childElementCount-svg.svg
new file mode 100644
index 00000000..ff93eff6
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-svg.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     version="1.1"
+     width="100%" height="100%" viewBox="0 0 400 400">
+<title>childElementCount</title>
+<h:script src="/resources/testharness.js"/>
+<h:script src="/resources/testharnessreport.js"/>
+
+<text x="200" y="40" font-size="25" fill="black" text-anchor="middle">Test of childElementCount</text>
+<text id="parentEl" x="200" y="70" font-size="20" fill="black" text-anchor="middle">The result of <tspan id="first_element_child"><tspan>this</tspan> <tspan>test</tspan></tspan> is
+<tspan id="middle_element_child" font-weight="bold">unknown.</tspan>
+
+
+
+<tspan id="last_element_child" style="display:none;">fnord</tspan> </text>
+
+<h:script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  assert_true("childElementCount" in parentEl)
+  assert_equals(parentEl.childElementCount, 3)
+})
+]]></h:script>
+</svg>
diff --git a/tests/wpt/dom/Element-childElementCount-xhtml.xhtml b/tests/wpt/dom/Element-childElementCount-xhtml.xhtml
new file mode 100644
index 00000000..6b719ff7
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount-xhtml.xhtml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>childElementCount</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<h1>Test of childElementCount</h1>
+<div id="log"></div>
+<p id="parentEl">The result of <span id="first_element_child"><span>this</span> <span>test</span></span> is
+<span id="middle_element_child" style="font-weight:bold;">unknown.</span>
+
+
+
+<span id="last_element_child" style="display:none;">fnord</span> </p>
+<script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  assert_true("childElementCount" in parentEl)
+  assert_equals(parentEl.childElementCount, 3)
+})
+]]></script>
+</body>
+</html>
diff --git a/tests/wpt/dom/Element-childElementCount.html b/tests/wpt/dom/Element-childElementCount.html
new file mode 100644
index 00000000..8cfe567f
--- /dev/null
+++ b/tests/wpt/dom/Element-childElementCount.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>childElementCount</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<h1>Test of childElementCount</h1>
+<div id="log"></div>
+<p id="parentEl">The result of <span id="first_element_child"><span>this</span> <span>test</span></span> is
+<span id="middle_element_child" style="font-weight:bold;">given above.</span>
+
+
+
+<span id="last_element_child" style="display:none;">fnord</span> </p>
+<script>
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  assert_true("childElementCount" in parentEl)
+  assert_equals(parentEl.childElementCount, 3)
+})
+</script>
diff --git a/tests/wpt/dom/Element-children.html b/tests/wpt/dom/Element-children.html
new file mode 100644
index 00000000..c0210f96
--- /dev/null
+++ b/tests/wpt/dom/Element-children.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>HTMLCollection edge cases</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<div id="test"><img><img id=foo><img id=foo><img name="bar"></div>
+<script>
+setup(function() {
+  // Add some non-HTML elements in there to test what happens with those.
+  var container = document.getElementById("test");
+  var child = document.createElementNS("", "img");
+  child.setAttribute("id", "baz");
+  container.appendChild(child);
+
+  child = document.createElementNS("", "img");
+  child.setAttribute("name", "qux");
+  container.appendChild(child);
+});
+
+test(function() {
+  var container = document.getElementById("test");
+  var result = container.children.item("foo");
+  assert_true(result instanceof Element, "Expected an Element.");
+  assert_false(result.hasAttribute("id"), "Expected the IDless Element.")
+})
+
+test(function() {
+  var container = document.getElementById("test");
+  var list = container.children;
+  var result = [];
+  for (var p in list) {
+    if (list.hasOwnProperty(p)) {
+      result.push(p);
+    }
+  }
+  assert_array_equals(result, ['0', '1', '2', '3', '4', '5']);
+  result = Object.getOwnPropertyNames(list);
+  assert_array_equals(result, ['0', '1', '2', '3', '4', '5', 'foo', 'bar', 'baz']);
+
+  // Mapping of exposed names to their indices in the list.
+  var exposedNames = { 'foo': 1, 'bar': 3, 'baz': 4 };
+  for (var exposedName in exposedNames) {
+    assert_true(exposedName in list);
+    assert_true(list.hasOwnProperty(exposedName));
+    assert_equals(list[exposedName], list.namedItem(exposedName));
+    assert_equals(list[exposedName], list.item(exposedNames[exposedName]));
+    assert_true(list[exposedName] instanceof Element);
+  }
+
+  var unexposedNames = ['qux'];
+  for (var unexposedName of unexposedNames) {
+    assert_false(unexposedName in list);
+    assert_false(list.hasOwnProperty(unexposedName));
+    assert_equals(list[unexposedName], undefined);
+    assert_equals(list.namedItem(unexposedName), null);
+  }
+});
+</script>
diff --git a/tests/wpt/dom/Element-firstElementChild-entity-xhtml.xhtml b/tests/wpt/dom/Element-firstElementChild-entity-xhtml.xhtml
new file mode 100644
index 00000000..f28005e9
--- /dev/null
+++ b/tests/wpt/dom/Element-firstElementChild-entity-xhtml.xhtml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+[
+<!ENTITY tree "<span id='first_element_child' style='font-weight:bold;'>unknown.</span>">
+]>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>Entity References</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<h1>Test of Entity References</h1>
+<div id="log"></div>
+<p id="parentEl">The result of this test is &tree;</p>
+<script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  var fec = parentEl.firstElementChild;
+  assert_true(!!fec)
+  assert_equals(fec.nodeType, 1)
+  assert_equals(fec.getAttribute("id"), "first_element_child")
+})
+]]></script>
+</body>
+</html>
diff --git a/tests/wpt/dom/Element-firstElementChild-entity.svg b/tests/wpt/dom/Element-firstElementChild-entity.svg
new file mode 100644
index 00000000..3a20ea79
--- /dev/null
+++ b/tests/wpt/dom/Element-firstElementChild-entity.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
+[
+<!ENTITY tree "<tspan id='first_element_child' font-weight='bold'>unknown.</tspan>">
+]>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     version="1.1"
+     width="100%" height="100%" viewBox="0 0 400 400">
+<title>Entity References</title>
+<h:script src="/resources/testharness.js"/>
+<h:script src="/resources/testharnessreport.js"/>
+
+<text x="200" y="40" font-size="25" fill="black" text-anchor="middle">Test of Entity References</text>
+<text id="parentEl" x="200" y="70" font-size="20" fill="black" text-anchor="middle">The result of this test is &tree;</text>
+
+<h:script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  var fec = parentEl.firstElementChild;
+  assert_true(!!fec)
+  assert_equals(fec.nodeType, 1)
+  assert_equals(fec.getAttribute("id"), "first_element_child")
+})
+]]></h:script>
+</svg>
diff --git a/tests/wpt/dom/Element-firstElementChild-namespace-svg.svg b/tests/wpt/dom/Element-firstElementChild-namespace-svg.svg
new file mode 100644
index 00000000..d42c0877
--- /dev/null
+++ b/tests/wpt/dom/Element-firstElementChild-namespace-svg.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:pickle="http://ns.example.org/pickle"
+     version="1.1"
+     width="100%" height="100%" viewBox="0 0 400 400">
+<title>firstElementChild with namespaces</title>
+<h:script src="/resources/testharness.js"/>
+<h:script src="/resources/testharnessreport.js"/>
+
+<text x="200" y="40" font-size="25" fill="black" text-anchor="middle">Test of firstElementChild with namespaces</text>
+<g id="parentEl">
+  <pickle:dill id="first_element_child"/>
+</g>
+
+<h:script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var fec = parentEl.firstElementChild;
+  assert_true(!!fec)
+  assert_equals(fec.nodeType, 1)
+  assert_equals(fec.getAttribute("id"), "first_element_child")
+  assert_equals(fec.localName, "dill")
+})
+]]></h:script>
+</svg>
diff --git a/tests/wpt/dom/Element-firstElementChild-namespace-xhtml.xhtml b/tests/wpt/dom/Element-firstElementChild-namespace-xhtml.xhtml
new file mode 100644
index 00000000..29441d27
--- /dev/null
+++ b/tests/wpt/dom/Element-firstElementChild-namespace-xhtml.xhtml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:pickle="http://ns.example.org/pickle">
+<head>
+<title>firstElementChild with namespaces</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<h1>Test of firstElementChild with namespaces</h1>
+<div id="parentEl">
+  <pickle:dill id="first_element_child"/>
+</div>
+<div id="log"></div>
+<p id="parentEl">The result of this test is
+<span id="first_element_child" style="font-weight:bold;">logged above.</span></p>
+<script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var fec = parentEl.firstElementChild;
+  assert_true(!!fec)
+  assert_equals(fec.nodeType, 1)
+  assert_equals(fec.getAttribute("id"), "first_element_child")
+  assert_equals(fec.localName, "dill")
+})
+]]></script>
+</body>
+</html>
diff --git a/tests/wpt/dom/Element-firstElementChild-namespace.html b/tests/wpt/dom/Element-firstElementChild-namespace.html
new file mode 100644
index 00000000..629deab3
--- /dev/null
+++ b/tests/wpt/dom/Element-firstElementChild-namespace.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>firstElementChild with namespaces</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<h1>Test of firstElementChild with namespaces</h1>
+<div id="log"></div>
+<p id="parentEl">The result of this test is a unknown.</p>
+<script>
+test(function() {
+  var parentEl = document.getElementById("parentEl")
+  var el = document.createElementNS("http://ns.example.org/pickle", "pickle:dill")
+  el.setAttribute("id", "first_element_child")
+  parentEl.appendChild(el)
+  var fec = parentEl.firstElementChild
+  assert_true(!!fec)
+  assert_equals(fec.nodeType, 1)
+  assert_equals(fec.getAttribute("id"), "first_element_child")
+  assert_equals(fec.localName, "dill")
+})
+</script>
diff --git a/tests/wpt/dom/Element-firstElementChild-svg.svg b/tests/wpt/dom/Element-firstElementChild-svg.svg
new file mode 100644
index 00000000..359c5b82
--- /dev/null
+++ b/tests/wpt/dom/Element-firstElementChild-svg.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     version="1.1"
+     width="100%" height="100%" viewBox="0 0 400 400">
+<title>firstElementChild</title>
+<h:script src="/resources/testharness.js"/>
+<h:script src="/resources/testharnessreport.js"/>
+
+<text x="200" y="40" font-size="25" fill="black" text-anchor="middle">Test of firstElementChild</text>
+<text id="parentEl" x="200" y="70" font-size="20" fill="black" text-anchor="middle">The result of this test is
+<tspan id="first_element_child" font-weight="bold">unknown.</tspan></text>
+
+<h:script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var fec = parentEl.firstElementChild;
+  assert_true(!!fec)
+  assert_equals(fec.nodeType, 1)
+  assert_equals(fec.getAttribute("id"), "first_element_child")
+})
+]]></h:script>
+</svg>
diff --git a/tests/wpt/dom/Element-firstElementChild-xhtml.xhtml b/tests/wpt/dom/Element-firstElementChild-xhtml.xhtml
new file mode 100644
index 00000000..302052b0
--- /dev/null
+++ b/tests/wpt/dom/Element-firstElementChild-xhtml.xhtml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>firstElementChild</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<h1>Test of firstElementChild</h1>
+<div id="log"></div>
+<p id="parentEl">The result of this test is
+<span id="first_element_child" style="font-weight:bold;">logged above.</span></p>
+<script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var fec = parentEl.firstElementChild;
+  assert_true(!!fec)
+  assert_equals(fec.nodeType, 1)
+  assert_equals(fec.getAttribute("id"), "first_element_child")
+})
+]]></script>
+</body>
+</html>
diff --git a/tests/wpt/dom/Element-firstElementChild.html b/tests/wpt/dom/Element-firstElementChild.html
new file mode 100644
index 00000000..12a0c594
--- /dev/null
+++ b/tests/wpt/dom/Element-firstElementChild.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>firstElementChild</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<h1>Test of firstElementChild</h1>
+<div id="log"></div>
+<p id="parentEl">The result of this test is
+<span id="first_element_child" style="font-weight:bold;">logged above.</span></p>
+<script>
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var fec = parentEl.firstElementChild;
+  assert_true(!!fec)
+  assert_equals(fec.nodeType, 1)
+  assert_equals(fec.getAttribute("id"), "first_element_child")
+})
+</script>
diff --git a/tests/wpt/dom/Element-lastElementChild-svg.svg b/tests/wpt/dom/Element-lastElementChild-svg.svg
new file mode 100644
index 00000000..1cec4a13
--- /dev/null
+++ b/tests/wpt/dom/Element-lastElementChild-svg.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     version="1.1"
+     width="100%" height="100%" viewBox="0 0 400 400">
+<title>lastElementChild</title>
+<h:script src="/resources/testharness.js"/>
+<h:script src="/resources/testharnessreport.js"/>
+
+<text x="200" y="40" font-size="25" fill="black" text-anchor="middle">Test of lastElementChild</text>
+<text id="parentEl" x="200" y="70" font-size="20" fill="black" text-anchor="middle">The result of <tspan id="first_element_child">this test</tspan> is <tspan id="last_element_child" font-weight="bold">not</tspan> known.</text>
+
+<h:script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var lec = parentEl.lastElementChild;
+  assert_true(!!lec)
+  assert_equals(lec.nodeType, 1)
+  assert_equals(lec.getAttribute("id"), "last_element_child")
+})
+]]></h:script>
+</svg>
diff --git a/tests/wpt/dom/Element-lastElementChild-xhtml.xhtml b/tests/wpt/dom/Element-lastElementChild-xhtml.xhtml
new file mode 100644
index 00000000..3150b92a
--- /dev/null
+++ b/tests/wpt/dom/Element-lastElementChild-xhtml.xhtml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>firstElementChild</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<h1>Test of firstElementChild</h1>
+<div id="log"></div>
+<p id="parentEl">The result of <span id="first_element_child">this test</span> is <span id="last_element_child" style="font-weight:bold;">logged</span> above.</p>
+<script><![CDATA[
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var lec = parentEl.lastElementChild;
+  assert_true(!!lec)
+  assert_equals(lec.nodeType, 1)
+  assert_equals(lec.getAttribute("id"), "last_element_child")
+})
+]]></script>
+</body>
+</html>
diff --git a/tests/wpt/dom/Element-lastElementChild.html b/tests/wpt/dom/Element-lastElementChild.html
new file mode 100644
index 00000000..de7aebdf
--- /dev/null
+++ b/tests/wpt/dom/Element-lastElementChild.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>lastElementChild</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<h1>Test of lastElementChild</h1>
+<div id="log"></div>
+<p id="parentEl">The result of <span id="first_element_child">this test</span> is <span id="last_element_child" style="font-weight:bold;">logged</span> above.</p>
+<script>
+test(function() {
+  var parentEl = document.getElementById("parentEl");
+  var lec = parentEl.lastElementChild;
+  assert_true(!!lec)
+  assert_equals(lec.nodeType, 1)
+  assert_equals(lec.getAttribute("id"), "last_element_child")
+})
+</script>