LibWeb/CSS: Make empty GridTrackSize value serialize to "none"

This is the default value of the `grid-template-rows` and
`grid-template-columns` properties.
This commit is contained in:
Tim Ledbetter 2025-03-22 00:35:08 +00:00
parent c49dd2036b
commit 84c65b1d71
13 changed files with 101 additions and 46 deletions

View file

@ -245,7 +245,7 @@ GridTrackSizeList GridTrackSizeList::make_none()
String GridTrackSizeList::to_string() const
{
if (m_list.is_empty())
return "auto"_string;
return "none"_string;
StringBuilder builder;
for (auto const& line_definition_or_name : m_list) {

View file

@ -396,10 +396,10 @@ All supported properties and their default values exposed from CSSStylePropertie
'grid-template': ''
'gridTemplateAreas': 'none'
'grid-template-areas': 'none'
'gridTemplateColumns': 'auto'
'grid-template-columns': 'auto'
'gridTemplateRows': 'auto'
'grid-template-rows': 'auto'
'gridTemplateColumns': 'none'
'grid-template-columns': 'none'
'gridTemplateRows': 'none'
'grid-template-rows': 'none'
'height': '0px'
'imageRendering': 'auto'
'image-rendering': 'auto'

View file

@ -76,14 +76,14 @@ font-weight: 'calc(2)' -> '2'
font-weight: 'calc(2 * var(--n))' -> '4'
font-width: 'calc(2%)' -> '2%'
font-width: 'calc(2% * var(--n))' -> '4%'
grid-auto-columns: 'calc(2fr)' -> 'auto'
grid-auto-columns: 'calc(2fr * var(--n))' -> 'auto'
grid-auto-rows: 'calc(2fr)' -> 'auto'
grid-auto-rows: 'calc(2fr * var(--n))' -> 'auto'
grid-template-columns: 'calc(2fr)' -> 'auto'
grid-template-columns: 'calc(2fr * var(--n))' -> 'auto'
grid-template-rows: 'calc(2fr)' -> 'auto'
grid-template-rows: 'calc(2fr * var(--n))' -> 'auto'
grid-auto-columns: 'calc(2fr)' -> 'none'
grid-auto-columns: 'calc(2fr * var(--n))' -> 'none'
grid-auto-rows: 'calc(2fr)' -> 'none'
grid-auto-rows: 'calc(2fr * var(--n))' -> 'none'
grid-template-columns: 'calc(2fr)' -> 'none'
grid-template-columns: 'calc(2fr * var(--n))' -> 'none'
grid-template-rows: 'calc(2fr)' -> 'none'
grid-template-rows: 'calc(2fr * var(--n))' -> 'none'
height: 'calc(2px)' -> '2px'
height: 'calc(2px * var(--n))' -> '4px'
left: 'calc(2px)' -> '2px'

View file

@ -146,8 +146,8 @@ grid-column-start: auto
grid-row-end: auto
grid-row-start: auto
grid-template-areas: none
grid-template-columns: auto
grid-template-rows: auto
grid-template-columns: none
grid-template-rows: none
height: 2100px
inline-size: 784px
inset-block-end: auto

View file

@ -0,0 +1,25 @@
Harness status: OK
Found 20 tests
20 Pass
Pass Property grid-auto-columns has initial value auto
Pass Property grid-auto-columns does not inherit
Pass Property grid-auto-flow has initial value row
Pass Property grid-auto-flow does not inherit
Pass Property grid-auto-rows has initial value auto
Pass Property grid-auto-rows does not inherit
Pass Property grid-column-end has initial value auto
Pass Property grid-column-end does not inherit
Pass Property grid-column-start has initial value auto
Pass Property grid-column-start does not inherit
Pass Property grid-row-end has initial value auto
Pass Property grid-row-end does not inherit
Pass Property grid-row-start has initial value auto
Pass Property grid-row-start does not inherit
Pass Property grid-template-areas has initial value none
Pass Property grid-template-areas does not inherit
Pass Property grid-template-columns has initial value none
Pass Property grid-template-columns does not inherit
Pass Property grid-template-rows has initial value none
Pass Property grid-template-rows does not inherit

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 40 tests
24 Pass
16 Fail
32 Pass
8 Fail
Pass Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFixedElement' : grid-template-columns = '7px 11px', grid-template-rows = '17px 2px'
Pass Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentElement' : grid-template-columns = '400px 800px', grid-template-rows = '150px 450px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentWithoutSize' : grid-template-columns = '3.5px 7px', grid-template-rows = '4px 12px'
@ -31,16 +31,16 @@ Pass Test getting and setting grid-template-rows and grid-template-columns throu
Pass Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '25px 20px', element.style.gridTemplateColumns = 'calc(25px) calc(2em)', grid-template-rows = '0px 60px', element.style.gridTemplateRows = 'auto calc(10%)'
Pass Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '345px 92px', element.style.gridTemplateColumns = 'calc(25px + 40%) minmax(min-content, calc(10% + 12px))', grid-template-rows = '100px 0px', element.style.gridTemplateRows = 'minmax(calc(75% - 350px), max-content) auto'
Fail Test setting wrong/invalid values through CSS
Fail Test setting bad JS values: grid-template-columns = 'none auto', grid-template-rows = 'none auto'
Fail Test setting bad JS values: grid-template-columns = 'none 16em', grid-template-rows = 'none 56%'
Fail Test setting bad JS values: grid-template-columns = 'none none', grid-template-rows = 'none none'
Fail Test setting bad JS values: grid-template-columns = 'auto none', grid-template-rows = 'auto none'
Fail Test setting bad JS values: grid-template-columns = 'auto none 16em', grid-template-rows = 'auto 18em none'
Fail Test setting bad JS values: grid-template-columns = '-webkit-fit-content -webkit-fit-content', grid-template-rows = '-webkit-fit-available -webkit-fit-available'
Pass Test setting bad JS values: grid-template-columns = 'none auto', grid-template-rows = 'none auto'
Pass Test setting bad JS values: grid-template-columns = 'none 16em', grid-template-rows = 'none 56%'
Pass Test setting bad JS values: grid-template-columns = 'none none', grid-template-rows = 'none none'
Pass Test setting bad JS values: grid-template-columns = 'auto none', grid-template-rows = 'auto none'
Pass Test setting bad JS values: grid-template-columns = 'auto none 16em', grid-template-rows = 'auto 18em none'
Pass Test setting bad JS values: grid-template-columns = '-webkit-fit-content -webkit-fit-content', grid-template-rows = '-webkit-fit-available -webkit-fit-available'
Fail Test setting bad JS values: grid-template-columns = '-10px minmax(16px, 32px)', grid-template-rows = 'minmax(10%, 15%) -10vw'
Fail Test setting bad JS values: grid-template-columns = '10px minmax(16px, -1vw)', grid-template-rows = 'minmax(-1%, 15%) 10vw'
Fail Test setting bad JS values: grid-template-columns = '10px calc(16px 30px)', grid-template-rows = 'calc(25px + auto) 2em'
Fail Test setting bad JS values: grid-template-columns = 'minmax(min-content, calc() 250px', grid-template-rows = 'calc(2em('
Pass Test setting bad JS values: grid-template-columns = 'minmax(min-content, calc() 250px', grid-template-rows = 'calc(2em('
Fail Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
Fail Test the default value
Pass Test the default value
Fail Test setting grid-template-columns and grid-template-rows to 'initial' through JS

View file

@ -2,14 +2,14 @@ Harness status: OK
Found 63 tests
21 Pass
42 Fail
24 Pass
39 Fail
Fail e.style['grid'] = "none" should set grid-auto-columns
Fail e.style['grid'] = "none" should set grid-auto-flow
Fail e.style['grid'] = "none" should set grid-auto-rows
Pass e.style['grid'] = "none" should set grid-template-areas
Fail e.style['grid'] = "none" should set grid-template-columns
Fail e.style['grid'] = "none" should set grid-template-rows
Pass e.style['grid'] = "none" should set grid-template-columns
Pass e.style['grid'] = "none" should set grid-template-rows
Pass e.style['grid'] = "none" should not set unrelated longhands
Fail e.style['grid'] = "10px / 20%" should set grid-auto-columns
Fail e.style['grid'] = "10px / 20%" should set grid-auto-flow
@ -23,7 +23,7 @@ Fail e.style['grid'] = "none / 10px" should set grid-auto-flow
Fail e.style['grid'] = "none / 10px" should set grid-auto-rows
Pass e.style['grid'] = "none / 10px" should set grid-template-areas
Pass e.style['grid'] = "none / 10px" should set grid-template-columns
Fail e.style['grid'] = "none / 10px" should set grid-template-rows
Pass e.style['grid'] = "none / 10px" should set grid-template-rows
Pass e.style['grid'] = "none / 10px" should not set unrelated longhands
Fail e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-columns
Fail e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-flow

View file

@ -2,9 +2,9 @@ Harness status: OK
Found 32 tests
12 Pass
20 Fail
Fail Property grid-template-columns value 'none'
13 Pass
19 Fail
Pass Property grid-template-columns value 'none'
Pass Property grid-template-columns value '1px'
Pass Property grid-template-columns value '1px [a]'
Pass Property grid-template-columns value '1px [a] 2px'

View file

@ -2,9 +2,9 @@ Harness status: OK
Found 34 tests
26 Pass
8 Fail
Fail e.style['grid-template-columns'] = "none" should set the property value
27 Pass
7 Fail
Pass e.style['grid-template-columns'] = "none" should set the property value
Pass e.style['grid-template-columns'] = "10px" should set the property value
Pass e.style['grid-template-columns'] = "20%" should set the property value
Pass e.style['grid-template-columns'] = "calc(-0.5em + 10px)" should set the property value

View file

@ -2,9 +2,9 @@ Harness status: OK
Found 24 tests
10 Pass
14 Fail
Fail Property grid-template-rows value 'none'
11 Pass
13 Fail
Pass Property grid-template-rows value 'none'
Pass Property grid-template-rows value '1px'
Pass Property grid-template-rows value '1px [a]'
Pass Property grid-template-rows value '1px [a] 2px'

View file

@ -2,9 +2,9 @@ Harness status: OK
Found 34 tests
26 Pass
8 Fail
Fail e.style['grid-template-rows'] = "none" should set the property value
27 Pass
7 Fail
Pass e.style['grid-template-rows'] = "none" should set the property value
Pass e.style['grid-template-rows'] = "10px" should set the property value
Pass e.style['grid-template-rows'] = "20%" should set the property value
Pass e.style['grid-template-rows'] = "calc(-0.5em + 10px)" should set the property value

View file

@ -2,11 +2,11 @@ Harness status: OK
Found 24 tests
18 Pass
6 Fail
20 Pass
4 Fail
Pass e.style['grid-template'] = "none" should set grid-template-areas
Fail e.style['grid-template'] = "none" should set grid-template-columns
Fail e.style['grid-template'] = "none" should set grid-template-rows
Pass e.style['grid-template'] = "none" should set grid-template-columns
Pass e.style['grid-template'] = "none" should set grid-template-rows
Pass e.style['grid-template'] = "none" should not set unrelated longhands
Pass e.style['grid-template'] = "10px / 20%" should set grid-template-areas
Pass e.style['grid-template'] = "10px / 20%" should set grid-template-columns

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Grid Layout properties</title>
<link rel="help" href="https://drafts.csswg.org/css-grid/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('grid-auto-columns', 'auto', '10px');
assert_not_inherited('grid-auto-flow', 'row', 'column dense');
assert_not_inherited('grid-auto-rows', 'auto', '10px');
assert_not_inherited('grid-column-end', 'auto', 'span 2');
assert_not_inherited('grid-column-start', 'auto', 'span 2');
assert_not_inherited('grid-row-end', 'auto', 'span 2');
assert_not_inherited('grid-row-start', 'auto', 'span 2');
assert_not_inherited('grid-template-areas', 'none', '"one two" "three four"');
assert_not_inherited('grid-template-columns', 'none', '10px');
assert_not_inherited('grid-template-rows', 'none', '10px');
</script>
</body>
</html>