mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-07 21:59:54 +00:00
LibWeb: Parse scroll() for the animation-timeline CSS property
This commit is contained in:
Callum Law
Sam Atkins
parent
5bbcd0a48f
commit
7d70714eac
Notes:
github-actions[bot]
2025-11-28 13:25:32 +00:00
Author: https://github.com/Calme1709
Commit: 7d70714eac
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6912
Reviewed-by: https://github.com/AtkinsSJ ✅
16 changed files with 181 additions and 34 deletions
|
|
@ -268,6 +268,7 @@ set(SOURCES
|
|||
CSS/StyleValues/RectStyleValue.cpp
|
||||
CSS/StyleValues/RepeatStyleStyleValue.cpp
|
||||
CSS/StyleValues/ScrollbarColorStyleValue.cpp
|
||||
CSS/StyleValues/ScrollFunctionStyleValue.cpp
|
||||
CSS/StyleValues/ShadowStyleValue.cpp
|
||||
CSS/StyleValues/ShorthandStyleValue.cpp
|
||||
CSS/StyleValues/StyleValue.cpp
|
||||
|
|
|
|||
|
|
@ -721,6 +721,11 @@
|
|||
"thin",
|
||||
"none"
|
||||
],
|
||||
"scroller": [
|
||||
"root",
|
||||
"nearest",
|
||||
"self"
|
||||
],
|
||||
"shape-box": [
|
||||
"content-box",
|
||||
"padding-box",
|
||||
|
|
|
|||
|
|
@ -450,6 +450,7 @@
|
|||
"revert-layer",
|
||||
"ridge",
|
||||
"right",
|
||||
"root",
|
||||
"rotate-left",
|
||||
"rotate-right",
|
||||
"round",
|
||||
|
|
@ -480,6 +481,7 @@
|
|||
"searchfield",
|
||||
"selecteditem",
|
||||
"selecteditemtext",
|
||||
"self",
|
||||
"self-block",
|
||||
"self-block-end",
|
||||
"self-block-start",
|
||||
|
|
|
|||
|
|
@ -444,6 +444,7 @@ private:
|
|||
RefPtr<StyleValue const> parse_time_percentage_value(TokenStream<ComponentValue>&);
|
||||
|
||||
RefPtr<StyleValue const> parse_view_timeline_inset_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<ScrollFunctionStyleValue const> parse_scroll_function_value(TokenStream<ComponentValue>&);
|
||||
|
||||
using ParseFunction = AK::Function<RefPtr<StyleValue const>(TokenStream<ComponentValue>&)>;
|
||||
RefPtr<StyleValue const> parse_comma_separated_value_list(TokenStream<ComponentValue>&, ParseFunction);
|
||||
|
|
|
|||
|
|
@ -248,6 +248,8 @@ Optional<Parser::PropertyAndValue> Parser::parse_css_value_for_properties(Readon
|
|||
return parsed.release_value();
|
||||
if (auto parsed = parse_for_type(ValueType::Rect); parsed.has_value())
|
||||
return parsed.release_value();
|
||||
if (auto parsed = parse_for_type(ValueType::ScrollFunction); parsed.has_value())
|
||||
return parsed.release_value();
|
||||
if (auto parsed = parse_for_type(ValueType::String); parsed.has_value())
|
||||
return parsed.release_value();
|
||||
if (auto parsed = parse_for_type(ValueType::TransformFunction); parsed.has_value())
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@
|
|||
#include <LibWeb/CSS/StyleValues/RectStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/RepeatStyleStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ScrollFunctionStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/StringStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/StyleValueList.h>
|
||||
#include <LibWeb/CSS/StyleValues/SuperellipseStyleValue.h>
|
||||
|
|
@ -1429,6 +1430,61 @@ RefPtr<StyleValue const> Parser::parse_keyword_value(TokenStream<ComponentValue>
|
|||
return nullptr;
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/scroll-animations-1/#funcdef-scroll
|
||||
RefPtr<ScrollFunctionStyleValue const> Parser::parse_scroll_function_value(TokenStream<ComponentValue>& tokens)
|
||||
{
|
||||
// <scroll()> = scroll( [ <scroller> || <axis> ]? )
|
||||
auto transaction = tokens.begin_transaction();
|
||||
auto const& function_token = tokens.consume_a_token();
|
||||
if (!function_token.is_function("scroll"sv))
|
||||
return nullptr;
|
||||
|
||||
Optional<Scroller> scroller;
|
||||
Optional<Axis> axis;
|
||||
|
||||
auto argument_tokens = TokenStream { function_token.function().value };
|
||||
|
||||
while (argument_tokens.has_next_token()) {
|
||||
tokens.discard_whitespace();
|
||||
|
||||
if (!argument_tokens.has_next_token())
|
||||
break;
|
||||
|
||||
auto keyword_value = parse_keyword_value(argument_tokens);
|
||||
|
||||
if (!keyword_value)
|
||||
return nullptr;
|
||||
|
||||
if (auto maybe_scroller = keyword_to_scroller(keyword_value->to_keyword()); maybe_scroller.has_value()) {
|
||||
if (scroller.has_value())
|
||||
return nullptr;
|
||||
|
||||
scroller = maybe_scroller;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (auto maybe_axis = keyword_to_axis(keyword_value->to_keyword()); maybe_axis.has_value()) {
|
||||
if (axis.has_value())
|
||||
return nullptr;
|
||||
|
||||
axis = maybe_axis;
|
||||
continue;
|
||||
}
|
||||
|
||||
return nullptr;
|
||||
}
|
||||
|
||||
// By default, scroll() references the block axis of the nearest ancestor scroll container.
|
||||
if (!scroller.has_value())
|
||||
scroller = Scroller::Nearest;
|
||||
|
||||
if (!axis.has_value())
|
||||
axis = Axis::Block;
|
||||
|
||||
transaction.commit();
|
||||
return ScrollFunctionStyleValue::create(scroller.value(), axis.value());
|
||||
}
|
||||
|
||||
// https://www.w3.org/TR/CSS2/visufx.html#value-def-shape
|
||||
RefPtr<StyleValue const> Parser::parse_rect_value(TokenStream<ComponentValue>& tokens)
|
||||
{
|
||||
|
|
@ -5074,6 +5130,8 @@ RefPtr<StyleValue const> Parser::parse_value(ValueType value_type, TokenStream<C
|
|||
return parse_rect_value(tokens);
|
||||
case ValueType::Resolution:
|
||||
return parse_resolution_value(tokens);
|
||||
case ValueType::ScrollFunction:
|
||||
return parse_scroll_function_value(tokens);
|
||||
case ValueType::String:
|
||||
return parse_string_value(tokens);
|
||||
case ValueType::Time:
|
||||
|
|
|
|||
|
|
@ -345,13 +345,14 @@
|
|||
"inherited": false,
|
||||
"initial": "auto",
|
||||
"valid-types": [
|
||||
"dashed-ident"
|
||||
"dashed-ident",
|
||||
"scroll-function"
|
||||
],
|
||||
"valid-identifiers": [
|
||||
"auto",
|
||||
"none"
|
||||
],
|
||||
"__comment": "FIXME: animation properties should be coordinating-lists, FIXME: support scroll() and view() functions",
|
||||
"__comment": "FIXME: animation properties should be coordinating-lists, FIXME: support view() functions",
|
||||
"multiplicity": "single"
|
||||
},
|
||||
"animation-timing-function": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
/*
|
||||
* Copyright (c) 2025, Callum Law <callumlaw1709@outlook.com>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include "ScrollFunctionStyleValue.h"
|
||||
|
||||
namespace Web::CSS {
|
||||
|
||||
String ScrollFunctionStyleValue::to_string(SerializationMode) const
|
||||
{
|
||||
StringBuilder builder;
|
||||
builder.append("scroll("sv);
|
||||
|
||||
if (m_scroller != Scroller::Nearest)
|
||||
builder.append(CSS::to_string(m_scroller));
|
||||
|
||||
if (m_axis != Axis::Block) {
|
||||
if (m_scroller != Scroller::Nearest)
|
||||
builder.append(' ');
|
||||
builder.append(CSS::to_string(m_axis));
|
||||
}
|
||||
|
||||
builder.append(')');
|
||||
return builder.to_string_without_validation();
|
||||
}
|
||||
|
||||
}
|
||||
40
Libraries/LibWeb/CSS/StyleValues/ScrollFunctionStyleValue.h
Normal file
40
Libraries/LibWeb/CSS/StyleValues/ScrollFunctionStyleValue.h
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/*
|
||||
* 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 ScrollFunctionStyleValue final : public StyleValueWithDefaultOperators<ScrollFunctionStyleValue> {
|
||||
public:
|
||||
static ValueComparingNonnullRefPtr<ScrollFunctionStyleValue const> create(Scroller scroller, Axis axis)
|
||||
{
|
||||
return adopt_ref(*new ScrollFunctionStyleValue(scroller, axis));
|
||||
}
|
||||
virtual ~ScrollFunctionStyleValue() override = default;
|
||||
|
||||
virtual String to_string(SerializationMode) const override;
|
||||
bool properties_equal(ScrollFunctionStyleValue const& other) const { return m_scroller == other.m_scroller && m_axis == other.m_axis; }
|
||||
|
||||
Scroller scroller() const { return m_scroller; }
|
||||
Axis axis() const { return m_axis; }
|
||||
|
||||
private:
|
||||
explicit ScrollFunctionStyleValue(Scroller scroller, Axis axis)
|
||||
: StyleValueWithDefaultOperators(Type::ScrollFunction)
|
||||
, m_scroller(scroller)
|
||||
, m_axis(axis)
|
||||
{
|
||||
}
|
||||
|
||||
Scroller m_scroller;
|
||||
Axis m_axis;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -59,6 +59,7 @@
|
|||
#include <LibWeb/CSS/StyleValues/RectStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/RepeatStyleStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ScrollFunctionStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ScrollbarGutterStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ namespace Web::CSS {
|
|||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(Resolution, resolution, ResolutionStyleValue) \
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(ScrollbarColor, scrollbar_color, ScrollbarColorStyleValue) \
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(ScrollbarGutter, scrollbar_gutter, ScrollbarGutterStyleValue) \
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(ScrollFunction, scroll_function, ScrollFunctionStyleValue) \
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(Shadow, shadow, ShadowStyleValue) \
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(Shorthand, shorthand, ShorthandStyleValue) \
|
||||
__ENUMERATE_CSS_STYLE_VALUE_TYPE(String, string, StringStyleValue) \
|
||||
|
|
|
|||
|
|
@ -67,6 +67,8 @@ Optional<ValueType> value_type_from_string(StringView string)
|
|||
return ValueType::Rect;
|
||||
if (string.equals_ignoring_ascii_case("resolution"sv))
|
||||
return ValueType::Resolution;
|
||||
if (string.equals_ignoring_ascii_case("scroll-function"sv))
|
||||
return ValueType::ScrollFunction;
|
||||
if (string.equals_ignoring_ascii_case("string"sv))
|
||||
return ValueType::String;
|
||||
if (string.equals_ignoring_ascii_case("time"sv))
|
||||
|
|
@ -147,6 +149,8 @@ StringView value_type_to_string(ValueType value_type)
|
|||
return "Rect"sv;
|
||||
case Web::CSS::ValueType::Resolution:
|
||||
return "Resolution"sv;
|
||||
case Web::CSS::ValueType::ScrollFunction:
|
||||
return "ScrollFunction"sv;
|
||||
case Web::CSS::ValueType::String:
|
||||
return "String"sv;
|
||||
case Web::CSS::ValueType::Time:
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ enum class ValueType : u8 {
|
|||
Ratio,
|
||||
Rect,
|
||||
Resolution,
|
||||
ScrollFunction,
|
||||
String,
|
||||
Time,
|
||||
TimePercentage,
|
||||
|
|
|
|||
|
|
@ -366,6 +366,7 @@ class ShadowStyleValue;
|
|||
class ShorthandStyleValue;
|
||||
class Size;
|
||||
class ScrollbarColorStyleValue;
|
||||
class ScrollFunctionStyleValue;
|
||||
class StringStyleValue;
|
||||
class StyleComputer;
|
||||
class StylePropertyMap;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ Harness status: OK
|
|||
|
||||
Found 44 tests
|
||||
|
||||
13 Pass
|
||||
31 Fail
|
||||
27 Pass
|
||||
17 Fail
|
||||
Pass Property animation-timeline value 'initial'
|
||||
Pass Property animation-timeline value 'inherit'
|
||||
Pass Property animation-timeline value 'unset'
|
||||
|
|
@ -19,20 +19,20 @@ Pass Property animation-timeline value '--test1, --test2'
|
|||
Pass Property animation-timeline value '--test1, --test2, none, --test3, auto'
|
||||
Pass The animation-timeline property shows up in CSSStyleDeclaration enumeration
|
||||
Pass The animation-timeline property shows up in CSSStyleDeclaration.cssText
|
||||
Fail Property animation-timeline value 'scroll()'
|
||||
Fail Property animation-timeline value 'scroll(block)'
|
||||
Fail Property animation-timeline value 'scroll(inline)'
|
||||
Fail Property animation-timeline value 'scroll(x)'
|
||||
Fail Property animation-timeline value 'scroll(y)'
|
||||
Fail Property animation-timeline value 'scroll(root)'
|
||||
Fail Property animation-timeline value 'scroll(nearest)'
|
||||
Fail Property animation-timeline value 'scroll(self)'
|
||||
Fail Property animation-timeline value 'scroll(self), scroll(nearest)'
|
||||
Fail Property animation-timeline value 'scroll(inline nearest)'
|
||||
Fail Property animation-timeline value 'scroll(nearest inline)'
|
||||
Fail Property animation-timeline value 'scroll(block self)'
|
||||
Fail Property animation-timeline value 'scroll(self block)'
|
||||
Fail Property animation-timeline value 'scroll(y root)'
|
||||
Pass Property animation-timeline value 'scroll()'
|
||||
Pass Property animation-timeline value 'scroll(block)'
|
||||
Pass Property animation-timeline value 'scroll(inline)'
|
||||
Pass Property animation-timeline value 'scroll(x)'
|
||||
Pass Property animation-timeline value 'scroll(y)'
|
||||
Pass Property animation-timeline value 'scroll(root)'
|
||||
Pass Property animation-timeline value 'scroll(nearest)'
|
||||
Pass Property animation-timeline value 'scroll(self)'
|
||||
Pass Property animation-timeline value 'scroll(self), scroll(nearest)'
|
||||
Pass Property animation-timeline value 'scroll(inline nearest)'
|
||||
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)'
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ Harness status: OK
|
|||
|
||||
Found 69 tests
|
||||
|
||||
31 Pass
|
||||
38 Fail
|
||||
45 Pass
|
||||
24 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
|
||||
|
|
@ -26,20 +26,20 @@ Pass e.style['animation-timeline'] = "\"foo\" \"bar\"" should not set the proper
|
|||
Pass e.style['animation-timeline'] = "rgb(1, 2, 3)" should not set the property value
|
||||
Pass e.style['animation-timeline'] = "#fefefe" should not set the property value
|
||||
Pass e.style['animation-timeline'] = "\"test\"" should not set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll()" should set the property value
|
||||
Fail e.style['animation-timeline'] = " scroll() " should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(block)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(inline)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(x)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(y)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(root)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(nearest)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(self)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(inline nearest)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(nearest inline)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(block self)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(self block)" should set the property value
|
||||
Fail e.style['animation-timeline'] = "scroll(y root)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll()" should set the property value
|
||||
Pass e.style['animation-timeline'] = " scroll() " should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(block)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(inline)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(x)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(y)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(root)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(nearest)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(self)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(inline nearest)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(nearest inline)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(block self)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(self block)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(y root)" should set the property value
|
||||
Pass e.style['animation-timeline'] = "scroll(abc root)" should not set the property value
|
||||
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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue