Merge pull request #99 from Browsercore/dom-doc-fragment

Dom document fragment
This commit is contained in:
Pierre Tachoire
2023-12-05 14:27:49 +01:00
committed by GitHub
9 changed files with 346 additions and 0 deletions

View File

@@ -14,6 +14,7 @@ const Element = @import("element.zig").Element;
const ElementUnion = @import("element.zig").Union;
const DocumentType = @import("document_type.zig").DocumentType;
const DocumentFragment = @import("document_fragment.zig").DocumentFragment;
const DOMImplementation = @import("implementation.zig").DOMImplementation;
// WEB IDL https://dom.spec.whatwg.org/#document
@@ -124,6 +125,10 @@ pub const Document = struct {
);
}
pub fn _createDocumentFragment(self: *parser.Document) !*parser.DocumentFragment {
return try parser.documentCreateDocumentFragment(self);
}
pub fn deinit(_: *parser.Document, _: std.mem.Allocator) void {}
};
@@ -216,6 +221,11 @@ pub fn testExecFn(
};
try checkCases(js_env, &new);
var createDocumentFragment = [_]Case{
.{ .src = "document.createDocumentFragment()", .ex = "[object DocumentFragment]" },
};
try checkCases(js_env, &createDocumentFragment);
const tags = comptime parser.Tag.all();
comptime var createElements: [(tags.len) * 2]Case = undefined;
inline for (tags, 0..) |tag, i| {

View File

@@ -0,0 +1,21 @@
const std = @import("std");
const parser = @import("../netsurf.zig");
const Node = @import("node.zig").Node;
// WEB IDL https://dom.spec.whatwg.org/#documentfragment
pub const DocumentFragment = struct {
pub const Self = parser.DocumentFragment;
pub const prototype = *Node;
pub const mem_guarantied = true;
// TODO add constructor, but I need to associate the new DocumentFragment
// with the current document global object...
// > The new DocumentFragment() constructor steps are to set thiss node
// > document to current global objects associated Document.
// https://dom.spec.whatwg.org/#dom-documentfragment-documentfragment
pub fn constructor() !*parser.DocumentFragment {
return error.NotImplemented;
}
};

View File

@@ -16,6 +16,7 @@ const CData = @import("character_data.zig");
const Element = @import("element.zig").Element;
const Document = @import("document.zig").Document;
const DocumentType = @import("document_type.zig").DocumentType;
const DocumentFragment = @import("document_fragment.zig").DocumentFragment;
const HTMLCollection = @import("html_collection.zig").HTMLCollection;
// HTML
@@ -30,6 +31,7 @@ pub const Interfaces = generate.Tuple(.{
Element,
Document,
DocumentType,
DocumentFragment,
HTMLCollection,
HTML.Interfaces,
@@ -55,6 +57,7 @@ pub const Node = struct {
.document => .{ .HTMLDocument = @as(*parser.DocumentHTML, @ptrCast(node)) },
.document_type => .{ .DocumentType = @as(*parser.DocumentType, @ptrCast(node)) },
.attribute => .{ .Attr = @as(*parser.Attribute, @ptrCast(node)) },
.document_fragment => .{ .DocumentFragment = @as(*parser.DocumentFragment, @ptrCast(node)) },
else => @panic("node type not handled"), // TODO
};
}

View File

@@ -998,6 +998,9 @@ pub const Track = struct { base: *c.dom_html_element };
pub const UList = c.dom_html_u_list_element;
pub const Video = struct { base: *c.dom_html_element };
// Document Fragment
pub const DocumentFragment = c.dom_document_fragment;
// Document Position
pub const DocumentPosition = enum(u2) {
@@ -1177,6 +1180,13 @@ pub inline fn documentGetDoctype(doc: *Document) !?*DocumentType {
return dt;
}
pub inline fn documentCreateDocumentFragment(doc: *Document) !*DocumentFragment {
var df: ?*DocumentFragment = undefined;
const err = documentVtable(doc).dom_document_create_document_fragment.?(doc, &df);
try DOMErr(err);
return df.?;
}
// DocumentHTML
pub const DocumentHTML = c.dom_html_document;

View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>DocumentFragment constructor</title>
<link rel="help" href="https://dom.spec.whatwg.org/#dom-documentfragment-documentfragment">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
"use strict";
test(() => {
const fragment = new DocumentFragment();
assert_equals(fragment.ownerDocument, document);
}, "Sets the owner document to the current global object associated document");
test(() => {
const fragment = new DocumentFragment();
const text = document.createTextNode("");
fragment.appendChild(text);
assert_equals(fragment.firstChild, text);
}, "Create a valid document DocumentFragment");
</script>

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>DocumentFragment.prototype.getElementById</title>
<link rel="help" href="https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid">
<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<template>
<div id="bar">
<span id="foo" data-yes></span>
</div>
<div id="foo">
<span id="foo"></span>
<ul id="bar">
<li id="foo"></li>
</ul>
</div>
</template>
<script>
"use strict";
test(() => {
assert_equals(typeof DocumentFragment.prototype.getElementById, "function", "It must exist on the prototype");
assert_equals(typeof document.createDocumentFragment().getElementById, "function", "It must exist on an instance");
}, "The method must exist");
test(() => {
assert_equals(document.createDocumentFragment().getElementById("foo"), null);
assert_equals(document.createDocumentFragment().getElementById(""), null);
}, "It must return null when there are no matches");
test(() => {
const frag = document.createDocumentFragment();
frag.appendChild(document.createElement("div"));
frag.appendChild(document.createElement("span"));
frag.childNodes[0].id = "foo";
frag.childNodes[1].id = "foo";
assert_equals(frag.getElementById("foo"), frag.childNodes[0]);
}, "It must return the first element when there are matches");
test(() => {
const frag = document.createDocumentFragment();
frag.appendChild(document.createElement("div"));
frag.childNodes[0].setAttribute("id", "");
assert_equals(
frag.getElementById(""),
null,
"Even if there is an element with an empty-string ID attribute, it must not be returned"
);
}, "Empty string ID values");
test(() => {
const frag = document.querySelector("template").content;
assert_true(frag.getElementById("foo").hasAttribute("data-yes"));
}, "It must return the first element when there are matches, using a template");
</script>

View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>querySelectorAll should still work on DocumentFragments after they are modified</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Regression test for https://github.com/jsdom/jsdom/issues/2290 -->
<script>
"use strict";
setup({ single_test: true });
const frag = document.createDocumentFragment();
frag.appendChild(document.createElement("div"));
assert_array_equals(frag.querySelectorAll("img"), [], "before modification");
frag.appendChild(document.createElement("div"));
// If the bug is present, this will throw.
assert_array_equals(frag.querySelectorAll("img"), [], "after modification");
done();
</script>

View File

@@ -0,0 +1,86 @@
/**
* Validations where `child` argument is irrelevant.
* @param {Function} methodName
*/
function preInsertionValidateHierarchy(methodName) {
function insert(parent, node) {
if (parent[methodName].length > 1) {
// This is for insertBefore(). We can't blindly pass `null` for all methods
// as doing so will move nodes before validation.
parent[methodName](node, null);
} else {
parent[methodName](node);
}
}
// Step 2
test(() => {
const doc = document.implementation.createHTMLDocument("title");
assert_throws_dom("HierarchyRequestError", () => insert(doc.body, doc.body));
assert_throws_dom("HierarchyRequestError", () => insert(doc.body, doc.documentElement));
}, "If node is a host-including inclusive ancestor of parent, then throw a HierarchyRequestError DOMException.");
// Step 4
test(() => {
const doc = document.implementation.createHTMLDocument("title");
const doc2 = document.implementation.createHTMLDocument("title2");
assert_throws_dom("HierarchyRequestError", () => insert(doc, doc2));
}, "If node is not a DocumentFragment, DocumentType, Element, Text, ProcessingInstruction, or Comment node, then throw a HierarchyRequestError DOMException.");
// Step 5, in case of inserting a text node into a document
test(() => {
const doc = document.implementation.createHTMLDocument("title");
assert_throws_dom("HierarchyRequestError", () => insert(doc, doc.createTextNode("text")));
}, "If node is a Text node and parent is a document, then throw a HierarchyRequestError DOMException.");
// Step 5, in case of inserting a doctype into a non-document
test(() => {
const doc = document.implementation.createHTMLDocument("title");
const doctype = doc.childNodes[0];
assert_throws_dom("HierarchyRequestError", () => insert(doc.createElement("a"), doctype));
}, "If node is a doctype and parent is not a document, then throw a HierarchyRequestError DOMException.")
// Step 6, in case of DocumentFragment including multiple elements
test(() => {
const doc = document.implementation.createHTMLDocument("title");
doc.documentElement.remove();
const df = doc.createDocumentFragment();
df.appendChild(doc.createElement("a"));
df.appendChild(doc.createElement("b"));
assert_throws_dom("HierarchyRequestError", () => insert(doc, df));
}, "If node is a DocumentFragment with multiple elements and parent is a document, then throw a HierarchyRequestError DOMException.");
// Step 6, in case of DocumentFragment has multiple elements when document already has an element
test(() => {
const doc = document.implementation.createHTMLDocument("title");
const df = doc.createDocumentFragment();
df.appendChild(doc.createElement("a"));
assert_throws_dom("HierarchyRequestError", () => insert(doc, df));
}, "If node is a DocumentFragment with an element and parent is a document with another element, then throw a HierarchyRequestError DOMException.");
// Step 6, in case of an element
test(() => {
const doc = document.implementation.createHTMLDocument("title");
const el = doc.createElement("a");
assert_throws_dom("HierarchyRequestError", () => insert(doc, el));
}, "If node is an Element and parent is a document with another element, then throw a HierarchyRequestError DOMException.");
// Step 6, in case of a doctype when document already has another doctype
test(() => {
const doc = document.implementation.createHTMLDocument("title");
const doctype = doc.childNodes[0].cloneNode();
doc.documentElement.remove();
assert_throws_dom("HierarchyRequestError", () => insert(doc, doctype));
}, "If node is a doctype and parent is a document with another doctype, then throw a HierarchyRequestError DOMException.");
// Step 6, in case of a doctype when document has an element
if (methodName !== "prepend") {
// Skip `.prepend` as this doesn't throw if `child` is an element
test(() => {
const doc = document.implementation.createHTMLDocument("title");
const doctype = doc.childNodes[0].cloneNode();
doc.childNodes[0].remove();
assert_throws_dom("HierarchyRequestError", () => insert(doc, doctype));
}, "If node is a doctype and parent is a document with an element, then throw a HierarchyRequestError DOMException.");
}
}

View File

@@ -0,0 +1,108 @@
function getNonParentNodes() {
return [
document.implementation.createDocumentType("html", "", ""),
document.createTextNode("text"),
document.implementation.createDocument(null, "foo", null).createProcessingInstruction("foo", "bar"),
document.createComment("comment"),
document.implementation.createDocument(null, "foo", null).createCDATASection("data"),
];
}
function getNonInsertableNodes() {
return [
document.implementation.createHTMLDocument("title")
];
}
function getNonDocumentParentNodes() {
return [
document.createElement("div"),
document.createDocumentFragment(),
];
}
// Test that the steps happen in the right order, to the extent that it's
// observable. The variable names "parent", "child", and "node" match the
// corresponding variables in the replaceChild algorithm in these tests.
// Step 1 happens before step 3.
test(function() {
var illegalParents = getNonParentNodes();
var child = document.createElement("div");
var node = document.createElement("div");
illegalParents.forEach(function (parent) {
assert_throws_dom("HierarchyRequestError", function() {
insertFunc.call(parent, node, child);
});
});
}, "Should check the 'parent' type before checking whether 'child' is a child of 'parent'");
// Step 2 happens before step 3.
test(function() {
var parent = document.createElement("div");
var child = document.createElement("div");
var node = document.createElement("div");
node.appendChild(parent);
assert_throws_dom("HierarchyRequestError", function() {
insertFunc.call(parent, node, child);
});
}, "Should check that 'node' is not an ancestor of 'parent' before checking whether 'child' is a child of 'parent'");
// Step 3 happens before step 4.
test(function() {
var parent = document.createElement("div");
var child = document.createElement("div");
var illegalChildren = getNonInsertableNodes();
illegalChildren.forEach(function (node) {
assert_throws_dom("NotFoundError", function() {
insertFunc.call(parent, node, child);
});
});
}, "Should check whether 'child' is a child of 'parent' before checking whether 'node' is of a type that can have a parent.");
// Step 3 happens before step 5.
test(function() {
var child = document.createElement("div");
var node = document.createTextNode("");
var parent = document.implementation.createDocument(null, "foo", null);
assert_throws_dom("NotFoundError", function() {
insertFunc.call(parent, node, child);
});
node = document.implementation.createDocumentType("html", "", "");
getNonDocumentParentNodes().forEach(function (parent) {
assert_throws_dom("NotFoundError", function() {
insertFunc.call(parent, node, child);
});
});
}, "Should check whether 'child' is a child of 'parent' before checking whether 'node' is of a type that can have a parent of the type that 'parent' is.");
// Step 3 happens before step 6.
test(function() {
var child = document.createElement("div");
var parent = document.implementation.createDocument(null, null, null);
var node = document.createDocumentFragment();
node.appendChild(document.createElement("div"));
node.appendChild(document.createElement("div"));
assert_throws_dom("NotFoundError", function() {
insertFunc.call(parent, node, child);
});
node = document.createElement("div");
parent.appendChild(document.createElement("div"));
assert_throws_dom("NotFoundError", function() {
insertFunc.call(parent, node, child);
});
parent.firstChild.remove();
parent.appendChild(document.implementation.createDocumentType("html", "", ""));
node = document.implementation.createDocumentType("html", "", "")
assert_throws_dom("NotFoundError", function() {
insertFunc.call(parent, node, child);
});
}, "Should check whether 'child' is a child of 'parent' before checking whether 'node' can be inserted into the document given the kids the document has right now.");