LibWeb: Parse CSS fit-content(<length-percentage>) values

Before this change, we only parsed fit-content as a standalone keyword,
but CSS-SIZING-3 added it as a function as well. I don't know of
anything else in CSS that is overloaded like this, so it ends up looking
a little awkward in the implementation.

Note that a lot of code had already been prepped for fit-content values
to have an argument, we just weren't parsing it.
This commit is contained in:
Andreas Kling 2025-02-26 18:16:36 +01:00 committed by Andreas Kling
commit 8ab61843be
Notes: github-actions[bot] 2025-02-26 23:45:14 +00:00
25 changed files with 185 additions and 67 deletions

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 10 tests
6 Pass
4 Fail
8 Pass
2 Fail
Pass e.style['height'] = "auto" should set the property value
Pass e.style['height'] = "min-content" should set the property value
Pass e.style['height'] = "max-content" should set the property value
@ -11,6 +11,6 @@ Pass e.style['height'] = "0" should set the property value
Pass e.style['height'] = "10%" should set the property value
Pass e.style['height'] = "0.5em" should set the property value
Fail e.style['height'] = "calc(10% - 0.5em)" should set the property value
Fail e.style['height'] = "fit-content(10%)" should set the property value
Fail e.style['height'] = "fit-content(0.5em)" should set the property value
Pass e.style['height'] = "fit-content(10%)" should set the property value
Pass e.style['height'] = "fit-content(0.5em)" should set the property value
Fail e.style['height'] = "fit-content(calc(10% - 0.5em))" should set the property value

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 12 tests
6 Pass
6 Fail
9 Pass
3 Fail
Pass Property max-height value 'none'
Pass Property max-height value 'min-content'
Pass Property max-height value 'max-content'
@ -12,7 +12,7 @@ Pass Property max-height value '20%'
Pass Property max-height value 'calc(10% + 40px)'
Fail Property max-height value 'calc(10px - 0.5em)'
Fail Property max-height value 'calc(10px + 0.5em)'
Fail Property max-height value 'fit-content(10px)'
Fail Property max-height value 'fit-content(20%)'
Fail Property max-height value 'fit-content(calc(10% + 40px))'
Pass Property max-height value 'fit-content(10px)'
Pass Property max-height value 'fit-content(20%)'
Pass Property max-height value 'fit-content(calc(10% + 40px))'
Fail Property max-height value 'fit-content(calc(10px + 0.5em))'

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 10 tests
6 Pass
4 Fail
8 Pass
2 Fail
Pass e.style['max-height'] = "none" should set the property value
Pass e.style['max-height'] = "min-content" should set the property value
Pass e.style['max-height'] = "max-content" should set the property value
@ -11,6 +11,6 @@ Pass e.style['max-height'] = "0" should set the property value
Pass e.style['max-height'] = "10%" should set the property value
Pass e.style['max-height'] = "0.5em" should set the property value
Fail e.style['max-height'] = "calc(10% - 0.5em)" should set the property value
Fail e.style['max-height'] = "fit-content(10%)" should set the property value
Fail e.style['max-height'] = "fit-content(0.5em)" should set the property value
Pass e.style['max-height'] = "fit-content(10%)" should set the property value
Pass e.style['max-height'] = "fit-content(0.5em)" should set the property value
Fail e.style['max-height'] = "fit-content(calc(10% - 0.5em))" should set the property value

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 12 tests
6 Pass
6 Fail
9 Pass
3 Fail
Pass Property max-width value 'none'
Pass Property max-width value 'min-content'
Pass Property max-width value 'max-content'
@ -12,7 +12,7 @@ Pass Property max-width value '20%'
Pass Property max-width value 'calc(10% + 40px)'
Fail Property max-width value 'calc(10px - 0.5em)'
Fail Property max-width value 'calc(10px + 0.5em)'
Fail Property max-width value 'fit-content(10px)'
Fail Property max-width value 'fit-content(20%)'
Fail Property max-width value 'fit-content(calc(10% + 40px))'
Pass Property max-width value 'fit-content(10px)'
Pass Property max-width value 'fit-content(20%)'
Pass Property max-width value 'fit-content(calc(10% + 40px))'
Fail Property max-width value 'fit-content(calc(10px + 0.5em))'

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 10 tests
6 Pass
4 Fail
8 Pass
2 Fail
Pass e.style['max-width'] = "none" should set the property value
Pass e.style['max-width'] = "min-content" should set the property value
Pass e.style['max-width'] = "max-content" should set the property value
@ -11,6 +11,6 @@ Pass e.style['max-width'] = "0" should set the property value
Pass e.style['max-width'] = "10%" should set the property value
Pass e.style['max-width'] = "0.5em" should set the property value
Fail e.style['max-width'] = "calc(10% - 0.5em)" should set the property value
Fail e.style['max-width'] = "fit-content(10%)" should set the property value
Fail e.style['max-width'] = "fit-content(0.5em)" should set the property value
Pass e.style['max-width'] = "fit-content(10%)" should set the property value
Pass e.style['max-width'] = "fit-content(0.5em)" should set the property value
Fail e.style['max-width'] = "fit-content(calc(10% - 0.5em))" should set the property value

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 11 tests
5 Pass
6 Fail
8 Pass
3 Fail
Pass Property min-height value 'min-content'
Pass Property min-height value 'max-content'
Pass Property min-height value '10px'
@ -11,7 +11,7 @@ Pass Property min-height value '20%'
Pass Property min-height value 'calc(10% + 40px)'
Fail Property min-height value 'calc(10px - 0.5em)'
Fail Property min-height value 'calc(10px + 0.5em)'
Fail Property min-height value 'fit-content(10px)'
Fail Property min-height value 'fit-content(20%)'
Fail Property min-height value 'fit-content(calc(10% + 40px))'
Pass Property min-height value 'fit-content(10px)'
Pass Property min-height value 'fit-content(20%)'
Pass Property min-height value 'fit-content(calc(10% + 40px))'
Fail Property min-height value 'fit-content(calc(10px + 0.5em))'

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 10 tests
6 Pass
4 Fail
8 Pass
2 Fail
Pass e.style['min-height'] = "auto" should set the property value
Pass e.style['min-height'] = "min-content" should set the property value
Pass e.style['min-height'] = "max-content" should set the property value
@ -11,6 +11,6 @@ Pass e.style['min-height'] = "0" should set the property value
Pass e.style['min-height'] = "10%" should set the property value
Pass e.style['min-height'] = "0.5em" should set the property value
Fail e.style['min-height'] = "calc(10% - 0.5em)" should set the property value
Fail e.style['min-height'] = "fit-content(10%)" should set the property value
Fail e.style['min-height'] = "fit-content(0.5em)" should set the property value
Pass e.style['min-height'] = "fit-content(10%)" should set the property value
Pass e.style['min-height'] = "fit-content(0.5em)" should set the property value
Fail e.style['min-height'] = "fit-content(calc(10% - 0.5em))" should set the property value

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 11 tests
5 Pass
6 Fail
8 Pass
3 Fail
Pass Property min-width value 'min-content'
Pass Property min-width value 'max-content'
Pass Property min-width value '10px'
@ -11,7 +11,7 @@ Pass Property min-width value '20%'
Pass Property min-width value 'calc(10% + 40px)'
Fail Property min-width value 'calc(10px - 0.5em)'
Fail Property min-width value 'calc(10px + 0.5em)'
Fail Property min-width value 'fit-content(10px)'
Fail Property min-width value 'fit-content(20%)'
Fail Property min-width value 'fit-content(calc(10% + 40px))'
Pass Property min-width value 'fit-content(10px)'
Pass Property min-width value 'fit-content(20%)'
Pass Property min-width value 'fit-content(calc(10% + 40px))'
Fail Property min-width value 'fit-content(calc(10px + 0.5em))'

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 10 tests
6 Pass
4 Fail
8 Pass
2 Fail
Pass e.style['min-width'] = "auto" should set the property value
Pass e.style['min-width'] = "min-content" should set the property value
Pass e.style['min-width'] = "max-content" should set the property value
@ -11,6 +11,6 @@ Pass e.style['min-width'] = "0" should set the property value
Pass e.style['min-width'] = "10%" should set the property value
Pass e.style['min-width'] = "0.5em" should set the property value
Fail e.style['min-width'] = "calc(10% - 0.5em)" should set the property value
Fail e.style['min-width'] = "fit-content(10%)" should set the property value
Fail e.style['min-width'] = "fit-content(0.5em)" should set the property value
Pass e.style['min-width'] = "fit-content(10%)" should set the property value
Pass e.style['min-width'] = "fit-content(0.5em)" should set the property value
Fail e.style['min-width'] = "fit-content(calc(10% - 0.5em))" should set the property value

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 10 tests
6 Pass
4 Fail
8 Pass
2 Fail
Pass e.style['width'] = "auto" should set the property value
Pass e.style['width'] = "min-content" should set the property value
Pass e.style['width'] = "max-content" should set the property value
@ -11,6 +11,6 @@ Pass e.style['width'] = "0" should set the property value
Pass e.style['width'] = "10%" should set the property value
Pass e.style['width'] = "0.5em" should set the property value
Fail e.style['width'] = "calc(10% - 0.5em)" should set the property value
Fail e.style['width'] = "fit-content(10%)" should set the property value
Fail e.style['width'] = "fit-content(0.5em)" should set the property value
Pass e.style['width'] = "fit-content(10%)" should set the property value
Pass e.style['width'] = "fit-content(0.5em)" should set the property value
Fail e.style['width'] = "fit-content(calc(10% - 0.5em))" should set the property value