[Fiber] Fix rendering SVG into non-React SVG tree

[gaearon]

We used to determine the root tree namespace by the tag name alone in Fiber.

However this was broken for cases when we render an SVG tree into another SVG tree outside React.

This PR introduces a few new tests and fixes this by reading namespace from the root container, and using it in conjunction with the tag to determine child namespace.

Addresses https://github.com/facebook/react/pull/8586/files/414f1ec324bbce828c84900d66d202b5d776b6aa#r93161706.

[gaearon]

For some reason one of the new tests is failing for Stack in innerHTML mode.

[aweary]

For some reason one of the new tests is failing for Stack in innerHTML mode.

@gaearon looks like ajsdom bug to me. Here's a JSFiddle showing that it should return the HTML namespace when using innerHTML: https://jsfiddle.net/n3mqkqfv/

If you run the ~same code using jsdomyou'll see it returns the SVG namespace

var jsdom = require('jsdom').jsdom
var outerSVGRoot = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var container = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
outerSVGRoot.appendChild(container);
var markup = '<div react-reactroot></div>';
container.innerHTML = markup;
console.log(container.firstChild.namespaceURI);
// 'http://www.w3.org/2000/svg'

[gaearon]

I think you're right. Just skipping this test now since it's dead code anyway. We only use non-createElement code path for server rendering, but server rendering doesn't have mounting. The innerHTML is only assigned in the mounting code path.