layout: Implement the fit-content() sizing function (#36056)

Spec: https://drafts.csswg.org/css-sizing-3/#funcdef-width-fit-content

It's similar to the `fit-content` keyword but, instead of clamping the
stretch size between `min-content` and `max-content`, it clamps the
provided argument.

So now that we support `fit-content`, it's quite straightforward to add.
It's just not completely clear what should happen when the argument has
a cyclic percentage, so this may need some further adjustments depending
on the outcome of https://github.com/w3c/csswg-drafts/issues/11805

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-03-23 15:26:44 +01:00 committed by GitHub
parent 3a356ffb74
commit 8c2ac88ad0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
33 changed files with 100 additions and 192 deletions

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-001.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-002.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-003.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-004.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-005.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-006.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-007.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-008.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-009.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-010.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-011.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-012.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-013.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-014.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-015.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[fit-content-length-percentage-016.html]
expected: FAIL

View file

@ -1,9 +0,0 @@
[height-valid.html]
[e.style['height'\] = "fit-content(10%)" should set the property value]
expected: FAIL
[e.style['height'\] = "fit-content(0.5em)" should set the property value]
expected: FAIL
[e.style['height'\] = "fit-content(calc(10% - 0.5em))" should set the property value]
expected: FAIL

View file

@ -1,12 +0,0 @@
[max-height-computed.html]
[Property max-height value 'fit-content(10px)']
expected: FAIL
[Property max-height value 'fit-content(20%)']
expected: FAIL
[Property max-height value 'fit-content(calc(10% + 40px))']
expected: FAIL
[Property max-height value 'fit-content(calc(10px + 0.5em))']
expected: FAIL

View file

@ -1,9 +0,0 @@
[max-height-valid.html]
[e.style['max-height'\] = "fit-content(10%)" should set the property value]
expected: FAIL
[e.style['max-height'\] = "fit-content(0.5em)" should set the property value]
expected: FAIL
[e.style['max-height'\] = "fit-content(calc(10% - 0.5em))" should set the property value]
expected: FAIL

View file

@ -1,12 +0,0 @@
[max-width-computed.html]
[Property max-width value 'fit-content(10px)']
expected: FAIL
[Property max-width value 'fit-content(20%)']
expected: FAIL
[Property max-width value 'fit-content(calc(10% + 40px))']
expected: FAIL
[Property max-width value 'fit-content(calc(10px + 0.5em))']
expected: FAIL

View file

@ -1,9 +0,0 @@
[max-width-valid.html]
[e.style['max-width'\] = "fit-content(10%)" should set the property value]
expected: FAIL
[e.style['max-width'\] = "fit-content(0.5em)" should set the property value]
expected: FAIL
[e.style['max-width'\] = "fit-content(calc(10% - 0.5em))" should set the property value]
expected: FAIL

View file

@ -1,12 +0,0 @@
[min-height-computed.html]
[Property min-height value 'fit-content(10px)']
expected: FAIL
[Property min-height value 'fit-content(20%)']
expected: FAIL
[Property min-height value 'fit-content(calc(10% + 40px))']
expected: FAIL
[Property min-height value 'fit-content(calc(10px + 0.5em))']
expected: FAIL

View file

@ -1,9 +0,0 @@
[min-height-valid.html]
[e.style['min-height'\] = "fit-content(10%)" should set the property value]
expected: FAIL
[e.style['min-height'\] = "fit-content(0.5em)" should set the property value]
expected: FAIL
[e.style['min-height'\] = "fit-content(calc(10% - 0.5em))" should set the property value]
expected: FAIL

View file

@ -1,12 +0,0 @@
[min-width-computed.html]
[Property min-width value 'fit-content(10px)']
expected: FAIL
[Property min-width value 'fit-content(20%)']
expected: FAIL
[Property min-width value 'fit-content(calc(10% + 40px))']
expected: FAIL
[Property min-width value 'fit-content(calc(10px + 0.5em))']
expected: FAIL

View file

@ -1,9 +0,0 @@
[min-width-valid.html]
[e.style['min-width'\] = "fit-content(10%)" should set the property value]
expected: FAIL
[e.style['min-width'\] = "fit-content(0.5em)" should set the property value]
expected: FAIL
[e.style['min-width'\] = "fit-content(calc(10% - 0.5em))" should set the property value]
expected: FAIL

View file

@ -1,9 +0,0 @@
[width-valid.html]
[e.style['width'\] = "fit-content(10%)" should set the property value]
expected: FAIL
[e.style['width'\] = "fit-content(0.5em)" should set the property value]
expected: FAIL
[e.style['width'\] = "fit-content(calc(10% - 0.5em))" should set the property value]
expected: FAIL