Open Bug 1667306 Opened 4 years ago Updated 4 years ago

min-content and max-content are not usable in math functions (calc/min/max/clamp) (needs spec work)

Categories

(Core :: CSS Parsing and Computation, enhancement, P3)

Firefox 81
enhancement

Tracking

()

People

(Reporter: rasmussen.bryan, Unassigned)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:81.0) Gecko/20100101 Firefox/81.0

Steps to reproduce:

using firefox developer 81.0b9 (64-bit) but also exists in regular firefox v 79

html:
<div class="example">some text in the example</div>
css
.example {
width: min(min-content + 50px, 60px)
}

Actual results:

the width raised an improper property value error.

Expected results:

this is the part I'm not sure about, have not been able to find it in css sizing module, but I would expect it to set the width.

why do I expect this - because if such things as fit-content are expected to be min(max-content, max(min-content, <length-percentage>)). then I would expect that one could do min(max-content - 25px, max(min-content + 25px, 50%)) on one's own if one wanted to, but it seems one can't.

This same situation holds in Chrome, so maybe my expectations are wrong, but I figured I would raise it and see if you had a response.

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core

Yeah, this could be made to work with some effort perhaps. Defining how this interpolates and animates would be extremely fun.

The reason this doesn't work is that width/height's syntax is <length-percentage> | auto | min-content | ..., and <length-percentage> is what supports calc().

I'd recommend raising this in https://github.com/w3c/csswg-drafts/issues/new, so that we can work on defining how this could be made to work.

For inline-size (width, in horizontal writing systems) it is probably fine. For block-size (height) it may be harder, because you still need to compute the auto height, then add or remove stuff as needed, which changes your layout again, so it seems multi-pass, potentially, which is not great.

Severity: -- → N/A
Type: defect → enhancement
Priority: -- → P3
Summary: min-content and max-content are not usable in functions → min-content and max-content are not usable in math functions (calc/min/max/clamp) (needs spec work)
Status: UNCONFIRMED → NEW
Ever confirmed: true

I'd recommend raising this in https://github.com/w3c/csswg-drafts/issues/new, so that we can work on defining how this could be made to work.

I suppose you mean that it is mozilla that should raise it, but just wanted to confirm?

Oh, I meant that you could raise it, but I can probably do that too if you want, just let me know.

Issues from developers with actual use cases are generally better than issues from me with a "this could potentially be made to work work" :P

I'm happy to weigh in though.

I've made an issue on css-wg drafts https://github.com/w3c/csswg-drafts/issues/5554 but I don't think I have label adding permissions, so I have not labeled.

You need to log in before you can comment on or make changes to this bug.