Bug 307412

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!