Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2026-06-28 04:00:33 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Libraries/LibWeb/CSS/ContainerQuery.cpp

129 lines
4.5 KiB
C++
Raw Normal View History

LibWeb/CSS: Implement CSSContainerRule No parsing yet, just CSSContainerRule and the supporting ContainerQuery class. CSSContainerRule is unusual in how it matches, because instead of it either matching or not matching globally, it instead is matched against a specific element. But also, some at-rules inside it always apply, as if they were written outside it. This doesn't fit well with how CSSConditionRule is implemented, and will likely require some rework later. For now, `condition_matches()` always returns false, and `for_each_effective_rule()` is overridden to always process those global at-rules and nothing else.
2026-03-27 14:14:00 +00:00
/*
* Copyright (c) 2026, Sam Atkins <sam@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "ContainerQuery.h"
#include <AK/NonnullRefPtr.h>
#include <LibWeb/CSS/BooleanExpression.h>
LibWeb: Implement ContainerQuery evaluation ContainerQuery now stores its feature requirements. When evaluated, it uses these and the passed-in container name to identify a container element to match against, then evaluates its condition against that element. None of this is yet in use anywhere, but will be soon.
2026-05-08 14:56:28 +01:00
#include <LibWeb/CSS/ComputedProperties.h>
#include <LibWeb/DOM/AbstractElement.h>
#include <LibWeb/DOM/Element.h>
LibWeb/CSS: Implement CSSContainerRule No parsing yet, just CSSContainerRule and the supporting ContainerQuery class. CSSContainerRule is unusual in how it matches, because instead of it either matching or not matching globally, it instead is matched against a specific element. But also, some at-rules inside it always apply, as if they were written outside it. This doesn't fit well with how CSSConditionRule is implemented, and will likely require some rework later. For now, `condition_matches()` always returns false, and `for_each_effective_rule()` is overridden to always process those global at-rules and nothing else.
2026-03-27 14:14:00 +00:00
#include <LibWeb/Dump.h>
namespace Web::CSS {
LibWeb/CSS: Track container size requirements per axis Replace `ContainerQueryFeatureRequirements::requires_size_container` with separate width and height flags. Depending on the writing mode, a request for the width or height of a container might need it to be a size container, or only an inline-size container. Anything that needs both sizes (such as the aspect ratio) can simply flag both as required.
2026-05-13 13:58:16 +01:00
static bool inline_axis_is_horizontal(WritingMode writing_mode)
{
return writing_mode == WritingMode::HorizontalTb;
}
LibWeb/CSS: Implement CSSContainerRule No parsing yet, just CSSContainerRule and the supporting ContainerQuery class. CSSContainerRule is unusual in how it matches, because instead of it either matching or not matching globally, it instead is matched against a specific element. But also, some at-rules inside it always apply, as if they were written outside it. This doesn't fit well with how CSSConditionRule is implemented, and will likely require some rework later. For now, `condition_matches()` always returns false, and `for_each_effective_rule()` is overridden to always process those global at-rules and nothing else.
2026-03-27 14:14:00 +00:00
NonnullRefPtr<ContainerQuery> ContainerQuery::create(NonnullOwnPtr<BooleanExpression>&& condition)
{
return adopt_ref(*new ContainerQuery(move(condition)));
}
ContainerQuery::ContainerQuery(NonnullOwnPtr<BooleanExpression>&& condition)
: m_condition(move(condition))
LibWeb: Give BooleanExpression an evaluation context Different users of BooleanExpression have different requirements for evaluation: - `@media` needs a Document - `@supports` doesn't need anything - `@container` needs a container Element To support these without expanding the API, replace the Document* parameter with a BooleanExpressionEvaluationContext type which contains these different values. No behaviour changes.
2026-05-08 14:50:13 +01:00
, m_matches(m_condition->evaluate_to_boolean({}))
LibWeb/CSS: Implement CSSContainerRule No parsing yet, just CSSContainerRule and the supporting ContainerQuery class. CSSContainerRule is unusual in how it matches, because instead of it either matching or not matching globally, it instead is matched against a specific element. But also, some at-rules inside it always apply, as if they were written outside it. This doesn't fit well with how CSSConditionRule is implemented, and will likely require some rework later. For now, `condition_matches()` always returns false, and `for_each_effective_rule()` is overridden to always process those global at-rules and nothing else.
2026-03-27 14:14:00 +00:00
{
LibWeb: Implement ContainerQuery evaluation ContainerQuery now stores its feature requirements. When evaluated, it uses these and the passed-in container name to identify a container element to match against, then evaluates its condition against that element. None of this is yet in use anywhere, but will be soon.
2026-05-08 14:56:28 +01:00
m_condition->collect_container_query_feature_requirements(m_feature_requirements);
LibWeb/CSS: Implement CSSContainerRule No parsing yet, just CSSContainerRule and the supporting ContainerQuery class. CSSContainerRule is unusual in how it matches, because instead of it either matching or not matching globally, it instead is matched against a specific element. But also, some at-rules inside it always apply, as if they were written outside it. This doesn't fit well with how CSSConditionRule is implemented, and will likely require some rework later. For now, `condition_matches()` always returns false, and `for_each_effective_rule()` is overridden to always process those global at-rules and nothing else.
2026-03-27 14:14:00 +00:00
}
LibWeb: Implement ContainerQuery evaluation ContainerQuery now stores its feature requirements. When evaluated, it uses these and the passed-in container name to identify a container element to match against, then evaluates its condition against that element. None of this is yet in use anywhere, but will be soon.
2026-05-08 14:56:28 +01:00
static bool container_satisfies_requirements(DOM::Element const& element, ContainerQueryFeatureRequirements const& requirements)
LibWeb: Collect container query feature requirements A given element may be a container in different ways, depending on its `container-type` property. For a container query to match an element, that element must have the required container type for each feature that the query checks. This commit implement a step to collect those required types, so that we can quickly eliminate potential container elements that lack a required containment type.
2026-05-08 15:06:10 +01:00
{
LibWeb: Implement ContainerQuery evaluation ContainerQuery now stores its feature requirements. When evaluated, it uses these and the passed-in container name to identify a container element to match against, then evaluates its condition against that element. None of this is yet in use anywhere, but will be soon.
2026-05-08 14:56:28 +01:00
auto style = element.computed_properties();
if (!style)
return false;
auto container_type = style->container_type();
LibWeb/CSS: Track container size requirements per axis Replace `ContainerQueryFeatureRequirements::requires_size_container` with separate width and height flags. Depending on the writing mode, a request for the width or height of a container might need it to be a size container, or only an inline-size container. Anything that needs both sizes (such as the aspect ratio) can simply flag both as required.
2026-05-13 13:58:16 +01:00
auto inline_axis_horizontal = inline_axis_is_horizontal(style->writing_mode());
LibWeb: Implement ContainerQuery evaluation ContainerQuery now stores its feature requirements. When evaluated, it uses these and the passed-in container name to identify a container element to match against, then evaluates its condition against that element. None of this is yet in use anywhere, but will be soon.
2026-05-08 14:56:28 +01:00
LibWeb/CSS: Track container size requirements per axis Replace `ContainerQueryFeatureRequirements::requires_size_container` with separate width and height flags. Depending on the writing mode, a request for the width or height of a container might need it to be a size container, or only an inline-size container. Anything that needs both sizes (such as the aspect ratio) can simply flag both as required.
2026-05-13 13:58:16 +01:00
if (requirements.requires_width_container) {
if (inline_axis_horizontal) {
if (!(container_type.is_size_container || container_type.is_inline_size_container))
return false;
} else if (!container_type.is_size_container) {
return false;
}
}
if (requirements.requires_height_container) {
if (inline_axis_horizontal) {
if (!container_type.is_size_container)
return false;
} else if (!(container_type.is_size_container || container_type.is_inline_size_container)) {
return false;
}
}
LibWeb: Implement ContainerQuery evaluation ContainerQuery now stores its feature requirements. When evaluated, it uses these and the passed-in container name to identify a container element to match against, then evaluates its condition against that element. None of this is yet in use anywhere, but will be soon.
2026-05-08 14:56:28 +01:00
if (requirements.requires_inline_size_container && !(container_type.is_size_container || container_type.is_inline_size_container))
return false;
if (requirements.requires_block_size_container && !container_type.is_size_container)
return false;
if (requirements.requires_scroll_state_container && !container_type.is_scroll_state_container)
return false;
return true;
}
// https://drafts.csswg.org/css-conditional-5/#container-rule
MatchResult ContainerQuery::evaluate(DOM::AbstractElement const& element, Optional<FlyString> const& container_name) const
{
// If the <container-query> contains unknown or unsupported container features, no query container will be selected
// for that <container-condition>.
if (m_feature_requirements.has_unknown_or_unsupported_feature)
return MatchResult::Unknown;
// For each element, the query container to be queried is selected from among the element’s ancestor query
// containers that are established as a valid query container for all the container features in the
// <container-query>.
for (auto const* container = element.element().flat_tree_parent_element(); container; container = container->flat_tree_parent_element()) {
// The <container-name> filters the set of query containers considered to just those with a matching query
// container name.
if (!container_name_matches(*container, container_name))
continue;
if (!container_satisfies_requirements(*container, m_feature_requirements))
continue;
// Once an eligible query container has been selected for an element, each container feature in the
// <container-query> is evaluated against that query container.
return m_condition->evaluate({
.document = &element.document(),
.query_container = container,
});
}
// If no ancestor is an eligible query container, then the container query is unknown for that element.
return MatchResult::Unknown;
LibWeb: Collect container query feature requirements A given element may be a container in different ways, depending on its `container-type` property. For a container query to match an element, that element must have the required container type for each feature that the query checks. This commit implement a step to collect those required types, so that we can quickly eliminate potential container elements that lack a required containment type.
2026-05-08 15:06:10 +01:00
}
LibWeb/CSS: Implement CSSContainerRule No parsing yet, just CSSContainerRule and the supporting ContainerQuery class. CSSContainerRule is unusual in how it matches, because instead of it either matching or not matching globally, it instead is matched against a specific element. But also, some at-rules inside it always apply, as if they were written outside it. This doesn't fit well with how CSSConditionRule is implemented, and will likely require some rework later. For now, `condition_matches()` always returns false, and `for_each_effective_rule()` is overridden to always process those global at-rules and nothing else.
2026-03-27 14:14:00 +00:00
String ContainerQuery::to_string() const
{
return m_condition->to_string();
}
void ContainerQuery::dump(StringBuilder& builder, int indent_levels) const
{
dump_indent(builder, indent_levels);
builder.appendff("Container query: (matches = {})\n", m_matches);
m_condition->dump(builder, indent_levels + 1);
}
LibWeb: Implement ContainerQuery evaluation ContainerQuery now stores its feature requirements. When evaluated, it uses these and the passed-in container name to identify a container element to match against, then evaluates its condition against that element. None of this is yet in use anywhere, but will be soon.
2026-05-08 14:56:28 +01:00
bool container_name_matches(DOM::Element const& element, Optional<FlyString> const& container_name)
{
if (!container_name.has_value())
return true;
if (auto style = element.computed_properties())
return style->container_name().contains_slow(*container_name);
return false;
}
LibWeb/CSS: Implement CSSContainerRule No parsing yet, just CSSContainerRule and the supporting ContainerQuery class. CSSContainerRule is unusual in how it matches, because instead of it either matching or not matching globally, it instead is matched against a specific element. But also, some at-rules inside it always apply, as if they were written outside it. This doesn't fit well with how CSSConditionRule is implemented, and will likely require some rework later. For now, `condition_matches()` always returns false, and `for_each_effective_rule()` is overridden to always process those global at-rules and nothing else.
2026-03-27 14:14:00 +00:00
}
Reference in a new issue Copy permalink