1874606 - Wrong background-position with min/max/clamp on percentages

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[eyal gruss]

When using CSS min/max/clamp on percentage values in background-position, the result is wrong in Firefox (works in Chrome).

e.g. min(10%, 100%) actually takes the larger value.

Code to reproduce:

body {
  background-image: url('https://img.freepik.com/free-vector/english-alphabets-many-colors_1308-4763.jpg');
  background-size: 200%;
  background-position-x: min(10%, 100%);
}

Firefox screenshot

Chrome screenshot

Comment 1

[Timothy Nikkel (:tnikkel)]

https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=45c659bd4922fa3b4a7b602c6214f16092a31284&tochange=0c8d79edfc9a27b8eab7a71c7addeb223845275f

Gonna guess bug 1709018 initially.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1709018

:emilio, since you are the author of the regressor, bug 1709018, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

This is actually the correct behavior, afaict. https://drafts.csswg.org/css-backgrounds-3/#background-position says:

A percentage for the horizontal offset is relative to (width of background positioning area - width of background image).

Since the background-image (due to the background-size) is larger than the background positioning area, the percentage basis is negative. This is precisely the bug bug 1709018 was fixing.

In fact, Chrome and Safari behave like us if you use the background-position shorthand, but not if you use the background-position-x longhand for some reason.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Will add a test, but the bug itself is invalid.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1874606 - Add a test for a WebKit / Blink bug where they incorrectly simplify percentages inside calc() in background-position longhands. r=tnikkel,dholbert,#layout

See https://bugzilla.mozilla.org/show_bug.cgi?id=1874606#c3 (and the
test is self-explanatory, it's just a copy of
background-position-negative-percentage-comparison.html but with the
longhand expanded).

Comment 6

[eyal gruss]

so it seems that instead of clamp(0%, var(--dx), 100%) one should write clamp(100%, var(--dx), 0%)

Comment 7

[Emilio Cobos Álvarez (:emilio)]

If the image is larger than the positioning area, sure.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c133f145c344
Add a test for a WebKit / Blink bug where they incorrectly simplify percentages inside calc() in background-position longhands. r=layout-reviewers,jfkthame

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/44397 for changes under testing/web-platform/tests

Comment 10

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/c133f145c344

Comment 11

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/c133f145c344

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot