document.createElement does not create SVGGraphicsElement

[runarberg]

Describe the bug

When you create an element with document.createElement or document.createElementNS it will incorrectly create some SVGGraphicsElements as SVGElements

To Reproduce
Steps to reproduce the behavior:

const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

rect.constructor.name
// SVGElement

rect instanceof SVGGraphicsElement
// false

Expected behavior

const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

rect.constructor.name
// SVGRectElement

rect instanceof SVGGraphicsElement
// true

[knownasilya]

Also this:

const element = document.createElement('input');

element instanceof HTMLBodyElement;
// true

[onx2]

This seems to be a problem in general. I tested a few different elements and it is giving me the similar incorrect results.

const element = document.createElement("span");
console.log(element instanceof HTMLBodyElement); // true
console.log(element instanceof HTMLDivElement); // true

const element = document.createElement("input");
console.log(element instanceof HTMLBodyElement); // true
console.log(element instanceof HTMLDivElement); // true
console.log(element instanceof HTMLSpanElement); // true

const element = document.createElement("div");
console.log(element instanceof HTMLBodyElement); // true
console.log(element instanceof HTMLSpanElement); // true

Output from normal browser env

I wonder if this is related? Perhaps because it is "unimplemented" but actually defined as HTMLElement is always equals true?

happy-dom/packages/happy-dom/src/window/BrowserWindow.ts

Line 256 in afd256b

export default class BrowserWindow extends EventTarget implements INodeJSGlobal {

[onx2]

I tested each unimplemented one and they all were true for span, div, input, ol, ul, li, and I'm sure others as well. So I think this is why @knownasilya

console.log(element instanceof HTMLHeadElement); // true
console.log(element instanceof HTMLTitleElement); // true
console.log(element instanceof HTMLBodyElement); // true
console.log(element instanceof HTMLHeadingElement); // true
console.log(element instanceof HTMLParagraphElement); // true
console.log(element instanceof HTMLHRElement); // true
console.log(element instanceof HTMLPreElement); // true
console.log(element instanceof HTMLUListElement); // true
console.log(element instanceof HTMLOListElement); // true
console.log(element instanceof HTMLMenuElement); // true
console.log(element instanceof HTMLDListElement); // true
console.log(element instanceof HTMLDivElement); // true
console.log(element instanceof HTMLAreaElement); // true
console.log(element instanceof HTMLBRElement); // true
console.log(element instanceof HTMLCanvasElement); // true
console.log(element instanceof HTMLDataElement); // true
console.log(element instanceof HTMLDataListElement); // true
console.log(element instanceof HTMLDetailsElement); // true
console.log(element instanceof HTMLDirectoryElement); // true
console.log(element instanceof HTMLFieldSetElement); // true
console.log(element instanceof HTMLFontElement); // true
console.log(element instanceof HTMLHtmlElement); // true
console.log(element instanceof HTMLLegendElement); // true
console.log(element instanceof HTMLMapElement); // true
console.log(element instanceof HTMLMarqueeElement); // true
console.log(element instanceof HTMLMeterElement); // true
console.log(element instanceof HTMLModElement); // true
console.log(element instanceof HTMLOutputElement); // true
console.log(element instanceof HTMLPictureElement); // true
console.log(element instanceof HTMLProgressElement); // true
console.log(element instanceof HTMLQuoteElement); // true
console.log(element instanceof HTMLSourceElement); // true
console.log(element instanceof HTMLSpanElement); // true
console.log(element instanceof HTMLTableCaptionElement); // true
console.log(element instanceof HTMLTableCellElement); // true
console.log(element instanceof HTMLTableColElement); // true
console.log(element instanceof HTMLTableElement); // true
console.log(element instanceof HTMLTableRowElement); // true
console.log(element instanceof HTMLTableSectionElement); // true
console.log(element instanceof HTMLFrameElement); // true
console.log(element instanceof HTMLFrameSetElement); // true
console.log(element instanceof HTMLEmbedElement); // true
console.log(element instanceof HTMLObjectElement); // true
console.log(element instanceof HTMLParamElement); // true
console.log(element instanceof HTMLTrackElement); // true

[rijenkii]

I guess this is in the same boat:

const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
const check = g instanceof SVGGElement;
// ReferenceError: SVGGElement is not defined (should be true)
const name = g.constructor.name;
// "SVGElement" (should be "SVGGElement")

[onx2]

@rijenkii Probably so, but it looks like @capricorn86 is actively working on this issue (1a0f247, 1ec0724) 😄

[capricorn86]

Thank you for reporting @runarberg, @knownasilya, @onx2 and @rijenkii! 🙂

@onx2 This is because several HTML elements where not implemented yet. The remaining HTML elements where implemented in v15. As they where not implemented yet, they where assigned as HTMLElement.

All remaining SVG elements has now also been implemented in v15.8.0.