foreignObject inside second SVG element for Chrome

Question

I am having an issue with Chrome and foreignObject were i would like to put this inside a SVG Element that is a child to another SVG element, for some reason chrome doesn't seem to like this. Am i missing something in my syntax or is it time file a bug repport?

Example:

<svg width="400" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <foreignObject x="0" y="0" width="400" height="200" overflow="hidden" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="pointer-events: all;">
        <div contenteditable="true" xmlns="http://www.w3.org/1999/xhtml" style="background: black; color: white;">
            <div>This works!</div>
        </div>
        <textarea>Here we can select text</textarea>
    </foreignObject>
    <svg x="0" y="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <foreignObject x="0" y="0" width="400" height="200" overflow="hidden" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="pointer-events: all;">
          <div contenteditable="true" xmlns="http://www.w3.org/1999/xhtml" style="background: black; color: white;">
            <div>But this does not in chrome, why not?</div>
          </div>
          <textarea>Unable to select text, but it's posible to edit</textarea>
        </foreignObject>
    </svg>
</svg>

JSFiddle example