1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 04:47:35 +00:00

LibWeb: Combine background-repeat-x/y pseudo-properties

While right now this doesn't save much complexity, it will do once we
care about multiple background layers per node. Then, having a single
repeat value per layer will simplify things.

It also means we can remove the pseudo-property concept entirely! :^)
This commit is contained in:
Sam Atkins 2021-11-04 16:51:34 +00:00 committed by Andreas Kling
parent 5d0acb63ae
commit 1e53768f1b
10 changed files with 52 additions and 105 deletions

View file

@ -65,6 +65,11 @@ struct BoxShadowData {
Color color {};
};
struct BackgroundRepeatData {
CSS::Repeat repeat_x;
CSS::Repeat repeat_y;
};
class ComputedValues {
public:
CSS::Float float_() const { return m_noninherited.float_; }
@ -114,8 +119,7 @@ public:
Color color() const { return m_inherited.color; }
Color background_color() const { return m_noninherited.background_color; }
CSS::Repeat background_repeat_x() const { return m_noninherited.background_repeat_x; }
CSS::Repeat background_repeat_y() const { return m_noninherited.background_repeat_y; }
BackgroundRepeatData background_repeat() const { return m_noninherited.background_repeat; }
CSS::ListStyleType list_style_type() const { return m_inherited.list_style_type; }
@ -172,8 +176,7 @@ protected:
Length border_top_left_radius;
Length border_top_right_radius;
Color background_color { InitialValues::background_color() };
CSS::Repeat background_repeat_x { InitialValues::background_repeat() };
CSS::Repeat background_repeat_y { InitialValues::background_repeat() };
BackgroundRepeatData background_repeat { InitialValues::background_repeat(), InitialValues::background_repeat() };
CSS::FlexDirection flex_direction { InitialValues::flex_direction() };
CSS::FlexWrap flex_wrap { InitialValues::flex_wrap() };
CSS::FlexBasisData flex_basis {};
@ -199,8 +202,7 @@ public:
void set_cursor(CSS::Cursor cursor) { m_inherited.cursor = cursor; }
void set_pointer_events(CSS::PointerEvents value) { m_inherited.pointer_events = value; }
void set_background_color(const Color& color) { m_noninherited.background_color = color; }
void set_background_repeat_x(CSS::Repeat repeat) { m_noninherited.background_repeat_x = repeat; }
void set_background_repeat_y(CSS::Repeat repeat) { m_noninherited.background_repeat_y = repeat; }
void set_background_repeat(BackgroundRepeatData repeat) { m_noninherited.background_repeat = repeat; }
void set_float(CSS::Float value) { m_noninherited.float_ = value; }
void set_clear(CSS::Clear value) { m_noninherited.clear = value; }
void set_z_index(Optional<int> value) { m_noninherited.z_index = value; }

View file

@ -78,6 +78,7 @@
]
},
"background-repeat": {
"inherited": false,
"initial": "repeat",
"max-values": 2,
"valid-identifiers": [
@ -87,22 +88,8 @@
"repeat-y",
"round",
"space"
],
"longhands": [
"background-repeat-x",
"background-repeat-y"
]
},
"background-repeat-x": {
"inherited": false,
"initial": "repeat",
"pseudo": true
},
"background-repeat-y": {
"inherited": false,
"initial": "repeat",
"pseudo": true
},
"border": {
"longhands": [
"border-width",

View file

@ -660,15 +660,10 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
return ColorStyleValue::create(layout_node.computed_values().color());
case PropertyID::BackgroundColor:
return ColorStyleValue::create(layout_node.computed_values().background_color());
case CSS::PropertyID::BackgroundRepeatX:
return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat_x()));
case CSS::PropertyID::BackgroundRepeatY:
return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat_y()));
case CSS::PropertyID::BackgroundRepeat: {
auto maybe_background_repeat_x = property(CSS::PropertyID::BackgroundRepeatX);
auto maybe_background_repeat_y = property(CSS::PropertyID::BackgroundRepeatY);
return BackgroundRepeatStyleValue::create(value_or_default(maybe_background_repeat_x, IdentifierStyleValue::create(CSS::ValueID::RepeatX)), value_or_default(maybe_background_repeat_y, IdentifierStyleValue::create(CSS::ValueID::RepeatY)));
}
case CSS::PropertyID::BackgroundRepeat:
return BackgroundRepeatStyleValue::create(
IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat().repeat_x)),
IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat().repeat_y)));
case CSS::PropertyID::Background: {
auto maybe_background_color = property(CSS::PropertyID::BackgroundColor);
auto maybe_background_image = property(CSS::PropertyID::BackgroundImage);

View file

@ -414,33 +414,12 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
auto& background_repeat_list = value.as_value_list().values();
// FIXME: Handle multiple backgrounds.
if (!background_repeat_list.is_empty()) {
auto& maybe_background_repeat = background_repeat_list.first();
if (maybe_background_repeat.is_background_repeat()) {
auto& background_repeat = maybe_background_repeat.as_background_repeat();
set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, background_repeat.repeat_x(), document, true);
set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, background_repeat.repeat_y(), document, true);
}
auto& background_repeat = background_repeat_list.first();
style.set_property(CSS::PropertyID::BackgroundRepeat, background_repeat);
}
return;
}
if (value.is_background_repeat()) {
auto& background_repeat = value.as_background_repeat();
set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, background_repeat.repeat_x(), document, true);
set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, background_repeat.repeat_y(), document, true);
return;
}
set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, value, document, true);
set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, value, document, true);
return;
}
if (property_id == CSS::PropertyID::BackgroundRepeatX || property_id == CSS::PropertyID::BackgroundRepeatY) {
auto value_id = value.to_identifier();
if (value_id == CSS::ValueID::RepeatX || value_id == CSS::ValueID::RepeatY)
return;
style.set_property(property_id, value);
style.set_property(CSS::PropertyID::BackgroundRepeat, value);
return;
}

View file

@ -688,42 +688,33 @@ Optional<CSS::Overflow> StyleProperties::overflow(CSS::PropertyID property_id) c
}
}
Optional<CSS::Repeat> StyleProperties::background_repeat_x() const
Optional<BackgroundRepeatData> StyleProperties::background_repeat() const
{
auto value = property(CSS::PropertyID::BackgroundRepeatX);
if (!value.has_value())
auto value = property(CSS::PropertyID::BackgroundRepeat);
if (!value.has_value() || !value.value()->is_background_repeat())
return {};
switch (value.value()->to_identifier()) {
case CSS::ValueID::NoRepeat:
return CSS::Repeat::NoRepeat;
case CSS::ValueID::Repeat:
return CSS::Repeat::Repeat;
case CSS::ValueID::Round:
return CSS::Repeat::Round;
case CSS::ValueID::Space:
return CSS::Repeat::Space;
default:
return {};
}
}
auto& background_repeat = value.value()->as_background_repeat();
Optional<CSS::Repeat> StyleProperties::background_repeat_y() const
{
auto value = property(CSS::PropertyID::BackgroundRepeatY);
if (!value.has_value())
return {};
switch (value.value()->to_identifier()) {
case CSS::ValueID::NoRepeat:
return CSS::Repeat::NoRepeat;
case CSS::ValueID::Repeat:
return CSS::Repeat::Repeat;
case CSS::ValueID::Round:
return CSS::Repeat::Round;
case CSS::ValueID::Space:
return CSS::Repeat::Space;
default:
return {};
}
auto to_repeat = [](auto value) -> Optional<CSS::Repeat> {
switch (value->to_identifier()) {
case CSS::ValueID::NoRepeat:
return CSS::Repeat::NoRepeat;
case CSS::ValueID::Repeat:
return CSS::Repeat::Repeat;
case CSS::ValueID::Round:
return CSS::Repeat::Round;
case CSS::ValueID::Space:
return CSS::Repeat::Space;
default:
return {};
}
};
auto repeat_x = to_repeat(background_repeat.repeat_x());
auto repeat_y = to_repeat(background_repeat.repeat_y());
if (repeat_x.has_value() && repeat_y.has_value())
return BackgroundRepeatData { repeat_x.value(), repeat_y.value() };
return {};
}
Optional<CSS::BoxShadowData> StyleProperties::box_shadow() const

View file

@ -62,8 +62,7 @@ public:
Optional<CSS::JustifyContent> justify_content() const;
Optional<CSS::Overflow> overflow_x() const;
Optional<CSS::Overflow> overflow_y() const;
Optional<CSS::Repeat> background_repeat_x() const;
Optional<CSS::Repeat> background_repeat_y() const;
Optional<BackgroundRepeatData> background_repeat() const;
Optional<CSS::BoxShadowData> box_shadow() const;
CSS::BoxSizing box_sizing() const;
Optional<CSS::PointerEvents> pointer_events() const;