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)
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.
Comment 1•4 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
Comment 2•4 years ago
|
||
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.
Updated•4 years ago
|
Updated•4 years ago
|
Reporter | ||
Comment 3•4 years ago
|
||
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?
Comment 4•4 years ago
|
||
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.
Reporter | ||
Comment 5•4 years ago
|
||
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.
Description
•