Intent to Ship: side-relative syntax for background-position-x/y longhands

[Chromestatus]

Contact emails

jfern...@igalia.com

Specification

https://drafts.csswg.org/css-backgrounds-4/#background-position-longhands

Summary

Defines the background image's position relative to one of its edges. This syntax gives web authors a more flexible and responsive mechanisms to define the background image position, instead of using fixed values that need to be adapted to the window's or frame's size. This feature is applied also to the "-webkit-mask-position" to ensure webcompat levels are the same.

Blink component

Blink>CSS

Web Feature ID

background-position

Motivation

One important motivation is interoperability, given that Chrome is the only browser that lacks this syntax for the background-position-x/y longhands. Additionally, the background-position shorthand, which sets both the x/y positions, already supports the side-relative syntax, so the lack of the same syntax in the longhands may confuse web developers. There is no specific explainer, but this MDN page should be enough to understand the feature: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x

Initial public proposal

No information provided

TAG review

No information provided

TAG review status

Not applicable

Risks

Interoperability and Compatibility

This feature doesn't imply any interoperability risk, but the contrary, since Chrome needs to catch up in order to provide the same functionality than Firefox and Safari. There is no back-compatibility risk, because the old syntax is still valid if this feature is implemented.

Gecko: Shipped/Shipping

WebKit: Shipped/Shipping

Web developers: Positive (https://issues.chromium.org/issues/40468636) The issue has 15 votes by now.

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

The feature can be tested and debugged using the regular Chrome DevTools support (eg, css style inspection)

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes
This feature is implemented in the blink's style module of the web engine, so it's shared among all the platforms.

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/css/css-backgrounds/parsing?label=master&label=experimental&aligned&q=background-position-x https://wpt.fyi/results/css/css-backgrounds/parsing?label=master&label=experimental&aligned&q=background-position-y

Flag name on about://flags

No information provided

Finch feature name

No information provided

Non-finch justification

This is a catch-up change to align Chrome with the rest of the major web engines (Firefox and Safari). It affects blink only and enables a new syntax for a CSS property that Chrome already exposes to the web.

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40468636

Estimated milestones

Shipping on desktop	143
Shipping on Android	143
Shipping on WebView	143

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5073321259565056?gate=5131252113997824

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/68d10a08.710a0220.5367c.009d.GAE%40google.com

This intent message was generated by Chrome Platform Status.

[Daniel Bratell]

LGTM1

/Daniel

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6902284c.050a0220.56be2.0509.GAE%40google.com.

[Mike Taylor]

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/1135e045-f680-4652-aef0-be78da725c40%40gmail.com.

[Sebastian Zartner]

For the record, there's no official publication of CSS Backgrounds 4 yet and it still claims it is not ready for implementation.

Therefore I am currently working towards a First Public Working Draft, see https://github.com/w3c/csswg-drafts/issues/13062.

Sebastian

--

[Chris Harrelson]

LGTM3

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAERejNaNAPXu3aMwCcQJjePK94CRs8yoDPkaiP8h19rR%3D_yNVw%40mail.gmail.com.