Should SVG contents be visible outside an embedded

Question

In the past I answered a question about "who was wrong" in regards to SVG images not being "cropped" (overflow: hidden) in IE9, where all other supporting browsers did so. The answer is here.

Today, while reviewing HTML5 Boilerplate again, I noticed that they claim they "[correct] overflow not being hidden in IE9" with this bit of code:

svg:not(:root) { overflow: hidden; }

I'm looking for someone to confirm or deny my original research by pointing to some other note in either the HTML5 or SVG specs. I cannot find anything, but I want to be sure I am not missing something.

The best I can find is that they are trying to apply rule 7 here, but that should only apply to an SVG Document, like via an img tag or when loaded directly.

Answer 1

The SVG specification has this to say: http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

Seems similar to what Firefox and Chrome do no?

Answer 2

Your original answer seems sound to me, using the grounds you specified (specifically the fifth and seventh bullet points of the spec).

It seems incredibly unlikely that IE is correct and Webkit and Firefox are not. However, as you suspect the seventh bullet point is the differentiating factor.

If you load this test case in Chrome and use the Developer Tools to inspect the SVG, you will see:

(user agent stylesheet)

svg:not(:root), symbol, image, marker, pattern, foreignObject {
  overflow: hidden;
}

If you enable "Show User Agent CSS" in Firebug you see this rule in Firefox:

svg.css (line 49) <System>

svg:not(:root), symbol, image, marker, pattern, foreignObject {
  overflow: hidden;
} 

Finally, if you edit the test case to add svg { overflow:hidden } then IE visually matches the other browsers.

Thus, it would seem to me that all three browsers are behaving according to the spec, but Chrome/Safari/FF all have UA rules that more closely match what most users would expect.

If I could leave well-enough alone, this is where I'd stop this answer.

However, if you edit the test case to add svg { overflow:visible }, both Chrome and Firefox do not 'properly' show the overflowed contents. I'm not sure how to resolve this data point with the rest of this answer. :/