Skip to content

GitLab

T
tangled
Commit 480dffee authored by Eric Willigers's avatar Eric Willigers Committed by Commit Bot
Browse files
Options

CSS: Avoid serializing [] in grid-template* specified values 

Any empty list of list items can be discarded when parsing
grid-template-rows, grid-template-columns, etc.

Discussed in
https://github.com/w3c/csswg-drafts/issues/4173

Change-Id: I859020aaa78b71d2540d9ec188335f22db3f278a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1810454Reviewed-by: default avatarOriol Brufau <obrufau@igalia.com>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#699101}
parent 6d6ea91d
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 16 deletions
third_party/blink/renderer/core/css/properties/css_parsing_utils.cc
View file @ 480dffee
...@@ -1723,7 +1723,7 @@ CSSCustomIdentValue* ConsumeCustomIdentForGridLine( ...@@ -1723,7 +1723,7 @@ CSSCustomIdentValue* ConsumeCustomIdentForGridLine(
} }
// Appends to the passed in CSSGridLineNamesValue if any, otherwise creates a // Appends to the passed in CSSGridLineNamesValue if any, otherwise creates a
// new one. // new one. Returns nullptr if an empty list is consumed.
CSSGridLineNamesValue* ConsumeGridLineNames( CSSGridLineNamesValue* ConsumeGridLineNames(
CSSParserTokenRange& range, CSSParserTokenRange& range,
const CSSParserContext& context, const CSSParserContext& context,
...@@ -1739,6 +1739,8 @@ CSSGridLineNamesValue* ConsumeGridLineNames( ...@@ -1739,6 +1739,8 @@ CSSGridLineNamesValue* ConsumeGridLineNames(
if (range_copy.ConsumeIncludingWhitespace().GetType() != kRightBracketToken) if (range_copy.ConsumeIncludingWhitespace().GetType() != kRightBracketToken)
return nullptr; return nullptr;
range = range_copy; range = range_copy;
if (line_names->length() == 0U)
return nullptr;
return line_names; return line_names;
} }
...@@ -1939,12 +1941,11 @@ CSSValue* ConsumeGridTrackList(CSSParserTokenRange& range, ...@@ -1939,12 +1941,11 @@ CSSValue* ConsumeGridTrackList(CSSParserTokenRange& range,
TrackListType track_list_type) { TrackListType track_list_type) {
bool allow_grid_line_names = track_list_type != TrackListType::kGridAuto; bool allow_grid_line_names = track_list_type != TrackListType::kGridAuto;
CSSValueList* values = CSSValueList::CreateSpaceSeparated(); CSSValueList* values = CSSValueList::CreateSpaceSeparated();
if (!allow_grid_line_names && range.Peek().GetType() == kLeftBracketToken)
return nullptr;
CSSGridLineNamesValue* line_names = ConsumeGridLineNames(range, context); CSSGridLineNamesValue* line_names = ConsumeGridLineNames(range, context);
if (line_names) { if (line_names)
if (!allow_grid_line_names)
return nullptr;
values->Append(*line_names); values->Append(*line_names);
}
bool allow_repeat = track_list_type == TrackListType::kGridTemplate; bool allow_repeat = track_list_type == TrackListType::kGridTemplate;
bool seen_auto_repeat = false; bool seen_auto_repeat = false;
...@@ -1970,12 +1971,11 @@ CSSValue* ConsumeGridTrackList(CSSParserTokenRange& range, ...@@ -1970,12 +1971,11 @@ CSSValue* ConsumeGridTrackList(CSSParserTokenRange& range,
} }
if (seen_auto_repeat && !all_tracks_are_fixed_sized) if (seen_auto_repeat && !all_tracks_are_fixed_sized)
return nullptr; return nullptr;
if (!allow_grid_line_names && range.Peek().GetType() == kLeftBracketToken)
return nullptr;
line_names = ConsumeGridLineNames(range, context); line_names = ConsumeGridLineNames(range, context);
if (line_names) { if (line_names)
if (!allow_grid_line_names)
return nullptr;
values->Append(*line_names); values->Append(*line_names);
}
} while (!range.AtEnd() && range.Peek().GetType() != kDelimiterToken); } while (!range.AtEnd() && range.Peek().GetType() != kDelimiterToken);
return values; return values;
} }
......
third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-area-shorthand.html 0 → 100644
View file @ 480dffee
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid-area sets longhands</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/shorthand-testcommon.js"></script>
</head>
<body>
<script>
test_shorthand_value('grid-area', 'auto', {
'grid-row-start': 'auto',
'grid-column-start': 'auto',
'grid-row-end': 'auto',
'grid-column-end': 'auto'
});
// <custom-ident>
test_shorthand_value('grid-area', '--a', {
'grid-row-start': '--a',
'grid-column-start': '--a',
'grid-row-end': '--a',
'grid-column-end': '--a'
});
test_shorthand_value('grid-area', 'a / b', {
'grid-row-start': 'a',
'grid-column-start': 'b',
'grid-row-end': 'a',
'grid-column-end': 'b'
});
test_shorthand_value('grid-area', 'a / b / c', {
'grid-row-start': 'a',
'grid-column-start': 'b',
'grid-row-end': 'c',
'grid-column-end': 'b'
});
test_shorthand_value('grid-area', 'a / b / c / d', {
'grid-row-start': 'a',
'grid-column-start': 'b',
'grid-row-end': 'c',
'grid-column-end': 'd'
});
// <integer> && <custom-ident>?
// span && [ <integer> || <custom-ident> ]
test_shorthand_value('grid-area', '+90 -a- / 2 i span', {
'grid-row-start': '90 -a-',
'grid-column-start': 'span 2 i',
'grid-row-end': 'auto',
'grid-column-end': 'auto'
});
test_shorthand_value('grid-area', '1 / 2 / 3 / 4', {
'grid-row-start': '1',
'grid-column-start': '2',
'grid-row-end': '3',
'grid-column-end': '4'
});
test_shorthand_value('grid-row', 'auto', {
'grid-row-start': 'auto',
'grid-row-end': 'auto'
});
test_shorthand_value('grid-row', 'one / 2', {
'grid-row-start': 'one',
'grid-row-end': '2'
});
test_shorthand_value('grid-row', '1 two / four 3', {
'grid-row-start': '1 two',
'grid-row-end': '3 four'
});
test_shorthand_value('grid-column', '5 span', {
'grid-column-start': 'span 5',
'grid-column-end': 'auto'
});
test_shorthand_value('grid-column', '1 / two', {
'grid-column-start': '1',
'grid-column-end': 'two'
});
test_shorthand_value('grid-column', 'span 1 two / four 3 span', {
'grid-column-start': 'span 1 two',
'grid-column-end': 'span 3 four'
});
</script>
</body>
</html>
third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-auto-columns-invalid.html
View file @ 480dffee
...@@ -32,7 +32,8 @@ test_invalid_value("grid-auto-columns", "fit-content(1px auto)"); ...@@ -32,7 +32,8 @@ test_invalid_value("grid-auto-columns", "fit-content(1px auto)");
// <track-size>+ // <track-size>+
test_invalid_value("grid-auto-columns", "2em / 3em"); test_invalid_value("grid-auto-columns", "2em / 3em");
test_invalid_value("grid-auto-columns", "auto, 10%"); test_invalid_value("grid-auto-columns", "auto, 10%");
test_invalid_value("grid-auto-rows", "1px [a] 1px"); test_invalid_value("grid-auto-columns", "1px [a] 1px");
test_invalid_value("grid-auto-columns", "[] 1px []");
</script> </script>
</body> </body>
</html> </html>
third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-auto-rows-invalid.html
View file @ 480dffee
...@@ -32,6 +32,7 @@ test_invalid_value("grid-auto-rows", "fit-content(1px auto)"); ...@@ -32,6 +32,7 @@ test_invalid_value("grid-auto-rows", "fit-content(1px auto)");
test_invalid_value("grid-auto-rows", "2em / 3em"); test_invalid_value("grid-auto-rows", "2em / 3em");
test_invalid_value("grid-auto-rows", "auto, 10%"); test_invalid_value("grid-auto-rows", "auto, 10%");
test_invalid_value("grid-auto-rows", "1px [a] 1px"); test_invalid_value("grid-auto-rows", "1px [a] 1px");
test_invalid_value("grid-auto-rows", "[] 1px []");
</script> </script>
</body> </body>
</html> </html>
third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-template-columns-valid.html
View file @ 480dffee
...@@ -47,7 +47,7 @@ test_valid_value("grid-template-columns", 'fit-content(calc(30% + 40vw))'); ...@@ -47,7 +47,7 @@ test_valid_value("grid-template-columns", 'fit-content(calc(30% + 40vw))');
// 'repeat(1, 10px)' in Firefox // 'repeat(1, 10px)' in Firefox
// '[] 10px' in Safari // '[] 10px' in Safari
// '10px' in Edge 18 // '10px' in Edge 18
test_valid_value("grid-template-columns", 'repeat(1, [] 10px)', ['repeat(1, 10px)', 'repeat(1, [] 10px)']); test_valid_value("grid-template-columns", 'repeat(1, [] 10px [])', 'repeat(1, 10px)');
// 'repeat(1, [one two] 20%)' in Blink, Firefox // 'repeat(1, [one two] 20%)' in Blink, Firefox
// '[one two] 20%' in Safari, Edge 18 // '[one two] 20%' in Safari, Edge 18
...@@ -61,6 +61,7 @@ test_valid_value("grid-template-columns", 'repeat(2, fit-content(20%) [three fou ...@@ -61,6 +61,7 @@ test_valid_value("grid-template-columns", 'repeat(2, fit-content(20%) [three fou
// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>? // <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
test_valid_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))'); test_valid_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))');
test_valid_value("grid-template-columns", '[] 150px [] 1fr []', '150px 1fr');
// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) // <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
test_valid_value("grid-template-columns", 'repeat(auto-fill, 10px)'); test_valid_value("grid-template-columns", 'repeat(auto-fill, 10px)');
......
third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-template-rows-valid.html
View file @ 480dffee
...@@ -43,11 +43,7 @@ test_valid_value("grid-template-rows", 'fit-content(calc(30% + 40vw))'); ...@@ -43,11 +43,7 @@ test_valid_value("grid-template-rows", 'fit-content(calc(30% + 40vw))');
// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ) // <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
// 'repeat(1, [] 10px)' in Blink test_valid_value("grid-template-rows", 'repeat(1, [] 10px [])', 'repeat(1, 10px)');
// 'repeat(1, 10px)' in Firefox
// '[] 10px' in Safari
// '10px' in Edge 18
test_valid_value("grid-template-rows", 'repeat(1, [] 10px)', ['repeat(1, 10px)', 'repeat(1, [] 10px)']);
// 'repeat(1, [one two] 20%)' in Blink, Firefox // 'repeat(1, [one two] 20%)' in Blink, Firefox
// '[one two] 20%' in Safari, Edge 18 // '[one two] 20%' in Safari, Edge 18
...@@ -61,6 +57,7 @@ test_valid_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four] ...@@ -61,6 +57,7 @@ test_valid_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four]
// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>? // <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
test_valid_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))'); test_valid_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))');
test_valid_value("grid-template-rows", '[] 150px [] 1fr []', '150px 1fr');
// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) // <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
test_valid_value("grid-template-rows", 'repeat(auto-fill, 10px)'); test_valid_value("grid-template-rows", 'repeat(auto-fill, 10px)');
......
third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-template-shorthand.html 0 → 100644
View file @ 480dffee
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid-template sets longhands</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template">
<meta name="assert" content="grid-template supports the full grammar 'none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/shorthand-testcommon.js"></script>
</head>
<body>
<script>
test_shorthand_value('grid-template', 'none', {
'grid-template-rows': 'none',
'grid-template-columns': 'none',
'grid-template-areas': 'none'
});
// <grid-template-rows> / <grid-template-columns>
test_shorthand_value('grid-template', '10px / 20%', {
'grid-template-rows': '10px',
'grid-template-columns': '20%',
'grid-template-areas': 'none'
});
test_shorthand_value('grid-template', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', {
'grid-template-rows': 'fit-content(calc(-0.5em + 10px))',
'grid-template-columns': 'fit-content(calc(0.5em + 10px))',
'grid-template-areas': 'none'
});
// [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
test_shorthand_value('grid-template',
'[header-top] "a a a" [header-bottom]' +
' [main-top] "b b b" 1fr [main-bottom]' +
' / auto 1fr auto', {
'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]',
'grid-template-columns': 'auto 1fr auto',
'grid-template-areas': '"a a a" "b b b"'
});
test_shorthand_value('grid-template',
' "a a a"' +
' "b b b" 1fr' +
'/ auto 1fr auto', {
'grid-template-rows': 'auto 1fr',
'grid-template-columns': 'auto 1fr auto',
'grid-template-areas': '"a a a" "b b b"'
});
test_shorthand_value('grid-template',
' [] "a a a" []' +
' [] "b b b" 1fr []' +
' / [] auto 1fr [] auto []', {
'grid-template-rows': 'auto 1fr',
'grid-template-columns': 'auto 1fr auto',
'grid-template-areas': '"a a a" "b b b"'
});
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment