WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
307412
<audio> and <video> controls work in HTML namespace and when added in SVG, MathML or other, it throws error
https://bugs.webkit.org/show_bug.cgi?id=307412
Summary
<audio> and <video> controls work in HTML namespace and when added in SVG, Ma...
Ahmad Saleem
Reported
2026-02-09 22:35:44 PST
Hi Team, While exploring console errors in below WPT test case (which leads to harness failure as well): WPT Test Case -
https://wpt.fyi/results/svg/interact/scripted/tabindex-focus-flag.svg?label=master&label=experimental&aligned&q=tabindex-focus
*** Console Error *** (It changes) and hence, this is skipped test at the moment: [Error] TypeError: undefined is not an object (evaluating 'this.rightContainer.element.style.removeProperty') layout width _updateControlsSize _updateControlsIfNeeded MediaController createControls [Error] TypeError: undefined is not an object (evaluating 'this.rightContainer.element.style.removeProperty') layout (anonymous function) forEach performScheduledLayout _layout _frameDidFire ****** This comes from our media controls implementation, which creates <div> in HTML namespace here: WebKit Source:
https://raw.githubusercontent.com/WebKit/Webkit/HEAD/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js
``` function elementFromString(elementString) { const element = document.createElement("div"); element.innerHTML = elementString; return element.firstElementChild; } ``` We need to update to handle SVG, MathML namespaces correctly and work accordingly. Based on Claude, this does without regressing performance - because XHTML namespace is more common, we need fast path for that: ``` function elementFromString(elementString) { // Fast path: Use simple method for HTML documents const ownerDoc = document; const isHTMLDocument = ownerDoc.documentElement instanceof HTMLHtmlElement; if (isHTMLDocument) { // Original fast method - works fine in HTML context const temp = document.createElement("div"); temp.innerHTML = elementString; return temp.firstElementChild; } // Slow path: Only for SVG/MathML/XML documents return elementFromStringWithNamespace(elementString, ownerDoc); } function elementFromStringWithNamespace(elementString, ownerDoc) { const parser = new DOMParser(); const doc = parser.parseFromString(elementString, 'text/html'); const parsed = doc.body.firstElementChild; if (!parsed) { return ownerDoc.createElementNS('
http://www.w3.org/1999/xhtml
', 'div'); } const imported = ownerDoc.importNode(parsed, true); // Verify and fix namespace if needed if (imported.namespaceURI !== '
http://www.w3.org/1999/xhtml
') { return recreateInHTMLNamespace(parsed, ownerDoc); } return imported; } function recreateInHTMLNamespace(sourceElement, ownerDoc) { const element = ownerDoc.createElementNS('
http://www.w3.org/1999/xhtml
', sourceElement.localName); for (const attr of sourceElement.attributes) { element.setAttribute(attr.name, attr.value); } for (const child of sourceElement.childNodes) { if (child.nodeType === Node.ELEMENT_NODE) { element.appendChild(recreateInHTMLNamespace(child, ownerDoc)); } else if (child.nodeType === Node.TEXT_NODE) { element.appendChild(ownerDoc.createTextNode(child.textContent)); } } return element; } ``` Just raising, so we can track and fix it. Thanks!
Attachments
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2026-02-16 22:36:33 PST
<
rdar://problem/170528402
>
Ahmad Saleem
Comment 2
2026-07-30 07:40:30 PDT
Pull request:
https://github.com/WebKit/WebKit/pull/70528
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug