[css-shapes][css-backgrounds] percentage values for `object-view-box` inconsistent with percentage values for `background-position`

[jsnkuhn]

percentage values for object-view-box inconsistent with percentage values for background-position. Not sure if this is intentional.

object-view-box: xywh(50% 0 32px 32px); (https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes)

Defines a rectangle via offsets from the top and left edge of the reference box, and a specified width and height.

background-position: 50% 0; (https://www.w3.org/TR/css-backgrounds-3/#background-position)

A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by background-size.

[fantasai]

Yes, this is intentional. background-position is not trying to position the top left corner of the tile, it's considering the tile as a whole. Length values are offsets from its position, whatever that would have been, and percentages are representing alignment between left-aligned and right-aligned, with center-aligned as 50%.

xywh on the other hand is a notation (more broadly used than in CSS) which represents a rectangle using the x and y coordinates of its top left corner, plus a width and a height.

(I suppose if there was a need for a background-position style notation, which gives the rectangle's dimensions plus a <position> value, we could add that to css-shapes; but it'd be a different notation than xywh.)

Let me know if that answers your question, or if you think there's something to follow up here. :)

[jsnkuhn]

Thanks for clarifying. Just using the top left position makes a lot more sense. Was just caught off guard by it be different. I remember from back when background-position was new it took me forever to get use to the way that background-position with percentages works. Will just require over coming some muscle memory.

But it will be great to finally have a way to do spriting out side of CSS backgrounds