Add a failing test for SVG across portals

It should reset the container stack when it pushes a portal, and restore it on pop.
However this currently doesn't happen.

Author: gaearon

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

@@ -313,6 +313,44 @@ describe('ReactDOMFiber', () => {
       expect(container.innerHTML).toBe('');
     });
 
+    xit('TODO: should not apply SVG mode across portals', () => {
+      var portalContainer = document.createElement('div');
+      var portalContainer2 = document.createElement('div');
+      var portalContainer3 = document.createElement('div');
+
+      ReactDOM.render(
+        <svg>
+          <image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
+          {ReactDOM.unstable_createPortal(
+            <div>portal1[1]</div>,
+            portalContainer
+          )}
+          <image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
+        </svg>,
+        container
+      );
+
+      const div = portalContainer.childNodes[0];
+      const image1 = container.firstChild.childNodes[0];
+      const image2 = container.firstChild.childNodes[1];
+      expect(div.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+      expect(div.tagName).toBe('DIV');
+      expect(image1.namespaceURI).toBe('http://www.w3.org/2000/svg');
+      expect(image1.tagName).toBe('image');
+      expect(
+        image1.getAttributeNS('http://www.w3.org/1999/xlink', 'href')
+      ).toBe('http://i.imgur.com/w7GCRPb.png');
+      expect(image2.namespaceURI).toBe('http://www.w3.org/2000/svg');
+      expect(image2.tagName).toBe('image');
+      expect(
+        image2.getAttributeNS('http://www.w3.org/1999/xlink', 'href')
+      ).toBe('http://i.imgur.com/w7GCRPb.png');
+
+      ReactDOM.unmountComponentAtNode(container);
+      expect(portalContainer.innerHTML).toBe('');
+      expect(container.innerHTML).toBe('');
+    });
+
     it('should pass portal context when rendering subtree elsewhere', () => {
       var portalContainer = document.createElement('div');
 

src/renderers/dom/shared/__tests__/ReactDOMSVG-test.js

@@ -55,26 +55,26 @@ describe('ReactDOMSVG', () => {
       node
     );
     // SVG tagName is case sensitive.
-    expect(g.tagName).toBe('g');
     expect(g.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    expect(g.tagName).toBe('g');
     expect(g.getAttribute('stroke-width')).toBe('5');
-    expect(image.tagName).toBe('image');
     expect(image.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    expect(image.tagName).toBe('image');
     expect(
       image.getAttributeNS('http://www.w3.org/1999/xlink', 'href')
     ).toBe('http://i.imgur.com/w7GCRPb.png');
-    expect(image2.tagName).toBe('image');
     expect(image2.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    expect(image2.tagName).toBe('image');
     expect(
       image2.getAttributeNS('http://www.w3.org/1999/xlink', 'href')
     ).toBe('http://i.imgur.com/w7GCRPb.png');
     // DOM tagName is capitalized by browsers.
-    expect(p.tagName).toBe('P');
     expect(p.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
-    expect(div.tagName).toBe('DIV');
+    expect(p.tagName).toBe('P');
     expect(div.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
-    expect(foreignDiv.tagName).toBe('DIV');
+    expect(div.tagName).toBe('DIV');
     expect(foreignDiv.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+    expect(foreignDiv.tagName).toBe('DIV');
   });
 
 });