Bug 292202 – Add support for logical background-position shorthands

• Status: NEW
• Component: CSS

[Sam Weinig]

Add support for logical background-position shorthands background-position-block and background-position-inline from CSS Backgrounds Module Level 4

- https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-inline
- https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-block

[Sam Weinig]

Adding support for this raises a few complications:

1. It's the first logical / physical pair where the logical and physical longhands do not share the same grammar. This means that the automatic "logical property group" support already built will not be sufficient, and some conversion process from logical to physical will need to take place at style building (and perhaps some physical to logical conversion at computed value extraction time).

2. An additional complication is that, if we wanted to also support the logical / flow relative keywords (as defined in CSS Values 5 - https://drafts.csswg.org/css-values-5/#position) in the  `background-position` and `position` shorthands, its not clear exactly how they would work. Consider the case of the `background-position` shorthand, which has the following grammar:

```
<'background-position'> = <bg-position>#
```

(a comma separated list of <bg-position> productions).

Let's start with an existing example where you have the following usage:

```
<div id="test1" style="background-position: left center, center top;">...</div>
```

In this example, the following assertions hold:

```
assert(document.getElementById("test1").style.backgroundPositionX == "left, center");
assert(document.getElementById("test1").style.backgroundPositionY == "center, top");
```

Simple. When processing the shorthand, the parser split each background-position pair into an x and y component and created lists with them.
 
Now, consider a case using the new logical keywords along with the old physical keywords:

```
<div id="test2" style="background-position: left center, center inline-end;">...</div>
```

What should the following assertions be?

```
assert(document.getElementById("test2").style.backgroundPositionX == ???);
assert(document.getElementById("test2").style.backgroundPositionY == ???);
assert(document.getElementById("test2").style.backgroundPositionBlock == ???);
assert(document.getElementById("test2").style.backgroundPositionInline == ???);
```

From an implementation perspective, we could put a placeholder value in, so that style building works appropriately, but the serialization of the specified value remains an issue.

The specification also suggests that further issues lurk when var() is included and https://github.com/w3c/csswg-drafts/issues/9690 is linked.

[Sam Weinig]

Filed https://github.com/w3c/csswg-drafts/issues/12132 to track issue 2 mentioned above.

[Sam Weinig]

Pull request: https://github.com/WebKit/WebKit/pull/44748

[Radar WebKit Bug Importer]

<rdar://problem/150691098>