[media-queries] Issue with media-queries and embedded SVG

Hello CSS WG and SVG WG

I recently faced an implementation issue when I tried to use media-queries
inside an SVG document embedded inside an HTML document.


The original issue :

I added an @media print rule inside an SVG image and embedded this SVG
image inside an HTML document through the <img> tag.

I was really surprise to see my image not following the @media print rule
when I tried to print my HTML document. I tried to do this with Firfox,
Chrome, Safari and Opera (I do not have IE), they all reacte the same : my
image was printed colored.

I tried to do the same with my SVG image embedded through the <object> tag.
This time it worked pretty well and my image was printed following the
@media print rule \o/

My point is that, in a user/author point of view, I do not see any reason
to have a different behavior between those case. It really should behave
the same. But some Mozilla folks told me that it was an "unspecified
behavior" [1] so here I'm to discuss this :)


The media-queries issue :

After this discussion, I ran some more tests, using media-queries to see
what would happen [2]... to say the least I was very surprised.

I was expected to see all the media-queries defined inside the SVG
documents to react to the viewport state of the parent document... what a
mistake. All the media-queries depending on the window state (width,
aspect-ratio, orientation) were reacting to some weird viewport equal to
the size of the SVG image! But at the same time, all media-queries
depending on the device characteristics (device-width, color, monochrome,
device-aspect-ratio) were reacting properly. As a sugar point, depending on
how the SVG image is embedded, Chrome does not always react as other
browser.

In an author point of view, all of this is really hard to understand. I
really think that CSS media-queries inside an embedded SVG image should
react to the characteristic of both the parent document device AND window.

What do you think?


[1] https://bugzilla.mozilla.org/show_bug.cgi?id=763349
[2] http://jeremie.patonnier.net/experiences/svg/media-queries/test.html

Best regards
-- 
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>