[css-images-4] media fragment example incorrect

[faceless2]

There is a subtle error in this example: https://drafts.csswg.org/css-images-4/#example-036516b1

The "xywh" media fragment on an SVG will set (or override) the viewBox on the SVG root element (see below). But this does not affect the intrinsic dimensions of the image, which remain at 180x20 - as set by the SVG root element's width and height.

To restrict the area covered by the background image to 20x20, you either have to add overflow: hidden to the SVG root element or add background-size: 20px 20px to the example CSS. Without one of these changes, the media fragment effectively makes no difference at all.

No-one supports xywh media fragments on SVG yet, but you can get exactly the same result by replacing the URL with

background-image: image('sprites.svg#svgView(viewBox(40,0,20,20))')

I've put a demo at https://jsbin.com/nerutacenu/edit?html,output

--

Section from SVG spec that is relevant:

If the SVG fragment identifier addresses a space segment (e.g., MyDrawing.svg#xywh=0,0,100,100),then the initial view into the SVG document is established using the view specification attributes on the outermost svg element where the 'viewBox' is overriden by the x, y, width and height values provided by the fragment identifier.

See https://svgwg.org/svg2-draft/single-page.html#linking-LinksIntoSVG