1850170 - CSS clamp beehaves differently depending on order of operations

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[lorenzjacob.noel]

Attachment: Comparison

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0

Steps to reproduce:

When using the clamp function inside a calc function, the result of the clamp will differ depending on whether the clamp value will be added or subtracted.
Requirements:
Nested block elements like this:
<div><div></div></div>
Looks like the MAX value of clamp needs to be smaller than MIN(or the middle value) for this to occur
Specific code:
.inner {
margin-left: calc(0px - clamp(100%, 100%, 20em)) /* will shift the block left by 20em */
margin-left: calc(0px + clamp(100%, 100%, 20em)) /*will shift the block right by 100% */
}

Attached are some terribly cropped screenshots that visualize the problem.
Code for visualization, for use in, say, codepen(note the plus and minus signs differ in the last two lines):
html:
<div class="outer">
<div class="inner">
</div>
</div>

css:
html, body {
margin: 0;
padding: 0;
}

• {
  box-sizing: border-box;
  }

.outer {
width: 800px;
margin-left: 450px;
height: 200px;
background: blue;
padding: 10px;
}

.inner {
background: red;
height: 100px;
width: clamp(90%, 100%, 20em);
margin-top: 25px;
margin-left: calc(0px + clamp(100%, 100%, 20em)); /* these /
margin-left: calc(0px - clamp(100%, 100%, 20em)); / do not match */
}

Actual results:

Clamp value changes depending on which operator is used.

Expected results:

As neither the percentage nor the em value depend the margin, regardless of addition or subtraction being performed, the block should be shifted by the same amount.
Chrome 116 displays this as expected.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

Attachment: standalone testcase

Here's a testcase just using simple px units for clarity.

Comment 3

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1850170 - Don't use negate-values-and-swap-bounds to negate CSS clamp() when min > max, because the result is order-dependent. r=#style

This fixes the incorrect result when negating a clamp() where the min value is greater than max.
I'll put together a WPT reftest for this shortly.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/eb187162423d
Don't use negate-values-and-swap-bounds to negate CSS clamp() when min > max, because the result is order-dependent. r=emilio

Comment 5

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

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

Comment 6

[Cosmin Sabou [:CosminS]]

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

Comment 7

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

Upstream PR merged by moz-wptsync-bot