Skip to content

fix: SVG elements keep the case of their tagName in an HTML document - #354

Open
jonasporto wants to merge 1 commit into
WebReflection:mainfrom
jonasporto:fix/svg-tagname-case
Open

jonasporto wants to merge 1 commit into
WebReflection:mainfrom
jonasporto:fix/svg-tagname-case

Conversation

@jonasporto

Copy link
Copy Markdown

Fixes #344

In an HTML document, tagName and nodeName of an SVG element came back upper-cased ("PATH", "SVG"), both for parsed elements and for createElementNS ones. Browsers upper-case only elements in the HTML namespace (DOM: HTML-uppercased qualified name), so an SVG <path> reports "path". Still the case on 0.18.14 and main (e2ee208).

import { parseHTML } from 'linkedom';
const { document } = parseHTML('<!doctype html><html><body><svg><path d="M0 0"/></svg></body></html>');
document.querySelector('path').tagName;                                   // "PATH" → "path"
document.createElementNS('http://www.w3.org/2000/svg', 'path').nodeName;  // "PATH" → "path"
document.querySelector('div')?.tagName;                                   // unchanged for HTML elements

Code written for browsers branches on it: mermaid's mergePaths keeps the children whose tagName === 'path', so a shape rendered on linkedom came out with an empty d.

Change

SVGElement overrides the nodeName and tagName getters to return localName. Element keeps localCase for the HTML namespace. getElementsByTagName compares localName first, so it keeps matching 'path' and 'PATH' as before.

cjs/svg/element.js is regenerated with npm run cjs. The test is in test/svg/element.js (parsed <svg> and <rect>, createElementNS, and <html> still upper-cased); npm test passes with the same coverage as main.

Not covered: a parsed <foreignObject> has the localName "foreignobject" (browsers adjust the case of a few SVG names while parsing). Separate matter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SVG elements in an HTML document report an upper-cased tagName ("PATH" instead of "path")

1 participant