Re: [css-backgrounds] border-image with an SVG resource that has no intrinsic size

On May 29, 2015, at 11:49 PM, Brad Kemper <brad.kemper@gmail.com<mailto:brad.kemper@gmail.com>> wrote:




Brad Kemper

On May 29, 2015, at 12:20 AM, Florian Rivoal <florian@rivoal.net<mailto:florian@rivoal.net>> wrote:


On 29 May 2015, at 03:51, Dean Jackson <dino@apple.com<mailto:dino@apple.com>> wrote:

I'm not sure if this is a UI spec thing, or borders, or something that's just fallen through the cracks. WebKit recently landed a change to make border-image with an SVG resource, that has no intrinsic size, behave like Firefox.

https://bugs.webkit.org/show_bug.cgi?id=139405

Example/Test is here: http://trac.webkit.org/export/184972/trunk/LayoutTests/fast/borders/border-image-fill-no-intrinsic-size.html

Chrome had the same behaviour as WebKit did, before the change. I haven't tested on IE/Edge (sorry... I really need to set up a login).

It's not completely clear what the best thing to do in this case is, but we think the Firefox behaviour was better. Is this specified anywhere? We'd really like to encourage people to not put an intrinsic size in their SVG.

Looks like a good question, but out of scope for css-ui. That spec only cares about sizing with regards to the box-sizing property, which isn't involved here.
Tagging [css-backgrounds], as it does involve the border-image property.

Where the image is all center fill (border-image-slice is 0), since it is using initial border-image-width (which is the border width), then the image bounds should fill the padding-box (the border widths are using zero of the image). Where there is border-image-slice of 20, then the borders are filled with 20 "vector coordinates" (px in this case) of the image, according to the spec.

According to the images spec, since the svg  element has no intrinsic size, its concrete object size is determined by the region it is filling. It is the same as if that region was the size of a window the svg was viewed in by itself.

So, I don't understand why safari and chrome are not drawing the green box in columns 1 and 3 of the example, or why the green box is shrunk is shrunk in the second column of the second row, since that green box does have have fixed dimensions. When I view the SVG by itself in a window, it first change size when I resize the window. Firefox seems to have all those as I'd expect.

But I can't explain why Firefox renders the last 2 example s of the 2nd row the way it does. I would expect the third one of the second row to be all green (20px sliced off edges of images and stretched into zero-width borders). I would expect the fourth one of the second row to be a red box with the green box (and the black border-box within it) in its upper left corner, as it is in Safari 8.06, since the border width and the slice width are the same.

Note that the SVG WG is looking into intrinsic sizing and intrinsic ratio issues for all use cases (inline SVG, SVG embedded in HTML, <img> and CSS Image). While CSS Images[1] has a solid definition, we will review the behavior with regards of the algorithm that we will specify.

Greetings,
Dirk

[1] http://dev.w3.org/csswg/css-images-3/#intrinsic-dimensions