diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h index 33faac4c91..2a49a49464 100644 --- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h +++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h @@ -60,6 +60,8 @@ public: static CSS::Length height() { return CSS::Length::make_auto(); } static CSS::Length min_height() { return CSS::Length::make_auto(); } static CSS::Length max_height() { return CSS::Length::make_auto(); } + static Vector grid_template_columns() { return Vector {}; } + static Vector grid_template_rows() { return Vector {}; } }; struct BackgroundLayerData { @@ -170,6 +172,8 @@ public: CSS::LengthPercentage const& min_height() const { return m_noninherited.min_height; } CSS::LengthPercentage const& max_height() const { return m_noninherited.max_height; } Variant const& vertical_align() const { return m_noninherited.vertical_align; } + Vector const& grid_template_columns() const { return m_noninherited.grid_template_columns; } + Vector const& grid_template_rows() const { return m_noninherited.grid_template_rows; } CSS::LengthBox const& inset() const { return m_noninherited.inset; } const CSS::LengthBox& margin() const { return m_noninherited.margin; } @@ -284,6 +288,8 @@ protected: CSS::BoxSizing box_sizing { InitialValues::box_sizing() }; CSS::ContentData content; Variant vertical_align { InitialValues::vertical_align() }; + Vector grid_template_columns; + Vector grid_template_rows; } m_noninherited; }; @@ -354,6 +360,8 @@ public: void set_box_sizing(CSS::BoxSizing value) { m_noninherited.box_sizing = value; } void set_vertical_align(Variant value) { m_noninherited.vertical_align = value; } void set_visibility(CSS::Visibility value) { m_inherited.visibility = value; } + void set_grid_template_columns(Vector value) { m_noninherited.grid_template_columns = value; } + void set_grid_template_rows(Vector value) { m_noninherited.grid_template_rows = value; } void set_fill(Color value) { m_inherited.fill = value; } void set_stroke(Color value) { m_inherited.stroke = value; } diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp index da1ec16fc0..12f1ae4eb0 100644 --- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp +++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp @@ -5301,6 +5301,30 @@ RefPtr Parser::parse_as_css_value(PropertyID property_id) return parsed_value.release_value(); } +RefPtr Parser::parse_grid_track_sizes(Vector const& component_values) +{ + Vector params; + for (auto& component_value : component_values) { + // FIXME: Incomplete as a GridTrackSize can be a function like minmax(min, max), etc. + if (component_value.is_function()) + return {}; + if (component_value.is(Token::Type::Ident) && component_value.token().ident().equals_ignoring_case("auto"sv)) { + params.append(Length::make_auto()); + continue; + } + auto dimension = parse_dimension(component_value); + if (!dimension.has_value()) + return {}; + if (dimension->is_length()) + params.append(dimension->length()); + if (dimension->is_percentage()) + params.append(dimension->percentage()); + } + if (params.size() == 0) + return {}; + return GridTrackSizeStyleValue::create(params); +} + Parser::ParseErrorOr> Parser::parse_css_value(PropertyID property_id, TokenStream& tokens) { auto function_contains_var_or_attr = [](Function const& function, auto&& recurse) -> bool { @@ -5431,6 +5455,14 @@ Parser::ParseErrorOr> Parser::parse_css_value(Property if (auto parsed_value = parse_font_family_value(component_values)) return parsed_value.release_nonnull(); return ParseError::SyntaxError; + case PropertyID::GridTemplateColumns: + if (auto parsed_value = parse_grid_track_sizes(component_values)) + return parsed_value.release_nonnull(); + return ParseError::SyntaxError; + case PropertyID::GridTemplateRows: + if (auto parsed_value = parse_grid_track_sizes(component_values)) + return parsed_value.release_nonnull(); + return ParseError::SyntaxError; case PropertyID::ListStyle: if (auto parsed_value = parse_list_style_value(component_values)) return parsed_value.release_nonnull(); diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.h b/Userland/Libraries/LibWeb/CSS/Parser/Parser.h index 48258aef9b..521f69153c 100644 --- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.h +++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.h @@ -359,6 +359,7 @@ private: RefPtr parse_text_decoration_line_value(TokenStream&); RefPtr parse_transform_value(Vector const&); RefPtr parse_transform_origin_value(Vector const&); + RefPtr parse_grid_track_sizes(Vector const&); // calc() parsing, according to https://www.w3.org/TR/css-values-3/#calc-syntax OwnPtr parse_calc_sum(TokenStream&); diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index f327afd61b..4a63d5528b 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -694,6 +694,32 @@ "normal" ] }, + "grid-template-columns": { + "inherited": false, + "initial": "auto", + "max-values": 4, + "valid-identifiers": [ + "auto" + ], + "valid-types": [ + "length", + "percentage", + "string" + ] + }, + "grid-template-rows": { + "inherited": false, + "initial": "auto", + "max-values": 4, + "valid-identifiers": [ + "auto" + ], + "valid-types": [ + "length", + "percentage", + "string" + ] + }, "height": { "inherited": false, "initial": "auto", diff --git a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp index d55a58d5bf..f2127aaec9 100644 --- a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp +++ b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp @@ -295,6 +295,10 @@ RefPtr ResolvedCSSStyleDeclaration::style_value_for_property(Layout: return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().flex_wrap())); case CSS::PropertyID::Float: return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().float_())); + case CSS::PropertyID::GridTemplateColumns: + return GridTrackSizeStyleValue::create(layout_node.computed_values().grid_template_columns()); + case CSS::PropertyID::GridTemplateRows: + return GridTrackSizeStyleValue::create(layout_node.computed_values().grid_template_rows()); case CSS::PropertyID::Height: return style_value_for_length_percentage(layout_node.computed_values().height()); case CSS::PropertyID::ImageRendering: diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp index 9a0059aef9..2b53473f4b 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp @@ -655,4 +655,16 @@ Optional StyleProperties::font_variant() const return value_id_to_font_variant(value->to_identifier()); } +Vector StyleProperties::grid_template_columns() const +{ + auto value = property(CSS::PropertyID::GridTemplateColumns); + return value->as_grid_track_size().grid_track_size(); +} + +Vector StyleProperties::grid_template_rows() const +{ + auto value = property(CSS::PropertyID::GridTemplateRows); + return value->as_grid_track_size().grid_track_size(); +} + } diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h index ef47f6c9cf..4ddd366f02 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.h @@ -81,6 +81,8 @@ public: Optional pointer_events() const; Variant vertical_align() const; Optional font_variant() const; + Vector grid_template_columns() const; + Vector grid_template_rows() const; Vector transformations() const; CSS::TransformOrigin transform_origin() const; diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index 8fda903156..00a0413253 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -525,6 +525,8 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style) do_border_style(computed_values.border_bottom(), CSS::PropertyID::BorderBottomWidth, CSS::PropertyID::BorderBottomColor, CSS::PropertyID::BorderBottomStyle); computed_values.set_content(computed_style.content()); + computed_values.set_grid_template_columns(computed_style.grid_template_columns()); + computed_values.set_grid_template_rows(computed_style.grid_template_rows()); if (auto fill = computed_style.property(CSS::PropertyID::Fill); fill->has_color()) computed_values.set_fill(fill->to_color(*this));