mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-07 21:59:54 +00:00
LibWeb: Parse view() for the animation-timeline CSS property
This commit is contained in:
Callum Law
Sam Atkins
parent
7d70714eac
commit
c8d91c127e
Notes:
github-actions[bot]
2025-11-28 13:25:26 +00:00
Author: https://github.com/Calme1709
Commit: c8d91c127e
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6912
Reviewed-by: https://github.com/AtkinsSJ ✅
14 changed files with 198 additions and 44 deletions
|
|
@ -280,6 +280,7 @@ set(SOURCES
|
|||
CSS/StyleValues/TreeCountingFunctionStyleValue.cpp
|
||||
CSS/StyleValues/UnicodeRangeStyleValue.cpp
|
||||
CSS/StyleValues/UnresolvedStyleValue.cpp
|
||||
CSS/StyleValues/ViewFunctionStyleValue.cpp
|
||||
CSS/Supports.cpp
|
||||
CSS/SyntaxHighlighter/SyntaxHighlighter.cpp
|
||||
CSS/SystemColor.cpp
|
||||
|
|
|
|||
|
|
@ -445,6 +445,7 @@ private:
|
|||
|
||||
RefPtr<StyleValue const> parse_view_timeline_inset_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<ScrollFunctionStyleValue const> parse_scroll_function_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<ViewFunctionStyleValue const> parse_view_function_value(TokenStream<ComponentValue>&);
|
||||
|
||||
using ParseFunction = AK::Function<RefPtr<StyleValue const>(TokenStream<ComponentValue>&)>;
|
||||
RefPtr<StyleValue const> parse_comma_separated_value_list(TokenStream<ComponentValue>&, ParseFunction);
|
||||
|
|
|
|||
|
|
@ -258,6 +258,8 @@ Optional<Parser::PropertyAndValue> Parser::parse_css_value_for_properties(Readon
|
|||
return parsed.release_value();
|
||||
if (auto parsed = parse_for_type(ValueType::Url); parsed.has_value())
|
||||
return parsed.release_value();
|
||||
if (auto parsed = parse_for_type(ValueType::ViewFunction); parsed.has_value())
|
||||
return parsed.release_value();
|
||||
if (auto parsed = parse_for_type(ValueType::ViewTimelineInset); parsed.has_value())
|
||||
return parsed.release_value();
|
||||
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@
|
|||
#include <LibWeb/CSS/StyleValues/URLStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/UnicodeRangeStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/UnresolvedStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ViewFunctionStyleValue.h>
|
||||
#include <LibWeb/DOM/Element.h>
|
||||
#include <LibWeb/Dump.h>
|
||||
#include <LibWeb/Infra/CharacterTypes.h>
|
||||
|
|
@ -1485,6 +1486,58 @@ RefPtr<ScrollFunctionStyleValue const> Parser::parse_scroll_function_value(Token
|
|||
return ScrollFunctionStyleValue::create(scroller.value(), axis.value());
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/scroll-animations-1/#funcdef-view
|
||||
RefPtr<ViewFunctionStyleValue const> Parser::parse_view_function_value(TokenStream<ComponentValue>& tokens)
|
||||
{
|
||||
// <view()> = view( [ <axis> || <'view-timeline-inset'> ]? )
|
||||
auto transaction = tokens.begin_transaction();
|
||||
auto const& function_token = tokens.consume_a_token();
|
||||
if (!function_token.is_function("view"sv))
|
||||
return nullptr;
|
||||
|
||||
auto context_guard = push_temporary_value_parsing_context(FunctionContext { "view"sv });
|
||||
|
||||
Optional<Axis> axis;
|
||||
RefPtr<StyleValue const> inset;
|
||||
|
||||
auto argument_tokens = TokenStream { function_token.function().value };
|
||||
|
||||
while (argument_tokens.has_next_token()) {
|
||||
argument_tokens.discard_whitespace();
|
||||
|
||||
if (!argument_tokens.has_next_token())
|
||||
break;
|
||||
|
||||
if (auto inset_value = parse_view_timeline_inset_value(argument_tokens); inset_value) {
|
||||
if (inset)
|
||||
return nullptr;
|
||||
|
||||
inset = inset_value;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (auto keyword_value = parse_keyword_value(argument_tokens); keyword_value && keyword_to_axis(keyword_value->to_keyword()).has_value()) {
|
||||
if (axis.has_value())
|
||||
return nullptr;
|
||||
|
||||
axis = keyword_to_axis(keyword_value->to_keyword());
|
||||
continue;
|
||||
}
|
||||
|
||||
return nullptr;
|
||||
}
|
||||
|
||||
// By default, view() references the block axis
|
||||
if (!axis.has_value())
|
||||
axis = Axis::Block;
|
||||
|
||||
if (!inset)
|
||||
inset = StyleValueList::create({ KeywordStyleValue::create(Keyword::Auto), KeywordStyleValue::create(Keyword::Auto) }, StyleValueList::Separator::Space);
|
||||
|
||||
transaction.commit();
|
||||
return ViewFunctionStyleValue::create(axis.value(), inset.release_nonnull());
|
||||
}
|
||||
|
||||
// https://www.w3.org/TR/CSS2/visufx.html#value-def-shape
|
||||
RefPtr<StyleValue const> Parser::parse_rect_value(TokenStream<ComponentValue>& tokens)
|
||||
{
|
||||
|
|
@ -4314,6 +4367,9 @@ RefPtr<CalculatedStyleValue const> Parser::parse_calculated_value(ComponentValue
|
|||
"circle"sv, "ellipse"sv, "inset"sv, "polygon"sv, "rect"sv, "xywh"sv)) {
|
||||
return CalculationContext { .percentages_resolve_as = ValueType::Length };
|
||||
}
|
||||
if (function.name.equals_ignoring_ascii_case("view"sv)) {
|
||||
return CalculationContext { .percentages_resolve_as = ValueType::Length };
|
||||
}
|
||||
// FIXME: Add other functions that provide a context for resolving values
|
||||
return {};
|
||||
},
|
||||
|
|
@ -5144,6 +5200,8 @@ RefPtr<StyleValue const> Parser::parse_value(ValueType value_type, TokenStream<C
|
|||
return parse_transform_list_value(tokens);
|
||||
case ValueType::Url:
|
||||
return parse_url_value(tokens);
|
||||
case ValueType::ViewFunction:
|
||||
return parse_view_function_value(tokens);
|
||||
case ValueType::ViewTimelineInset:
|
||||
return parse_view_timeline_inset_value(tokens);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -346,13 +346,14 @@
|
|||
"initial": "auto",
|
||||
"valid-types": [
|
||||
"dashed-ident",
|
||||
"scroll-function"
|
||||
"scroll-function",
|
||||
"view-function"
|
||||
],
|
||||
"valid-identifiers": [
|
||||
"auto",
|
||||
"none"
|
||||
],
|
||||
"__comment": "FIXME: animation properties should be coordinating-lists, FIXME: support view() functions",
|
||||
"__comment": "FIXME: animation properties should be coordinating-lists",
|
||||
"multiplicity": "single"
|
||||
},
|
||||
"animation-timing-function": {
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@
|
|||
#include <LibWeb/CSS/StyleValues/URLStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/UnicodeRangeStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/UnresolvedStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ViewFunctionStyleValue.h>
|
||||
#include <LibWeb/HTML/Navigable.h>
|
||||
#include <LibWeb/Layout/Node.h>
|
||||
|
||||
|
|
|
|||
|
|
@ -92,7 +92,8 @@ namespace Web::CSS {
|
|||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(UnicodeRange, unicode_range, UnicodeRangeStyleValue) \
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(Unresolved, unresolved, UnresolvedStyleValue) \
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(URL, url, URLStyleValue) \
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(ValueList, value_list, StyleValueList)
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(ValueList, value_list, StyleValueList) \
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(ViewFunction, view_function, ViewFunctionStyleValue)
|
||||
|
||||
template<typename T>
|
||||
struct ValueComparingNonnullRefPtr : public NonnullRefPtr<T> {
|
||||
|
|
|
|||
42
Libraries/LibWeb/CSS/StyleValues/ViewFunctionStyleValue.cpp
Normal file
42
Libraries/LibWeb/CSS/StyleValues/ViewFunctionStyleValue.cpp
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
* Copyright (c) 2025, Callum Law <callumlaw1709@outlook.com>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include "ViewFunctionStyleValue.h"
|
||||
|
||||
namespace Web::CSS {
|
||||
|
||||
String ViewFunctionStyleValue::to_string(SerializationMode mode) const
|
||||
{
|
||||
StringBuilder builder;
|
||||
builder.append("view("sv);
|
||||
|
||||
if (m_axis != Axis::Block)
|
||||
builder.append(CSS::to_string(m_axis));
|
||||
|
||||
auto stringified_inset = m_inset->to_string(mode);
|
||||
|
||||
if (stringified_inset != "auto"sv) {
|
||||
if (m_axis != Axis::Block)
|
||||
builder.append(' ');
|
||||
|
||||
builder.append(stringified_inset);
|
||||
}
|
||||
|
||||
builder.append(')');
|
||||
return builder.to_string_without_validation();
|
||||
}
|
||||
|
||||
ValueComparingNonnullRefPtr<StyleValue const> ViewFunctionStyleValue::absolutized(ComputationContext const& computation_context) const
|
||||
{
|
||||
auto absolutized_inset = m_inset->absolutized(computation_context);
|
||||
|
||||
if (absolutized_inset == m_inset)
|
||||
return *this;
|
||||
|
||||
return ViewFunctionStyleValue::create(m_axis, absolutized_inset);
|
||||
}
|
||||
|
||||
}
|
||||
41
Libraries/LibWeb/CSS/StyleValues/ViewFunctionStyleValue.h
Normal file
41
Libraries/LibWeb/CSS/StyleValues/ViewFunctionStyleValue.h
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
/*
|
||||
* Copyright (c) 2025, Callum Law <callumlaw1709@outlook.com>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#pragma once
|
||||
|
||||
#include <LibWeb/CSS/Enums.h>
|
||||
#include <LibWeb/CSS/StyleValues/StyleValue.h>
|
||||
|
||||
namespace Web::CSS {
|
||||
|
||||
class ViewFunctionStyleValue final : public StyleValueWithDefaultOperators<ViewFunctionStyleValue> {
|
||||
public:
|
||||
static ValueComparingNonnullRefPtr<ViewFunctionStyleValue const> create(Axis axis, NonnullRefPtr<StyleValue const> inset)
|
||||
{
|
||||
return adopt_ref(*new ViewFunctionStyleValue(axis, move(inset)));
|
||||
}
|
||||
virtual ~ViewFunctionStyleValue() override = default;
|
||||
|
||||
virtual String to_string(SerializationMode) const override;
|
||||
bool properties_equal(ViewFunctionStyleValue const& other) const { return m_axis == other.m_axis && m_inset == other.m_inset; }
|
||||
virtual ValueComparingNonnullRefPtr<StyleValue const> absolutized(ComputationContext const&) const override;
|
||||
|
||||
Axis axis() const { return m_axis; }
|
||||
NonnullRefPtr<StyleValue const> inset() const { return m_inset; }
|
||||
|
||||
private:
|
||||
explicit ViewFunctionStyleValue(Axis axis, NonnullRefPtr<StyleValue const> inset)
|
||||
: StyleValueWithDefaultOperators(Type::ViewFunction)
|
||||
, m_axis(axis)
|
||||
, m_inset(move(inset))
|
||||
{
|
||||
}
|
||||
|
||||
Axis m_axis;
|
||||
ValueComparingNonnullRefPtr<StyleValue const> m_inset;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -81,6 +81,8 @@ Optional<ValueType> value_type_from_string(StringView string)
|
|||
return ValueType::TransformList;
|
||||
if (string.equals_ignoring_ascii_case("url"sv))
|
||||
return ValueType::Url;
|
||||
if (string.equals_ignoring_ascii_case("view-function"sv))
|
||||
return ValueType::ViewFunction;
|
||||
if (string.equals_ignoring_ascii_case("view-timeline-inset"sv))
|
||||
return ValueType::ViewTimelineInset;
|
||||
return {};
|
||||
|
|
@ -163,6 +165,8 @@ StringView value_type_to_string(ValueType value_type)
|
|||
return "TransformList"sv;
|
||||
case Web::CSS::ValueType::Url:
|
||||
return "Url"sv;
|
||||
case Web::CSS::ValueType::ViewFunction:
|
||||
return "ViewFunction"sv;
|
||||
case Web::CSS::ValueType::ViewTimelineInset:
|
||||
return "ViewTimelineInset"sv;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ enum class ValueType : u8 {
|
|||
TransformFunction,
|
||||
TransformList,
|
||||
Url,
|
||||
ViewFunction,
|
||||
ViewTimelineInset
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -392,6 +392,7 @@ class UnicodeRangeStyleValue;
|
|||
class UnresolvedStyleValue;
|
||||
class URL;
|
||||
class URLStyleValue;
|
||||
class ViewFunctionStyleValue;
|
||||
class VisualViewport;
|
||||
|
||||
enum class Keyword : u16;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ Harness status: OK
|
|||
|
||||
Found 44 tests
|
||||
|
||||
27 Pass
|
||||
17 Fail
|
||||
42 Pass
|
||||
2 Fail
|
||||
Pass Property animation-timeline value 'initial'
|
||||
Pass Property animation-timeline value 'inherit'
|
||||
Pass Property animation-timeline value 'unset'
|
||||
|
|
@ -33,18 +33,18 @@ Pass Property animation-timeline value 'scroll(nearest inline)'
|
|||
Pass Property animation-timeline value 'scroll(block self)'
|
||||
Pass Property animation-timeline value 'scroll(self block)'
|
||||
Pass Property animation-timeline value 'scroll(y root)'
|
||||
Fail Property animation-timeline value 'view()'
|
||||
Fail Property animation-timeline value 'view(block)'
|
||||
Fail Property animation-timeline value 'view(inline)'
|
||||
Fail Property animation-timeline value 'view(x)'
|
||||
Fail Property animation-timeline value 'view(y)'
|
||||
Fail Property animation-timeline value 'view(y 1px)'
|
||||
Fail Property animation-timeline value 'view(1px auto)'
|
||||
Fail Property animation-timeline value 'view(auto 1px)'
|
||||
Fail Property animation-timeline value 'view(y 1px auto)'
|
||||
Fail Property animation-timeline value 'view(1px y)'
|
||||
Fail Property animation-timeline value 'view(y auto)'
|
||||
Fail Property animation-timeline value 'view(y auto auto)'
|
||||
Fail Property animation-timeline value 'view(10% 10px)'
|
||||
Fail Property animation-timeline value 'view(auto calc(1% + 1px))'
|
||||
Fail Property animation-timeline value 'view(2em calc(1% + 1em))'
|
||||
Pass Property animation-timeline value 'view()'
|
||||
Pass Property animation-timeline value 'view(block)'
|
||||
Pass Property animation-timeline value 'view(inline)'
|
||||
Pass Property animation-timeline value 'view(x)'
|
||||
Pass Property animation-timeline value 'view(y)'
|
||||
Pass Property animation-timeline value 'view(y 1px)'
|
||||
Pass Property animation-timeline value 'view(1px auto)'
|
||||
Pass Property animation-timeline value 'view(auto 1px)'
|
||||
Pass Property animation-timeline value 'view(y 1px auto)'
|
||||
Pass Property animation-timeline value 'view(1px y)'
|
||||
Pass Property animation-timeline value 'view(y auto)'
|
||||
Pass Property animation-timeline value 'view(y auto auto)'
|
||||
Pass Property animation-timeline value 'view(10% 10px)'
|
||||
Pass Property animation-timeline value 'view(auto calc(1% + 1px))'
|
||||
Pass Property animation-timeline value 'view(2em calc(1% + 1em))'
|
||||
|
|
@ -2,8 +2,8 @@ Harness status: OK
|
|||
|
||||
Found 69 tests
|
||||
|
||||
45 Pass
|
||||
24 Fail
|
||||
67 Pass
|
||||
2 Fail
|
||||
Pass e.style['animation-timeline'] = "initial" should set the property value
|
||||
Pass e.style['animation-timeline'] = "inherit" should set the property value
|
||||
Pass e.style['animation-timeline'] = "unset" should set the property value
|
||||
|
|
@ -44,28 +44,28 @@ Pass e.style['animation-timeline'] = "scroll(abc root)" should not set the prope
|
|||
Pass e.style['animation-timeline'] = "scroll(abc)" should not set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(y abc)" should not set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(\"string\")" should not set the property value
|
||||
Fail e.style['animation-timeline'] = "view()" should set the property value
|
||||
Fail e.style['animation-timeline'] = " view() " should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(block)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(inline)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(x)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(y)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(y 1px 2px)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(y 1px)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(y auto)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(y auto auto)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(y auto 1px)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(1px 2px y)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(1px y)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(auto x)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(1px 2px)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(1px)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(1px 1px)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(1px auto)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(auto calc(1% + 1px))" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(2em calc(1% + 1em))" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(auto)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "view(auto auto)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view()" should set the property value
|
||||
Pass e.style['animation-timeline'] = " view() " should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(block)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(inline)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(x)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(y)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(y 1px 2px)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(y 1px)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(y auto)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(y auto auto)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(y auto 1px)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(1px 2px y)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(1px y)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(auto x)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(1px 2px)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(1px)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(1px 1px)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(1px auto)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(auto calc(1% + 1px))" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(2em calc(1% + 1em))" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(auto)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(auto auto)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "view(y 1px 2px 3px)" should not set the property value
|
||||
Pass e.style['animation-timeline'] = "view(1px y 3px)" should not set the property value
|
||||
Pass e.style['animation-timeline'] = "view(1px 2px 3px)" should not set the property value
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue