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
|
|
|
|
*/
|
|
|
|
|
|
|
|
#pragma once
|
|
|
|
|
2025-06-16 22:27:17 +02:00
|
|
|
#include <AK/FlyString.h>
|
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
|
|
|
#include <AK/Vector.h>
|
2023-05-10 22:38:44 +03:00
|
|
|
#include <LibWeb/CSS/PercentageOr.h>
|
2025-09-04 11:38:27 +01:00
|
|
|
#include <LibWeb/CSS/Size.h>
|
2023-05-28 19:31:26 +03:00
|
|
|
#include <LibWeb/Layout/AvailableSpace.h>
|
2022-08-24 12:21:15 +02:00
|
|
|
|
|
|
|
namespace Web::CSS {
|
|
|
|
|
2022-10-30 13:27:57 +01:00
|
|
|
class GridSize {
|
2022-08-24 12:21:15 +02:00
|
|
|
public:
|
2025-09-04 11:38:27 +01:00
|
|
|
GridSize(Size);
|
2023-09-28 15:23:04 +01:00
|
|
|
GridSize(Flex);
|
2022-10-30 13:27:57 +01:00
|
|
|
~GridSize();
|
2022-08-24 12:21:15 +02:00
|
|
|
|
2022-10-30 13:27:57 +01:00
|
|
|
static GridSize make_auto();
|
2022-09-07 15:09:32 +02:00
|
|
|
|
2023-05-28 19:31:26 +03:00
|
|
|
bool is_auto(Layout::AvailableSize const&) const;
|
|
|
|
bool is_fixed(Layout::AvailableSize const&) const;
|
2025-09-04 11:38:27 +01:00
|
|
|
bool is_flexible_length() const;
|
|
|
|
bool is_fit_content() const;
|
|
|
|
bool is_max_content() const;
|
|
|
|
bool is_min_content() const;
|
2022-08-24 12:21:15 +02:00
|
|
|
|
2025-09-04 11:38:27 +01:00
|
|
|
Size css_size() const { return m_value.get<Size>(); }
|
2023-09-28 16:16:25 +01:00
|
|
|
double flex_factor() const { return m_value.get<Flex>().to_fr(); }
|
2022-08-24 12:21:15 +02:00
|
|
|
|
2023-01-16 17:33:30 +01:00
|
|
|
// https://www.w3.org/TR/css-grid-2/#layout-algorithm
|
|
|
|
// An intrinsic sizing function (min-content, max-content, auto, fit-content()).
|
2023-05-28 19:31:26 +03:00
|
|
|
bool is_intrinsic(Layout::AvailableSize const&) const;
|
2022-09-07 15:12:38 +02:00
|
|
|
|
2025-09-04 11:38:27 +01:00
|
|
|
bool is_definite() const;
|
2023-05-10 22:38:44 +03:00
|
|
|
|
2025-08-03 15:37:42 +12:00
|
|
|
String to_string(SerializationMode) const;
|
2025-06-13 17:17:53 +02:00
|
|
|
bool operator==(GridSize const& other) const = default;
|
2022-08-24 12:21:15 +02:00
|
|
|
|
|
|
|
private:
|
2025-09-04 11:38:27 +01:00
|
|
|
Variant<Size, Flex> m_value;
|
2022-08-24 12:21:15 +02:00
|
|
|
};
|
|
|
|
|
2022-10-30 13:27:57 +01:00
|
|
|
class GridMinMax {
|
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
|
|
|
public:
|
2022-10-30 13:27:57 +01:00
|
|
|
GridMinMax(CSS::GridSize min_grid_size, CSS::GridSize max_grid_size);
|
2022-10-15 13:04:24 +02:00
|
|
|
|
2025-06-13 17:50:51 +02:00
|
|
|
GridSize const& min_grid_size() const& { return m_min_grid_size; }
|
|
|
|
GridSize const& max_grid_size() const& { return m_max_grid_size; }
|
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-08-03 15:37:42 +12:00
|
|
|
String to_string(SerializationMode) const;
|
2025-06-13 17:17:53 +02:00
|
|
|
bool operator==(GridMinMax const& other) const = default;
|
2022-10-30 13:27:57 +01:00
|
|
|
|
|
|
|
private:
|
|
|
|
GridSize m_min_grid_size;
|
|
|
|
GridSize m_max_grid_size;
|
|
|
|
};
|
|
|
|
|
2025-06-25 17:58:07 +02:00
|
|
|
struct GridLineName {
|
|
|
|
FlyString name;
|
|
|
|
bool implicit { false };
|
|
|
|
|
|
|
|
bool operator==(GridLineName const& other) const = default;
|
|
|
|
};
|
|
|
|
|
|
|
|
class GridLineNames {
|
|
|
|
public:
|
|
|
|
void append(FlyString const& name) { m_names.append({ name }); }
|
|
|
|
bool is_empty() const { return m_names.is_empty(); }
|
|
|
|
auto const& names() const& { return m_names; }
|
2024-01-05 04:24:36 +01:00
|
|
|
|
|
|
|
String to_string() const;
|
2025-06-25 17:58:07 +02:00
|
|
|
|
2025-06-13 17:17:53 +02:00
|
|
|
bool operator==(GridLineNames const& other) const = default;
|
2025-06-25 17:58:07 +02:00
|
|
|
|
|
|
|
private:
|
|
|
|
Vector<GridLineName> m_names;
|
2024-01-05 04:24:36 +01:00
|
|
|
};
|
|
|
|
|
2022-10-30 13:27:57 +01:00
|
|
|
class GridTrackSizeList {
|
|
|
|
public:
|
2023-06-07 13:04:06 +03:00
|
|
|
static GridTrackSizeList make_none();
|
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<CSS::ExplicitGridTrack> track_list() const;
|
2025-06-13 17:45:01 +02:00
|
|
|
auto const& list() const { return m_list; }
|
2022-10-30 13:45:40 +01:00
|
|
|
|
2025-08-03 15:37:42 +12:00
|
|
|
String to_string(SerializationMode) const;
|
2024-01-05 04:24:36 +01:00
|
|
|
bool operator==(GridTrackSizeList const& other) 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-16 22:27:17 +02:00
|
|
|
bool is_empty() const { return m_list.is_empty(); }
|
|
|
|
|
|
|
|
void append(GridLineNames&&);
|
|
|
|
void append(ExplicitGridTrack&&);
|
|
|
|
|
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
|
|
|
private:
|
2024-01-05 04:24:36 +01:00
|
|
|
Vector<Variant<ExplicitGridTrack, GridLineNames>> m_list;
|
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-16 22:27:17 +02:00
|
|
|
enum class GridRepeatType {
|
|
|
|
AutoFit,
|
|
|
|
AutoFill,
|
|
|
|
Fixed,
|
|
|
|
};
|
|
|
|
|
|
|
|
struct GridRepeatParams {
|
|
|
|
GridRepeatType type;
|
|
|
|
size_t count { 0 };
|
|
|
|
};
|
|
|
|
|
2022-10-30 13:27:57 +01:00
|
|
|
class GridRepeat {
|
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
|
|
|
public:
|
2025-09-23 15:02:51 +01:00
|
|
|
GridRepeat(GridRepeatType, GridTrackSizeList&&, size_t repeat_count);
|
2025-06-16 22:27:17 +02:00
|
|
|
GridRepeat(GridTrackSizeList&&, GridRepeatParams const&);
|
2022-10-30 13:27:57 +01:00
|
|
|
|
2025-06-16 22:27:17 +02:00
|
|
|
bool is_auto_fill() const { return m_type == GridRepeatType::AutoFill; }
|
|
|
|
bool is_auto_fit() const { return m_type == GridRepeatType::AutoFit; }
|
|
|
|
bool is_fixed() const { return m_type == GridRepeatType::Fixed; }
|
|
|
|
size_t repeat_count() const
|
2022-10-30 13:27:57 +01:00
|
|
|
{
|
2025-06-16 22:27:17 +02:00
|
|
|
VERIFY(is_fixed());
|
2022-10-30 13:27:57 +01:00
|
|
|
return m_repeat_count;
|
|
|
|
}
|
2025-06-13 17:46:32 +02:00
|
|
|
GridTrackSizeList const& grid_track_size_list() const& { return m_grid_track_size_list; }
|
2025-06-16 22:27:17 +02:00
|
|
|
GridRepeatType type() const& { return m_type; }
|
2022-10-15 13:02:45 +02:00
|
|
|
|
2025-08-03 15:37:42 +12:00
|
|
|
String to_string(SerializationMode) const;
|
2025-06-13 17:17:53 +02:00
|
|
|
bool operator==(GridRepeat const& other) const = default;
|
2022-10-15 13:02:45 +02:00
|
|
|
|
2022-10-30 13:27:57 +01:00
|
|
|
private:
|
2025-06-16 22:27:17 +02:00
|
|
|
GridRepeatType m_type;
|
2022-10-30 13:27:57 +01:00
|
|
|
GridTrackSizeList m_grid_track_size_list;
|
2025-06-16 22:27:17 +02:00
|
|
|
size_t m_repeat_count { 0 };
|
2022-10-30 13:27:57 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
class ExplicitGridTrack {
|
|
|
|
public:
|
2025-06-18 15:47:41 +02:00
|
|
|
ExplicitGridTrack(Variant<GridRepeat, GridMinMax, GridSize>&& value);
|
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
|
|
|
bool is_repeat() const { return m_value.has<GridRepeat>(); }
|
|
|
|
GridRepeat const& repeat() const { return m_value.get<GridRepeat>(); }
|
2022-10-30 13:27:57 +01:00
|
|
|
|
2025-06-13 17:12:04 +02:00
|
|
|
bool is_minmax() const { return m_value.has<GridMinMax>(); }
|
|
|
|
GridMinMax const& minmax() const { return m_value.get<GridMinMax>(); }
|
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
|
|
|
bool is_default() const { return m_value.has<GridSize>(); }
|
|
|
|
GridSize const& grid_size() const { return m_value.get<GridSize>(); }
|
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-08-03 15:37:42 +12:00
|
|
|
String to_string(SerializationMode) const;
|
2025-06-13 17:12:04 +02:00
|
|
|
bool operator==(ExplicitGridTrack const& other) const = default;
|
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
|
|
|
|
|
|
|
private:
|
2025-06-18 15:47:41 +02:00
|
|
|
Variant<GridRepeat, GridMinMax, GridSize> m_value;
|
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-08-24 12:21:15 +02:00
|
|
|
}
|