RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 19:37:35 +00:00
Code Issues Activity Actions

LibWeb: Parse background-clip and background-origin

Browse source 
Including as part of the `background` shorthand. :^)
This commit is contained in:
Sam Atkins 2021-11-03 20:28:34 +00:00 • committed by Andreas Kling
parent 018a4aa85c
commit 532f1e859d
6 changed files with 106 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Userland/Libraries/LibWeb/CSS/Identifiers.json
View file

@ -163,6 +163,7 @@
"outside",
"overline",
"p3",
"padding-box",
"paged",
"pointer",
"portrait",

37
Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
View file

@ -2399,8 +2399,8 @@ RefPtr<StyleValue> Parser::parse_background_value(ParsingContext const& context,
RefPtr<StyleValue> background_position;
// FIXME: Implement background-size.
RefPtr<StyleValue> background_attachment;
// FIXME: Implement background-clip.
// FIXME: Implement background-origin.
RefPtr<StyleValue> background_clip;
RefPtr<StyleValue> background_origin;
auto tokens = TokenStream { component_values };
while (tokens.has_next_token()) {
@ -2434,6 +2434,23 @@ RefPtr<StyleValue> Parser::parse_background_value(ParsingContext const& context,
background_image = value.release_nonnull();
continue;
}
if (property_accepts_value(PropertyID::BackgroundOrigin, *value)) {
// background-origin and background-clip accept the same values. From the spec:
// "If one <box> value is present then it sets both background-origin and background-clip to that value.
// If two values are present, then the first sets background-origin and the second background-clip."
// - https://www.w3.org/TR/css-backgrounds-3/#background
// So, we put the first one in background-origin, then if we get a second, we put it in background-clip.
// If we only get one, we copy the value before creating the BackgroundStyleValue.
if (!background_origin) {
background_origin = value.release_nonnull();
continue;
}
if (!background_clip) {
background_clip = value.release_nonnull();
continue;
}
return nullptr;
}
if (property_accepts_value(PropertyID::BackgroundPosition, *value)) {
if (background_position)
return nullptr;
@ -2488,7 +2505,21 @@ RefPtr<StyleValue> Parser::parse_background_value(ParsingContext const& context,
if (!background_attachment)
background_attachment = property_initial_value(PropertyID::BackgroundAttachment);
return BackgroundStyleValue::create(background_color.release_nonnull(), background_image.release_nonnull(), background_position.release_nonnull(), repeat_x.release_nonnull(), repeat_y.release_nonnull(), background_attachment.release_nonnull());
if (!background_origin && !background_clip) {
background_origin = property_initial_value(PropertyID::BackgroundOrigin);
background_clip = property_initial_value(PropertyID::BackgroundClip);
} else if (!background_clip) {
background_clip = background_origin;
}
return BackgroundStyleValue::create(
background_color.release_nonnull(),
background_image.release_nonnull(),
background_position.release_nonnull(),
repeat_x.release_nonnull(), repeat_y.release_nonnull(),
background_attachment.release_nonnull(),
background_origin.release_nonnull(),
background_clip.release_nonnull());
}
RefPtr<StyleValue> Parser::parse_background_image_value(ParsingContext const& context, Vector<StyleComponentValueRule> const& component_values)

18
Userland/Libraries/LibWeb/CSS/Properties.json
View file

@ -20,6 +20,15 @@
"scroll"
]
},
"background-clip": {
"inherited": false,
"initial": "border-box",
"valid-identifiers": [
"border-box",
"content-box",
"padding-box"
]
},
"background-color": {
"inherited": false,
"initial": "transparent",
@ -40,6 +49,15 @@
"none"
]
},
"background-origin": {
"inherited": false,
"initial": "padding-box",
"valid-identifiers": [
"border-box",
"content-box",
"padding-box"
]
},
"background-position": {
"inherited": false,
"initial": "0% 0%",

6
Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
View file

@ -676,6 +676,8 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
auto maybe_background_repeat_x = property(CSS::PropertyID::BackgroundRepeatX);
auto maybe_background_repeat_y = property(CSS::PropertyID::BackgroundRepeatY);
auto maybe_background_attachment = property(CSS::PropertyID::BackgroundAttachment);
auto maybe_background_origin = property(CSS::PropertyID::BackgroundOrigin);
auto maybe_background_clip = property(CSS::PropertyID::BackgroundClip);
return BackgroundStyleValue::create(
value_or_default(maybe_background_color, InitialStyleValue::the()),
@ -683,7 +685,9 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
value_or_default(maybe_background_position, PositionStyleValue::create(PositionEdge::Left, Length::make_px(0), PositionEdge::Top, Length::make_px(0))),
value_or_default(maybe_background_repeat_x, IdentifierStyleValue::create(CSS::ValueID::RepeatX)),
value_or_default(maybe_background_repeat_y, IdentifierStyleValue::create(CSS::ValueID::RepeatX)),
value_or_default(maybe_background_attachment, IdentifierStyleValue::create(CSS::ValueID::Scroll)));
value_or_default(maybe_background_attachment, IdentifierStyleValue::create(CSS::ValueID::Scroll)),
value_or_default(maybe_background_origin, IdentifierStyleValue::create(CSS::ValueID::PaddingBox)),
value_or_default(maybe_background_clip, IdentifierStyleValue::create(CSS::ValueID::BorderBox)));
}
case CSS::PropertyID::ListStyleType:
return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().list_style_type()));

34
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -305,6 +305,8 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, background.repeat_x(), document, true);
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, background.repeat_y(), document, true);
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundAttachment, background.attachment(), document);
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundOrigin, background.origin(), document);
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundClip, background.clip(), document);
};
if (value.is_background()) {
@ -329,6 +331,8 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, value, document, true);
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, value, document, true);
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundAttachment, value, document);
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundOrigin, value, document);
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundClip, value, document);
return;
}
@ -347,6 +351,21 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
return;
}
if (property_id == CSS::PropertyID::BackgroundClip) {
if (value.is_value_list()) {
auto& background_clip_list = value.as_value_list().values();
// FIXME: Handle multiple backgrounds.
if (!background_clip_list.is_empty()) {
auto& background_clip = background_clip_list.first();
style.set_property(CSS::PropertyID::BackgroundClip, background_clip);
}
return;
}
style.set_property(CSS::PropertyID::BackgroundClip, value);
return;
}
if (property_id == CSS::PropertyID::BackgroundImage) {
if (value.is_value_list()) {
auto& background_image_list = value.as_value_list().values();
@ -362,6 +381,21 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
return;
}
if (property_id == CSS::PropertyID::BackgroundOrigin) {
if (value.is_value_list()) {
auto& background_origin_list = value.as_value_list().values();
// FIXME: Handle multiple backgrounds.
if (!background_origin_list.is_empty()) {
auto& background_origin = background_origin_list.first();
style.set_property(CSS::PropertyID::BackgroundOrigin, background_origin);
}
return;
}
style.set_property(CSS::PropertyID::BackgroundOrigin, value);
return;
}
if (property_id == CSS::PropertyID::BackgroundPosition) {
if (value.is_value_list()) {
auto& background_position_list = value.as_value_list().values();

20
Userland/Libraries/LibWeb/CSS/StyleValue.h
View file

@ -380,22 +380,26 @@ public:
NonnullRefPtr<StyleValue> position,
NonnullRefPtr<StyleValue> repeat_x,
NonnullRefPtr<StyleValue> repeat_y,
NonnullRefPtr<StyleValue> attachment)
NonnullRefPtr<StyleValue> attachment,
NonnullRefPtr<StyleValue> origin,
NonnullRefPtr<StyleValue> clip)
{
return adopt_ref(*new BackgroundStyleValue(color, image, position, repeat_x, repeat_y, attachment));
return adopt_ref(*new BackgroundStyleValue(color, image, position, repeat_x, repeat_y, attachment, origin, clip));
}
virtual ~BackgroundStyleValue() override { }
NonnullRefPtr<StyleValue> attachment() const { return m_attachment; }
NonnullRefPtr<StyleValue> clip() const { return m_clip; }
NonnullRefPtr<StyleValue> color() const { return m_color; }
NonnullRefPtr<StyleValue> image() const { return m_image; }
NonnullRefPtr<StyleValue> origin() const { return m_origin; }
NonnullRefPtr<StyleValue> position() const { return m_position; }
NonnullRefPtr<StyleValue> repeat_x() const { return m_repeat_x; }
NonnullRefPtr<StyleValue> repeat_y() const { return m_repeat_y; }
virtual String to_string() const override
{
return String::formatted("{} {} {} {} {} {}", m_color->to_string(), m_image->to_string(), m_position->to_string(), m_repeat_x->to_string(), m_repeat_y->to_string(), m_attachment->to_string());
return String::formatted("{} {} {} {} {} {} {} {}", m_color->to_string(), m_image->to_string(), m_position->to_string(), m_repeat_x->to_string(), m_repeat_y->to_string(), m_attachment->to_string(), m_origin->to_string(), m_clip->to_string());
}
private:
@ -405,7 +409,9 @@ private:
NonnullRefPtr<StyleValue> position,
NonnullRefPtr<StyleValue> repeat_x,
NonnullRefPtr<StyleValue> repeat_y,
NonnullRefPtr<StyleValue> attachment)
NonnullRefPtr<StyleValue> attachment,
NonnullRefPtr<StyleValue> origin,
NonnullRefPtr<StyleValue> clip)
: StyleValue(Type::Background)
, m_color(color)
, m_image(image)
@ -413,6 +419,8 @@ private:
, m_repeat_x(repeat_x)
, m_repeat_y(repeat_y)
, m_attachment(attachment)
, m_origin(origin)
, m_clip(clip)
{
}
NonnullRefPtr<StyleValue> m_color;
@ -422,8 +430,8 @@ private:
NonnullRefPtr<StyleValue> m_repeat_x;
NonnullRefPtr<StyleValue> m_repeat_y;
NonnullRefPtr<StyleValue> m_attachment;
// FIXME: background-clip
// FIXME: background-origin
NonnullRefPtr<StyleValue> m_origin;
NonnullRefPtr<StyleValue> m_clip;
};
class PositionStyleValue final : public StyleValue {