#1295 javascript getElementById not finding svg elements

[Anonymous]

When creating inline-SVG elements through javascript, the create and append operations appear to succeed, but when making a document.getElementById call to retrieve the just-created elements, getElementById returns null.

This reproduces the problem in 2.8:

WebClient webClient = new WebClient(BrowserVersion.FIREFOX_3_6);
webClient.setJavaScriptEnabled(true);
HtmlPage page =(HtmlPage)webClient.getPage("about:blank");

ScriptResult res = page.executeJavaScript(
"var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');"+
"svg.setAttribute('id', 'svgElem2');" +
"document.getElementsByTagName('body')[0].appendChild(svg);" +
"document.getElementById('svgElem2').getAttribute('id');");

This will fail with: TypeError: Cannot call method "getAttribute" of null (injected script#1)

But, the same operations will succeed if done through Java:

WebClient webClient = new WebClient(BrowserVersion.FIREFOX_3_6);
webClient.setJavaScriptEnabled(true);
HtmlPage page =(HtmlPage)webClient.getPage("about:blank");
HtmlElement svg = page.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("id", "svgElem");
page.getElementsByTagName("body").get(0).appendChild(svg);
HtmlElement found = page.getElementById("svgElem");
assertNotNull(found);

[LionelWang]

I have this similar issue. It seems com.gargoylesoftware.htmlunit.javascript.host.Document.jsxFunction_createElementNS method has something wrong to support SVG element. The code is this:
public Object jsxFunction_createElementNS(final String namespaceURI, final String qualifiedName) {
final org.w3c.dom.Element element;
if (getBrowserVersion().hasFeature(BrowserVersionFeatures.GENERATED_154)
&& "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul".equals(namespaceURI)) {
// simple hack, no need to implement the XUL objects (at least in a first time)
element = new HtmlDivision(namespaceURI, qualifiedName, getPage(), null);
}
else if (HTMLParser.XHTML_NAMESPACE.equals(namespaceURI)) {
element = getPage().createElementNS(namespaceURI, qualifiedName);
}
else {
element = new DomElement(namespaceURI, qualifiedName, getPage(), null);
// SVG URI creates DomElement which does not support getAttribute method
}
return getScriptableFor(element);
}

It seems SVG URI simply creates DomElement, which does not support all methods defined in SVGElement. I think it's a limitation of HtmlUnit.

[Marc Guillemot]

Now fixed in SVN. This is not a real support for SVG, I've just use the same hack as for XUL elements: this was the fastest way to fix the problem reported.

[Marc Guillemot]

Reopening. I have to revert the quick hack used to fix this issue as it has too many side effects.

[Ahmed Ashour]

@lionelwang: SVG elements will be supported soon

[Ahmed Ashour]

Now fixed in SVN. Thanks for reporting.