2022-08-24 12:21:15 +02:00
|
|
|
/*
|
|
|
|
* Copyright (c) 2022, Martin Falisse <mfalisse@outlook.com>
|
2025-06-18 15:47:41 +02:00
|
|
|
* Copyright (c) 2025, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
|
2022-08-24 12:21:15 +02:00
|
|
|
*
|
|
|
|
* SPDX-License-Identifier: BSD-2-Clause
|
|
|
|
*/
|
|
|
|
|
|
|
|
#include "GridTrackSize.h"
|
2023-01-06 19:02:26 +01:00
|
|
|
#include <AK/String.h>
|
2023-05-10 22:38:44 +03:00
|
|
|
#include <LibWeb/CSS/Size.h>
|
2022-08-24 12:21:15 +02:00
|
|
|
|
|
|
|
namespace Web::CSS {
|
|
|
|
|
2024-07-22 22:49:52 +02:00
|
|
|
GridSize::GridSize(Type type, LengthPercentage length_percentage)
|
|
|
|
: m_value(move(length_percentage))
|
|
|
|
{
|
|
|
|
VERIFY(type == Type::FitContent);
|
|
|
|
m_type = type;
|
|
|
|
}
|
|
|
|
|
2023-05-10 22:38:44 +03:00
|
|
|
GridSize::GridSize(LengthPercentage length_percentage)
|
|
|
|
: m_type(Type::LengthPercentage)
|
2023-09-28 16:16:25 +01:00
|
|
|
, m_value(move(length_percentage))
|
|
|
|
{
|
|
|
|
}
|
2022-08-24 12:21:15 +02:00
|
|
|
|
2023-09-28 15:23:04 +01:00
|
|
|
GridSize::GridSize(Flex flex_factor)
|
2022-08-24 12:21:15 +02:00
|
|
|
: m_type(Type::FlexibleLength)
|
2023-09-28 16:16:25 +01:00
|
|
|
, m_value(move(flex_factor))
|
2022-08-24 12:21:15 +02:00
|
|
|
{
|
|
|
|
}
|
|
|
|
|
2023-01-16 17:33:30 +01:00
|
|
|
GridSize::GridSize(Type type)
|
2023-09-28 16:16:25 +01:00
|
|
|
: m_value { Empty() }
|
2023-01-16 17:33:30 +01:00
|
|
|
{
|
|
|
|
VERIFY(type == Type::MinContent || type == Type::MaxContent);
|
|
|
|
m_type = type;
|
|
|
|
}
|
|
|
|
|
2022-10-30 13:27:57 +01:00
|
|
|
GridSize::~GridSize() = default;
|
|
|
|
|
2023-05-28 19:31:26 +03:00
|
|
|
bool GridSize::is_auto(Layout::AvailableSize const& available_size) const
|
|
|
|
{
|
|
|
|
if (m_type == Type::LengthPercentage) {
|
2023-09-28 16:16:25 +01:00
|
|
|
auto& length_percentage = m_value.get<LengthPercentage>();
|
|
|
|
if (length_percentage.contains_percentage())
|
2023-05-28 19:31:26 +03:00
|
|
|
return !available_size.is_definite();
|
2023-09-28 16:16:25 +01:00
|
|
|
return length_percentage.is_auto();
|
2023-05-28 19:31:26 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
bool GridSize::is_fixed(Layout::AvailableSize const& available_size) const
|
|
|
|
{
|
|
|
|
if (m_type == Type::LengthPercentage) {
|
2023-09-28 16:16:25 +01:00
|
|
|
auto& length_percentage = m_value.get<LengthPercentage>();
|
|
|
|
if (length_percentage.contains_percentage())
|
2023-05-28 19:31:26 +03:00
|
|
|
return available_size.is_definite();
|
2023-09-28 16:16:25 +01:00
|
|
|
return !length_percentage.is_auto();
|
2023-05-28 19:31:26 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
bool GridSize::is_intrinsic(Layout::AvailableSize const& available_size) const
|
|
|
|
{
|
2024-07-22 22:49:52 +02:00
|
|
|
return is_auto(available_size) || is_max_content() || is_min_content() || is_fit_content();
|
2023-05-28 19:31:26 +03:00
|
|
|
}
|
|
|
|
|
2022-10-30 13:27:57 +01:00
|
|
|
GridSize GridSize::make_auto()
|
2022-09-07 15:09:32 +02:00
|
|
|
{
|
2022-10-30 13:27:57 +01:00
|
|
|
return GridSize(CSS::Length::make_auto());
|
2022-09-07 15:09:32 +02:00
|
|
|
}
|
|
|
|
|
2023-05-10 22:38:44 +03:00
|
|
|
Size GridSize::css_size() const
|
|
|
|
{
|
2024-07-22 22:49:52 +02:00
|
|
|
VERIFY(m_type == Type::LengthPercentage || m_type == Type::FitContent);
|
2023-09-28 16:16:25 +01:00
|
|
|
auto& length_percentage = m_value.get<LengthPercentage>();
|
|
|
|
if (length_percentage.is_auto())
|
2023-05-10 22:38:44 +03:00
|
|
|
return CSS::Size::make_auto();
|
2023-09-28 16:16:25 +01:00
|
|
|
if (length_percentage.is_length())
|
|
|
|
return CSS::Size::make_length(length_percentage.length());
|
|
|
|
if (length_percentage.is_calculated())
|
|
|
|
return CSS::Size::make_calculated(length_percentage.calculated());
|
|
|
|
return CSS::Size::make_percentage(length_percentage.percentage());
|
2023-05-10 22:38:44 +03:00
|
|
|
}
|
|
|
|
|
2023-08-22 12:35:16 +01:00
|
|
|
String GridSize::to_string() const
|
2022-08-24 12:21:15 +02:00
|
|
|
{
|
|
|
|
switch (m_type) {
|
2023-05-10 22:38:44 +03:00
|
|
|
case Type::LengthPercentage:
|
2023-09-28 16:16:25 +01:00
|
|
|
return m_value.get<LengthPercentage>().to_string();
|
2025-06-18 15:47:41 +02:00
|
|
|
case Type::FitContent:
|
|
|
|
return MUST(String::formatted("fit-content({})", m_value.get<LengthPercentage>().to_string()));
|
2022-08-24 12:21:15 +02:00
|
|
|
case Type::FlexibleLength:
|
2023-09-28 16:16:25 +01:00
|
|
|
return m_value.get<Flex>().to_string();
|
2023-01-16 17:33:30 +01:00
|
|
|
case Type::MaxContent:
|
2023-02-25 16:40:37 +01:00
|
|
|
return "max-content"_string;
|
2023-01-16 17:33:30 +01:00
|
|
|
case Type::MinContent:
|
2023-02-25 16:40:37 +01:00
|
|
|
return "min-content"_string;
|
2022-08-24 12:21:15 +02:00
|
|
|
}
|
|
|
|
VERIFY_NOT_REACHED();
|
|
|
|
}
|
|
|
|
|
2022-10-30 13:27:57 +01:00
|
|
|
GridMinMax::GridMinMax(GridSize min_grid_size, GridSize max_grid_size)
|
|
|
|
: m_min_grid_size(min_grid_size)
|
|
|
|
, m_max_grid_size(max_grid_size)
|
|
|
|
{
|
|
|
|
}
|
|
|
|
|
2023-08-22 12:35:16 +01:00
|
|
|
String GridMinMax::to_string() const
|
2022-10-30 13:27:57 +01:00
|
|
|
{
|
|
|
|
StringBuilder builder;
|
|
|
|
builder.append("minmax("sv);
|
2023-08-22 12:35:16 +01:00
|
|
|
builder.appendff("{}", m_min_grid_size.to_string());
|
2022-10-30 13:27:57 +01:00
|
|
|
builder.append(", "sv);
|
2023-08-22 12:35:16 +01:00
|
|
|
builder.appendff("{}", m_max_grid_size.to_string());
|
2022-10-30 13:27:57 +01:00
|
|
|
builder.append(")"sv);
|
2023-08-22 12:35:16 +01:00
|
|
|
return MUST(builder.to_string());
|
2022-10-30 13:27:57 +01:00
|
|
|
}
|
|
|
|
|
2025-06-16 22:27:17 +02:00
|
|
|
GridRepeat::GridRepeat(GridTrackSizeList&& grid_track_size_list, GridRepeatParams const& params)
|
|
|
|
: m_type(params.type)
|
|
|
|
, m_grid_track_size_list(move(grid_track_size_list))
|
|
|
|
, m_repeat_count(params.count)
|
LibWeb: Add parent classes for managing GridTrackSizes
Add classes ExplicitTrackSizing and MetaGridTrackSize which will allow
for managing properties like auto-fill and minmax.
In the following CSS example there are 3 classes that will be used:
grid-template-column: repeat(auto-fill, minmax(50px, 1fr) 75px);
ExplicitTrackSizing - will contain the entire value. e.g.
repeat(auto-fill, minmax(50px, 1fr) 75px)
With a flag if it's a repeat, as well as references to the
MetaGridTrackSizes which is the next step down.
MetaGridTrackSize:
Contain the individual grid track sizes. Here there are two:
minmax(50px, 1fr) as well as 75px.
This way can keep track if it's a minmax function or not, and the
references to both GridTrackSizes in the case it is, or in just the one
if it is not.
GridTrackSize:
Is the most basic element, in this case there are three in total; two of
which are held by the first MetaGridTrackSize, and the third is held by
the second MetaGridTrackSize.
Examples: 50px, 1fr and 75px.
2022-10-09 19:34:27 +02:00
|
|
|
{
|
|
|
|
}
|
|
|
|
|
2023-08-22 12:35:16 +01:00
|
|
|
String GridRepeat::to_string() const
|
LibWeb: Add parent classes for managing GridTrackSizes
Add classes ExplicitTrackSizing and MetaGridTrackSize which will allow
for managing properties like auto-fill and minmax.
In the following CSS example there are 3 classes that will be used:
grid-template-column: repeat(auto-fill, minmax(50px, 1fr) 75px);
ExplicitTrackSizing - will contain the entire value. e.g.
repeat(auto-fill, minmax(50px, 1fr) 75px)
With a flag if it's a repeat, as well as references to the
MetaGridTrackSizes which is the next step down.
MetaGridTrackSize:
Contain the individual grid track sizes. Here there are two:
minmax(50px, 1fr) as well as 75px.
This way can keep track if it's a minmax function or not, and the
references to both GridTrackSizes in the case it is, or in just the one
if it is not.
GridTrackSize:
Is the most basic element, in this case there are three in total; two of
which are held by the first MetaGridTrackSize, and the third is held by
the second MetaGridTrackSize.
Examples: 50px, 1fr and 75px.
2022-10-09 19:34:27 +02:00
|
|
|
{
|
2022-10-30 13:27:57 +01:00
|
|
|
StringBuilder builder;
|
|
|
|
builder.append("repeat("sv);
|
|
|
|
switch (m_type) {
|
2025-06-16 22:27:17 +02:00
|
|
|
case GridRepeatType::AutoFit:
|
2025-06-17 17:15:00 +02:00
|
|
|
builder.append("auto-fit"sv);
|
2022-10-30 13:27:57 +01:00
|
|
|
break;
|
2025-06-16 22:27:17 +02:00
|
|
|
case GridRepeatType::AutoFill:
|
2025-06-17 17:15:00 +02:00
|
|
|
builder.append("auto-fill"sv);
|
2022-10-30 13:27:57 +01:00
|
|
|
break;
|
2025-06-16 22:27:17 +02:00
|
|
|
case GridRepeatType::Fixed:
|
2022-10-30 13:27:57 +01:00
|
|
|
builder.appendff("{}", m_repeat_count);
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
VERIFY_NOT_REACHED();
|
2022-10-15 13:04:24 +02:00
|
|
|
}
|
2022-10-30 13:27:57 +01:00
|
|
|
builder.append(", "sv);
|
2023-08-22 12:35:16 +01:00
|
|
|
builder.appendff("{}", m_grid_track_size_list.to_string());
|
2022-10-30 13:27:57 +01:00
|
|
|
builder.append(")"sv);
|
2023-08-22 12:35:16 +01:00
|
|
|
return MUST(builder.to_string());
|
LibWeb: Add parent classes for managing GridTrackSizes
Add classes ExplicitTrackSizing and MetaGridTrackSize which will allow
for managing properties like auto-fill and minmax.
In the following CSS example there are 3 classes that will be used:
grid-template-column: repeat(auto-fill, minmax(50px, 1fr) 75px);
ExplicitTrackSizing - will contain the entire value. e.g.
repeat(auto-fill, minmax(50px, 1fr) 75px)
With a flag if it's a repeat, as well as references to the
MetaGridTrackSizes which is the next step down.
MetaGridTrackSize:
Contain the individual grid track sizes. Here there are two:
minmax(50px, 1fr) as well as 75px.
This way can keep track if it's a minmax function or not, and the
references to both GridTrackSizes in the case it is, or in just the one
if it is not.
GridTrackSize:
Is the most basic element, in this case there are three in total; two of
which are held by the first MetaGridTrackSize, and the third is held by
the second MetaGridTrackSize.
Examples: 50px, 1fr and 75px.
2022-10-09 19:34:27 +02:00
|
|
|
}
|
|
|
|
|
2025-06-18 15:47:41 +02:00
|
|
|
ExplicitGridTrack::ExplicitGridTrack(Variant<GridRepeat, GridMinMax, GridSize>&& value)
|
2025-06-13 17:12:04 +02:00
|
|
|
: m_value(move(value))
|
2022-10-30 13:27:57 +01:00
|
|
|
{
|
|
|
|
}
|
|
|
|
|
2023-08-22 12:35:16 +01:00
|
|
|
String ExplicitGridTrack::to_string() const
|
LibWeb: Add parent classes for managing GridTrackSizes
Add classes ExplicitTrackSizing and MetaGridTrackSize which will allow
for managing properties like auto-fill and minmax.
In the following CSS example there are 3 classes that will be used:
grid-template-column: repeat(auto-fill, minmax(50px, 1fr) 75px);
ExplicitTrackSizing - will contain the entire value. e.g.
repeat(auto-fill, minmax(50px, 1fr) 75px)
With a flag if it's a repeat, as well as references to the
MetaGridTrackSizes which is the next step down.
MetaGridTrackSize:
Contain the individual grid track sizes. Here there are two:
minmax(50px, 1fr) as well as 75px.
This way can keep track if it's a minmax function or not, and the
references to both GridTrackSizes in the case it is, or in just the one
if it is not.
GridTrackSize:
Is the most basic element, in this case there are three in total; two of
which are held by the first MetaGridTrackSize, and the third is held by
the second MetaGridTrackSize.
Examples: 50px, 1fr and 75px.
2022-10-09 19:34:27 +02:00
|
|
|
{
|
2025-06-13 17:12:04 +02:00
|
|
|
return m_value.visit([](auto const& track) {
|
|
|
|
return track.to_string();
|
|
|
|
});
|
LibWeb: Add parent classes for managing GridTrackSizes
Add classes ExplicitTrackSizing and MetaGridTrackSize which will allow
for managing properties like auto-fill and minmax.
In the following CSS example there are 3 classes that will be used:
grid-template-column: repeat(auto-fill, minmax(50px, 1fr) 75px);
ExplicitTrackSizing - will contain the entire value. e.g.
repeat(auto-fill, minmax(50px, 1fr) 75px)
With a flag if it's a repeat, as well as references to the
MetaGridTrackSizes which is the next step down.
MetaGridTrackSize:
Contain the individual grid track sizes. Here there are two:
minmax(50px, 1fr) as well as 75px.
This way can keep track if it's a minmax function or not, and the
references to both GridTrackSizes in the case it is, or in just the one
if it is not.
GridTrackSize:
Is the most basic element, in this case there are three in total; two of
which are held by the first MetaGridTrackSize, and the third is held by
the second MetaGridTrackSize.
Examples: 50px, 1fr and 75px.
2022-10-09 19:34:27 +02:00
|
|
|
}
|
|
|
|
|
2024-01-05 04:24:36 +01:00
|
|
|
String GridLineNames::to_string() const
|
|
|
|
{
|
|
|
|
StringBuilder builder;
|
|
|
|
builder.append("["sv);
|
2025-06-25 17:58:07 +02:00
|
|
|
for (size_t i = 0; i < m_names.size(); ++i) {
|
|
|
|
if (i > 0)
|
|
|
|
builder.append(" "sv);
|
|
|
|
builder.append(m_names[i].name);
|
|
|
|
}
|
2024-01-05 04:24:36 +01:00
|
|
|
builder.append("]"sv);
|
|
|
|
return MUST(builder.to_string());
|
|
|
|
}
|
|
|
|
|
2023-06-07 13:04:06 +03:00
|
|
|
GridTrackSizeList GridTrackSizeList::make_none()
|
2022-10-30 13:27:57 +01:00
|
|
|
{
|
|
|
|
return GridTrackSizeList();
|
|
|
|
}
|
|
|
|
|
2023-08-22 12:35:16 +01:00
|
|
|
String GridTrackSizeList::to_string() const
|
LibWeb: Add parent classes for managing GridTrackSizes
Add classes ExplicitTrackSizing and MetaGridTrackSize which will allow
for managing properties like auto-fill and minmax.
In the following CSS example there are 3 classes that will be used:
grid-template-column: repeat(auto-fill, minmax(50px, 1fr) 75px);
ExplicitTrackSizing - will contain the entire value. e.g.
repeat(auto-fill, minmax(50px, 1fr) 75px)
With a flag if it's a repeat, as well as references to the
MetaGridTrackSizes which is the next step down.
MetaGridTrackSize:
Contain the individual grid track sizes. Here there are two:
minmax(50px, 1fr) as well as 75px.
This way can keep track if it's a minmax function or not, and the
references to both GridTrackSizes in the case it is, or in just the one
if it is not.
GridTrackSize:
Is the most basic element, in this case there are three in total; two of
which are held by the first MetaGridTrackSize, and the third is held by
the second MetaGridTrackSize.
Examples: 50px, 1fr and 75px.
2022-10-09 19:34:27 +02:00
|
|
|
{
|
2024-10-14 14:32:27 +01:00
|
|
|
if (m_list.is_empty())
|
2025-03-22 00:35:08 +00:00
|
|
|
return "none"_string;
|
2024-10-14 14:32:27 +01:00
|
|
|
|
LibWeb: Add parent classes for managing GridTrackSizes
Add classes ExplicitTrackSizing and MetaGridTrackSize which will allow
for managing properties like auto-fill and minmax.
In the following CSS example there are 3 classes that will be used:
grid-template-column: repeat(auto-fill, minmax(50px, 1fr) 75px);
ExplicitTrackSizing - will contain the entire value. e.g.
repeat(auto-fill, minmax(50px, 1fr) 75px)
With a flag if it's a repeat, as well as references to the
MetaGridTrackSizes which is the next step down.
MetaGridTrackSize:
Contain the individual grid track sizes. Here there are two:
minmax(50px, 1fr) as well as 75px.
This way can keep track if it's a minmax function or not, and the
references to both GridTrackSizes in the case it is, or in just the one
if it is not.
GridTrackSize:
Is the most basic element, in this case there are three in total; two of
which are held by the first MetaGridTrackSize, and the third is held by
the second MetaGridTrackSize.
Examples: 50px, 1fr and 75px.
2022-10-09 19:34:27 +02:00
|
|
|
StringBuilder builder;
|
2024-01-05 04:24:36 +01:00
|
|
|
for (auto const& line_definition_or_name : m_list) {
|
|
|
|
if (!builder.is_empty())
|
2022-10-30 13:45:40 +01:00
|
|
|
builder.append(" "sv);
|
2024-01-05 04:24:36 +01:00
|
|
|
if (line_definition_or_name.has<ExplicitGridTrack>()) {
|
|
|
|
builder.append(line_definition_or_name.get<ExplicitGridTrack>().to_string());
|
|
|
|
} else if (line_definition_or_name.has<GridLineNames>()) {
|
|
|
|
auto const& line_names = line_definition_or_name.get<GridLineNames>();
|
|
|
|
builder.append(line_names.to_string());
|
2022-10-30 13:45:40 +01:00
|
|
|
}
|
|
|
|
}
|
2023-08-22 12:35:16 +01:00
|
|
|
return MUST(builder.to_string());
|
LibWeb: Add parent classes for managing GridTrackSizes
Add classes ExplicitTrackSizing and MetaGridTrackSize which will allow
for managing properties like auto-fill and minmax.
In the following CSS example there are 3 classes that will be used:
grid-template-column: repeat(auto-fill, minmax(50px, 1fr) 75px);
ExplicitTrackSizing - will contain the entire value. e.g.
repeat(auto-fill, minmax(50px, 1fr) 75px)
With a flag if it's a repeat, as well as references to the
MetaGridTrackSizes which is the next step down.
MetaGridTrackSize:
Contain the individual grid track sizes. Here there are two:
minmax(50px, 1fr) as well as 75px.
This way can keep track if it's a minmax function or not, and the
references to both GridTrackSizes in the case it is, or in just the one
if it is not.
GridTrackSize:
Is the most basic element, in this case there are three in total; two of
which are held by the first MetaGridTrackSize, and the third is held by
the second MetaGridTrackSize.
Examples: 50px, 1fr and 75px.
2022-10-09 19:34:27 +02:00
|
|
|
}
|
|
|
|
|
2024-01-05 04:24:36 +01:00
|
|
|
Vector<ExplicitGridTrack> GridTrackSizeList::track_list() const
|
|
|
|
{
|
|
|
|
Vector<ExplicitGridTrack> track_list;
|
|
|
|
for (auto const& line_definition_or_name : m_list) {
|
|
|
|
if (line_definition_or_name.has<ExplicitGridTrack>())
|
|
|
|
track_list.append(line_definition_or_name.get<ExplicitGridTrack>());
|
|
|
|
}
|
|
|
|
return track_list;
|
|
|
|
}
|
|
|
|
|
2025-06-13 17:17:53 +02:00
|
|
|
bool GridTrackSizeList::operator==(GridTrackSizeList const& other) const = default;
|
2024-01-05 04:24:36 +01:00
|
|
|
|
2025-06-16 22:27:17 +02:00
|
|
|
void GridTrackSizeList::append(GridLineNames&& line_names)
|
|
|
|
{
|
2025-06-22 20:41:51 +02:00
|
|
|
if (!m_list.is_empty() && m_list.last().has<GridLineNames>()) {
|
|
|
|
auto& last_line_names = m_list.last().get<GridLineNames>();
|
2025-06-25 17:58:07 +02:00
|
|
|
for (auto const& name : line_names.names())
|
|
|
|
last_line_names.append(name.name);
|
2025-06-22 20:41:51 +02:00
|
|
|
return;
|
|
|
|
}
|
2025-06-16 22:27:17 +02:00
|
|
|
m_list.append(move(line_names));
|
|
|
|
}
|
|
|
|
|
|
|
|
void GridTrackSizeList::append(ExplicitGridTrack&& explicit_track)
|
|
|
|
{
|
|
|
|
m_list.append(move(explicit_track));
|
|
|
|
}
|
|
|
|
|
2022-08-24 12:21:15 +02:00
|
|
|
}
|