Skip to content

Accept vertical-first edge offsets in background-position - #210

Merged
TylerBrinks merged 1 commit into
TylerBrinks:masterfrom
jhaygood86:feature/background-position-vertical-first-offsets
Jul 23, 2026
Merged

Accept vertical-first edge offsets in background-position#210
TylerBrinks merged 1 commit into
TylerBrinks:masterfrom
jhaygood86:feature/background-position-vertical-first-offsets

Conversation

@jhaygood86

Copy link
Copy Markdown
Contributor

Problem

The 3-/4-value background-position syntax positions each axis by an edge keyword plus an optional offset, combined with && — so the two axes may appear in either order (CSS Backgrounds 3 §3.6):

[ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

The horizontal-first forms work, but their vertical-first mirrors are rejected:

background-position: right 20px bottom 10px;  /* accepted */
background-position: bottom 10px right 20px;  /* rejected */
background-position: bottom 10px right;       /* rejected */
background-position: bottom right 20px;       /* rejected */

PointConverter has WithOrder(hi, vi, …) / WithOrder(hi, <lp>, vi, …) for the horizontal-first cases but no vertical-first equivalents.

Fix

Add the three mirrored WithOrder cases (vi hi <lp>, vi <lp> hi, vi <lp> hi <lp>) after the existing horizontal-first ones.

Two components on the same axis stay invalid — left right, top bottom, bottom 10px top, left 10px right 20px are all still rejected.

Tests

9 cases in PropertyTests/BackgroundProperty.cs: 5 vertical-first legal forms and 4 same-axis-twice illegal ones. The 5 legal cases fail on master; the illegal guards pass both ways. The full suite (1263 existing tests) stays green, and all seven target frameworks build with no new warnings.

PointConverter also backs radial-gradient/conic-gradient positions, which gain the same symmetry.

The 3- and 4-value background-position syntax positions each axis by an
edge keyword and an optional offset, combined with "&&" - so the two
axes may appear in either order (CSS Backgrounds 3 3.6). PointConverter
had the horizontal-first forms ("right 20px bottom 10px") but not their
vertical-first mirrors, so "bottom 10px right", "bottom right 20px" and
"bottom 10px right 20px" were rejected.

Add the three mirrored WithOrder cases. Two components on the same axis
("left right", "left 10px right 20px") remain invalid.
@jhaygood86
jhaygood86 marked this pull request as ready for review July 22, 2026 23:04
@TylerBrinks
TylerBrinks merged commit 91c98d6 into TylerBrinks:master Jul 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants