LibWeb: Parse the anchor-scope property

This commit is contained in:
Tim Ledbetter 2025-10-01 22:08:06 +01:00 committed by Sam Atkins
parent 85a15ea1d4
commit 03fa367d9d
10 changed files with 125 additions and 2 deletions

View File

@ -423,6 +423,7 @@ private:
RefPtr<StyleValue const> parse_all_as_single_keyword_value(TokenStream<ComponentValue>&, Keyword);
RefPtr<StyleValue const> parse_anchor_name_value(TokenStream<ComponentValue>&);
RefPtr<StyleValue const> parse_anchor_scope_value(TokenStream<ComponentValue>&);
RefPtr<StyleValue const> parse_aspect_ratio_value(TokenStream<ComponentValue>&);
RefPtr<StyleValue const> parse_animation_value(TokenStream<ComponentValue>&);
RefPtr<StyleValue const> parse_background_value(TokenStream<ComponentValue>&);

View File

@ -444,6 +444,10 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue const>> Parser::parse_css_value(Pr
if (auto parsed_value = parse_anchor_name_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::AnchorScope:
if (auto parsed_value = parse_anchor_scope_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::AspectRatio:
if (auto parsed_value = parse_aspect_ratio_value(tokens); parsed_value && !tokens.has_next_token())
return parsed_value.release_nonnull();
@ -1216,6 +1220,24 @@ RefPtr<StyleValue const> Parser::parse_anchor_name_value(TokenStream<ComponentVa
});
}
// https://drafts.csswg.org/css-anchor-position/#anchor-scope
RefPtr<StyleValue const> Parser::parse_anchor_scope_value(TokenStream<ComponentValue>& tokens)
{
// none | all | <dashed-ident>#
if (auto none = parse_all_as_single_keyword_value(tokens, Keyword::None))
return none;
if (auto all = parse_all_as_single_keyword_value(tokens, Keyword::All))
return all;
return parse_comma_separated_value_list(tokens, [this](TokenStream<ComponentValue>& inner_tokens) -> RefPtr<StyleValue const> {
auto dashed_ident = parse_dashed_ident(inner_tokens);
if (!dashed_ident.has_value())
return {};
return CustomIdentStyleValue::create(*dashed_ident);
});
}
// https://www.w3.org/TR/css-sizing-4/#aspect-ratio
RefPtr<StyleValue const> Parser::parse_aspect_ratio_value(TokenStream<ComponentValue>& tokens)
{

View File

@ -205,6 +205,16 @@
"custom-ident ![none]"
]
},
"anchor-scope": {
"affects-layout": false,
"animation-type": "discrete",
"inherited": false,
"initial": "none",
"valid-identifiers": [
"none",
"all"
]
},
"animation": {
"affects-layout": false,
"inherited": false,

View File

@ -78,6 +78,7 @@ All properties associated with getComputedStyle(document.body):
"align-items",
"align-self",
"anchor-name",
"anchor-scope",
"animation-composition",
"animation-delay",
"animation-direction",

View File

@ -158,6 +158,8 @@ All supported properties and their default values exposed from CSSStylePropertie
'all': ''
'anchorName': 'none'
'anchor-name': 'none'
'anchorScope': 'none'
'anchor-scope': 'none'
'animation': 'none'
'animationComposition': 'replace'
'animation-composition': 'replace'

View File

@ -76,6 +76,7 @@ align-content: normal
align-items: normal
align-self: auto
anchor-name: none
anchor-scope: none
animation-composition: replace
animation-delay: 0s
animation-direction: normal
@ -98,7 +99,7 @@ background-position-x: 0%
background-position-y: 0%
background-repeat: repeat
background-size: auto
block-size: 1500px
block-size: 1515px
border-block-end-color: rgb(0, 0, 0)
border-block-end-style: none
border-block-end-width: 0px
@ -176,7 +177,7 @@ grid-row-start: auto
grid-template-areas: none
grid-template-columns: none
grid-template-rows: none
height: 2670px
height: 2685px
inline-size: 784px
inset-block-end: auto
inset-block-start: auto

View File

@ -0,0 +1,15 @@
Harness status: OK
Found 10 tests
10 Pass
Pass Property anchor-scope value 'none'
Pass Property anchor-scope value 'initial'
Pass Property anchor-scope value 'all'
Pass Property anchor-scope value '--a'
Pass Property anchor-scope value '--a, --b'
Pass Property anchor-scope value '--a, --b, --c'
Pass Property anchor-scope value '--foo, --bar'
Pass Property anchor-scope value '--bar, --foo'
Pass Property anchor-scope has initial value none
Pass Property anchor-scope does not inherit

View File

@ -0,0 +1,22 @@
Harness status: OK
Found 17 tests
17 Pass
Pass e.style['anchor-scope'] = "initial" should set the property value
Pass e.style['anchor-scope'] = "inherit" should set the property value
Pass e.style['anchor-scope'] = "unset" should set the property value
Pass e.style['anchor-scope'] = "revert" should set the property value
Pass e.style['anchor-scope'] = "none" should set the property value
Pass e.style['anchor-scope'] = "all" should set the property value
Pass e.style['anchor-scope'] = "--a" should set the property value
Pass e.style['anchor-scope'] = "--a, --b" should set the property value
Pass e.style['anchor-scope'] = "--a, --b, --c" should set the property value
Pass e.style['anchor-scope'] = "--foo, --bar" should set the property value
Pass e.style['anchor-scope'] = "--bar, --foo" should set the property value
Pass e.style['anchor-scope'] = "--a none" should not set the property value
Pass e.style['anchor-scope'] = "none --a" should not set the property value
Pass e.style['anchor-scope'] = "none all" should not set the property value
Pass e.style['anchor-scope'] = "--a --b" should not set the property value
Pass e.style['anchor-scope'] = "a, b, c" should not set the property value
Pass e.style['anchor-scope'] = "" should not set the property value

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>CSS Anchor Positioning Test: Computed anchor-scope</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-scope">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<script src="../../../css/support/inheritance-testcommon.js"></script>
<div id="container">
<div id="target"></div>
</div>
<script>
test_computed_value("anchor-scope", "none");
test_computed_value("anchor-scope", "initial", "none");
test_computed_value("anchor-scope", "all");
test_computed_value("anchor-scope", "--a");
test_computed_value("anchor-scope", "--a, --b");
test_computed_value("anchor-scope", "--a, --b, --c");
test_computed_value('anchor-scope', '--foo, --bar');
test_computed_value('anchor-scope', '--bar, --foo');
assert_not_inherited("anchor-scope", "none", "all");
</script>

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>CSS Anchor Positioning Test: Parsing of anchor-scope</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-scope">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
<div id="target"></div>
<script>
test_valid_value("anchor-scope", "initial");
test_valid_value("anchor-scope", "inherit");
test_valid_value("anchor-scope", "unset");
test_valid_value("anchor-scope", "revert");
test_valid_value("anchor-scope", "none");
test_valid_value("anchor-scope", "all");
test_valid_value("anchor-scope", "--a");
test_valid_value("anchor-scope", "--a, --b");
test_valid_value("anchor-scope", "--a, --b, --c");
test_valid_value('anchor-scope', '--foo, --bar');
test_valid_value('anchor-scope', '--bar, --foo');
test_invalid_value("anchor-scope", "--a none");
test_invalid_value("anchor-scope", "none --a");
test_invalid_value("anchor-scope", "none all");
test_invalid_value("anchor-scope", "--a --b");
test_invalid_value("anchor-scope", "a, b, c");
test_invalid_value("anchor-scope", "");
</script>