RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:27:43 +00:00
Code Issues Activity Actions

LibWeb: Support CSS functions other than calc() for grid sizes

Browse source 
Makes grid size parser to handle not only calc() but min(), max() and
other CSS functions we support.
This commit is contained in:
Aliaksandr Kalenik 2023-06-21 03:07:28 +03:00 • committed by Andreas Kling
parent afe53a4856
commit a8211abc1e
3 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

24
Tests/LibWeb/Layout/expected/grid/minmax-with-max-function-inside.txt Normal file
View file

@ -0,0 +1,24 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x34.9375 children: not-inline
Box <div.grid> at (8,8) content-size 784x34.9375 [GFC] children: not-inline
BlockContainer <div> at (8,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 9.34375x17.46875]
"a"
TextNode <#text>
BlockContainer <div> at (269.333333,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,8 9.46875x17.46875]
"b"
TextNode <#text>
BlockContainer <div> at (530.666666,8) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 8.890625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [530.666666,8 8.890625x17.46875]
"c"
TextNode <#text>
BlockContainer <div> at (8,25.46875) content-size 261.333333x17.46875 [BFC] children: inline
line 0 width: 7.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 7.859375x17.46875]
"d"
TextNode <#text>

6
Tests/LibWeb/Layout/input/grid/minmax-with-max-function-inside.html Normal file
View file

@ -0,0 +1,6 @@
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(100px, 200px), 1fr));
}
</style><div class="grid"><div>a</div><div>b</div><div>c</div><div>d</div></div>

12
Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
View file

@ -7339,15 +7339,9 @@ ErrorOr<RefPtr<StyleValue>> Parser::parse_as_css_value(PropertyID property_id)
Optional<CSS::GridSize> Parser::parse_grid_size(ComponentValue const& component_value) Optional<CSS::GridSize> Parser::parse_grid_size(ComponentValue const& component_value)
{ {
if (component_value.is_function()) { if (component_value.is_function()) {
auto const& function = component_value.function(); if (auto maybe_dynamic = parse_dynamic_value(component_value); !maybe_dynamic.is_error() && maybe_dynamic.value())
if (function.name().equals_ignoring_ascii_case("calc"sv)) { return GridSize(LengthPercentage(maybe_dynamic.release_value()->as_calculated()));
auto calculated_style_value = parse_calculated_value(function.values());
if (calculated_style_value.is_error() || calculated_style_value.value().is_null()) {
// FIXME: Propagate error
return {};
}
return GridSize(LengthPercentage { *calculated_style_value.release_value() });
}
return {}; return {};
} }
auto token = component_value.token(); auto token = component_value.token();