mirror of
https://github.com/RGBCube/serenity
synced 2025-07-24 19:27: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:
parent
5d0acb63ae
commit
1e53768f1b
10 changed files with 52 additions and 105 deletions
|
@ -65,6 +65,11 @@ struct BoxShadowData {
|
||||||
Color color {};
|
Color color {};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
struct BackgroundRepeatData {
|
||||||
|
CSS::Repeat repeat_x;
|
||||||
|
CSS::Repeat repeat_y;
|
||||||
|
};
|
||||||
|
|
||||||
class ComputedValues {
|
class ComputedValues {
|
||||||
public:
|
public:
|
||||||
CSS::Float float_() const { return m_noninherited.float_; }
|
CSS::Float float_() const { return m_noninherited.float_; }
|
||||||
|
@ -114,8 +119,7 @@ public:
|
||||||
|
|
||||||
Color color() const { return m_inherited.color; }
|
Color color() const { return m_inherited.color; }
|
||||||
Color background_color() const { return m_noninherited.background_color; }
|
Color background_color() const { return m_noninherited.background_color; }
|
||||||
CSS::Repeat background_repeat_x() const { return m_noninherited.background_repeat_x; }
|
BackgroundRepeatData background_repeat() const { return m_noninherited.background_repeat; }
|
||||||
CSS::Repeat background_repeat_y() const { return m_noninherited.background_repeat_y; }
|
|
||||||
|
|
||||||
CSS::ListStyleType list_style_type() const { return m_inherited.list_style_type; }
|
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_left_radius;
|
||||||
Length border_top_right_radius;
|
Length border_top_right_radius;
|
||||||
Color background_color { InitialValues::background_color() };
|
Color background_color { InitialValues::background_color() };
|
||||||
CSS::Repeat background_repeat_x { InitialValues::background_repeat() };
|
BackgroundRepeatData background_repeat { InitialValues::background_repeat(), InitialValues::background_repeat() };
|
||||||
CSS::Repeat background_repeat_y { InitialValues::background_repeat() };
|
|
||||||
CSS::FlexDirection flex_direction { InitialValues::flex_direction() };
|
CSS::FlexDirection flex_direction { InitialValues::flex_direction() };
|
||||||
CSS::FlexWrap flex_wrap { InitialValues::flex_wrap() };
|
CSS::FlexWrap flex_wrap { InitialValues::flex_wrap() };
|
||||||
CSS::FlexBasisData flex_basis {};
|
CSS::FlexBasisData flex_basis {};
|
||||||
|
@ -199,8 +202,7 @@ public:
|
||||||
void set_cursor(CSS::Cursor cursor) { m_inherited.cursor = cursor; }
|
void set_cursor(CSS::Cursor cursor) { m_inherited.cursor = cursor; }
|
||||||
void set_pointer_events(CSS::PointerEvents value) { m_inherited.pointer_events = value; }
|
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_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(BackgroundRepeatData repeat) { m_noninherited.background_repeat = repeat; }
|
||||||
void set_background_repeat_y(CSS::Repeat repeat) { m_noninherited.background_repeat_y = repeat; }
|
|
||||||
void set_float(CSS::Float value) { m_noninherited.float_ = value; }
|
void set_float(CSS::Float value) { m_noninherited.float_ = value; }
|
||||||
void set_clear(CSS::Clear value) { m_noninherited.clear = value; }
|
void set_clear(CSS::Clear value) { m_noninherited.clear = value; }
|
||||||
void set_z_index(Optional<int> value) { m_noninherited.z_index = value; }
|
void set_z_index(Optional<int> value) { m_noninherited.z_index = value; }
|
||||||
|
|
|
@ -78,6 +78,7 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"background-repeat": {
|
"background-repeat": {
|
||||||
|
"inherited": false,
|
||||||
"initial": "repeat",
|
"initial": "repeat",
|
||||||
"max-values": 2,
|
"max-values": 2,
|
||||||
"valid-identifiers": [
|
"valid-identifiers": [
|
||||||
|
@ -87,22 +88,8 @@
|
||||||
"repeat-y",
|
"repeat-y",
|
||||||
"round",
|
"round",
|
||||||
"space"
|
"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": {
|
"border": {
|
||||||
"longhands": [
|
"longhands": [
|
||||||
"border-width",
|
"border-width",
|
||||||
|
|
|
@ -660,15 +660,10 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
|
||||||
return ColorStyleValue::create(layout_node.computed_values().color());
|
return ColorStyleValue::create(layout_node.computed_values().color());
|
||||||
case PropertyID::BackgroundColor:
|
case PropertyID::BackgroundColor:
|
||||||
return ColorStyleValue::create(layout_node.computed_values().background_color());
|
return ColorStyleValue::create(layout_node.computed_values().background_color());
|
||||||
case CSS::PropertyID::BackgroundRepeatX:
|
case CSS::PropertyID::BackgroundRepeat:
|
||||||
return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat_x()));
|
return BackgroundRepeatStyleValue::create(
|
||||||
case CSS::PropertyID::BackgroundRepeatY:
|
IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat().repeat_x)),
|
||||||
return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat_y()));
|
IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat().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::Background: {
|
case CSS::PropertyID::Background: {
|
||||||
auto maybe_background_color = property(CSS::PropertyID::BackgroundColor);
|
auto maybe_background_color = property(CSS::PropertyID::BackgroundColor);
|
||||||
auto maybe_background_image = property(CSS::PropertyID::BackgroundImage);
|
auto maybe_background_image = property(CSS::PropertyID::BackgroundImage);
|
||||||
|
|
|
@ -414,33 +414,12 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
|
||||||
auto& background_repeat_list = value.as_value_list().values();
|
auto& background_repeat_list = value.as_value_list().values();
|
||||||
// FIXME: Handle multiple backgrounds.
|
// FIXME: Handle multiple backgrounds.
|
||||||
if (!background_repeat_list.is_empty()) {
|
if (!background_repeat_list.is_empty()) {
|
||||||
auto& maybe_background_repeat = background_repeat_list.first();
|
auto& background_repeat = background_repeat_list.first();
|
||||||
if (maybe_background_repeat.is_background_repeat()) {
|
style.set_property(CSS::PropertyID::BackgroundRepeat, 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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (value.is_background_repeat()) {
|
style.set_property(CSS::PropertyID::BackgroundRepeat, value);
|
||||||
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);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
auto value = property(CSS::PropertyID::BackgroundRepeat);
|
||||||
if (!value.has_value())
|
if (!value.has_value() || !value.value()->is_background_repeat())
|
||||||
return {};
|
return {};
|
||||||
switch (value.value()->to_identifier()) {
|
auto& background_repeat = value.value()->as_background_repeat();
|
||||||
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 {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Optional<CSS::Repeat> StyleProperties::background_repeat_y() const
|
auto to_repeat = [](auto value) -> Optional<CSS::Repeat> {
|
||||||
{
|
switch (value->to_identifier()) {
|
||||||
auto value = property(CSS::PropertyID::BackgroundRepeatY);
|
case CSS::ValueID::NoRepeat:
|
||||||
if (!value.has_value())
|
return CSS::Repeat::NoRepeat;
|
||||||
return {};
|
case CSS::ValueID::Repeat:
|
||||||
switch (value.value()->to_identifier()) {
|
return CSS::Repeat::Repeat;
|
||||||
case CSS::ValueID::NoRepeat:
|
case CSS::ValueID::Round:
|
||||||
return CSS::Repeat::NoRepeat;
|
return CSS::Repeat::Round;
|
||||||
case CSS::ValueID::Repeat:
|
case CSS::ValueID::Space:
|
||||||
return CSS::Repeat::Repeat;
|
return CSS::Repeat::Space;
|
||||||
case CSS::ValueID::Round:
|
default:
|
||||||
return CSS::Repeat::Round;
|
return {};
|
||||||
case CSS::ValueID::Space:
|
}
|
||||||
return CSS::Repeat::Space;
|
};
|
||||||
default:
|
auto repeat_x = to_repeat(background_repeat.repeat_x());
|
||||||
return {};
|
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
|
Optional<CSS::BoxShadowData> StyleProperties::box_shadow() const
|
||||||
|
|
|
@ -62,8 +62,7 @@ public:
|
||||||
Optional<CSS::JustifyContent> justify_content() const;
|
Optional<CSS::JustifyContent> justify_content() const;
|
||||||
Optional<CSS::Overflow> overflow_x() const;
|
Optional<CSS::Overflow> overflow_x() const;
|
||||||
Optional<CSS::Overflow> overflow_y() const;
|
Optional<CSS::Overflow> overflow_y() const;
|
||||||
Optional<CSS::Repeat> background_repeat_x() const;
|
Optional<BackgroundRepeatData> background_repeat() const;
|
||||||
Optional<CSS::Repeat> background_repeat_y() const;
|
|
||||||
Optional<CSS::BoxShadowData> box_shadow() const;
|
Optional<CSS::BoxShadowData> box_shadow() const;
|
||||||
CSS::BoxSizing box_sizing() const;
|
CSS::BoxSizing box_sizing() const;
|
||||||
Optional<CSS::PointerEvents> pointer_events() const;
|
Optional<CSS::PointerEvents> pointer_events() const;
|
||||||
|
|
|
@ -379,7 +379,7 @@ CSS::Repeat Document::background_repeat_x() const
|
||||||
if (!body_layout_node)
|
if (!body_layout_node)
|
||||||
return CSS::Repeat::Repeat;
|
return CSS::Repeat::Repeat;
|
||||||
|
|
||||||
return body_layout_node->computed_values().background_repeat_x();
|
return body_layout_node->computed_values().background_repeat().repeat_x;
|
||||||
}
|
}
|
||||||
|
|
||||||
CSS::Repeat Document::background_repeat_y() const
|
CSS::Repeat Document::background_repeat_y() const
|
||||||
|
@ -392,7 +392,7 @@ CSS::Repeat Document::background_repeat_y() const
|
||||||
if (!body_layout_node)
|
if (!body_layout_node)
|
||||||
return CSS::Repeat::Repeat;
|
return CSS::Repeat::Repeat;
|
||||||
|
|
||||||
return body_layout_node->computed_values().background_repeat_y();
|
return body_layout_node->computed_values().background_repeat().repeat_y;
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://html.spec.whatwg.org/multipage/urls-and-fetching.html#parse-a-url
|
// https://html.spec.whatwg.org/multipage/urls-and-fetching.html#parse-a-url
|
||||||
|
|
|
@ -73,8 +73,7 @@ void Box::paint_background(PaintContext& context)
|
||||||
Gfx::IntRect background_rect;
|
Gfx::IntRect background_rect;
|
||||||
Color background_color = computed_values().background_color();
|
Color background_color = computed_values().background_color();
|
||||||
const Gfx::Bitmap* background_image = this->background_image() ? this->background_image()->bitmap() : nullptr;
|
const Gfx::Bitmap* background_image = this->background_image() ? this->background_image()->bitmap() : nullptr;
|
||||||
CSS::Repeat background_repeat_x = computed_values().background_repeat_x();
|
CSS::BackgroundRepeatData background_repeat = computed_values().background_repeat();
|
||||||
CSS::Repeat background_repeat_y = computed_values().background_repeat_y();
|
|
||||||
|
|
||||||
if (is_root_element()) {
|
if (is_root_element()) {
|
||||||
// CSS 2.1 Appendix E.2: If the element is a root element, paint the background over the entire canvas.
|
// CSS 2.1 Appendix E.2: If the element is a root element, paint the background over the entire canvas.
|
||||||
|
@ -85,8 +84,7 @@ void Box::paint_background(PaintContext& context)
|
||||||
if (document().html_element()->should_use_body_background_properties()) {
|
if (document().html_element()->should_use_body_background_properties()) {
|
||||||
background_color = document().background_color(context.palette());
|
background_color = document().background_color(context.palette());
|
||||||
background_image = document().background_image();
|
background_image = document().background_image();
|
||||||
background_repeat_x = document().background_repeat_x();
|
background_repeat = { document().background_repeat_x(), document().background_repeat_y() };
|
||||||
background_repeat_y = document().background_repeat_y();
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
background_rect = enclosing_int_rect(padded_rect());
|
background_rect = enclosing_int_rect(padded_rect());
|
||||||
|
@ -100,8 +98,8 @@ void Box::paint_background(PaintContext& context)
|
||||||
auto background_data = Painting::BackgroundData {
|
auto background_data = Painting::BackgroundData {
|
||||||
.color = background_color,
|
.color = background_color,
|
||||||
.image = background_image,
|
.image = background_image,
|
||||||
.repeat_x = background_repeat_x,
|
.repeat_x = background_repeat.repeat_x,
|
||||||
.repeat_y = background_repeat_y
|
.repeat_y = background_repeat.repeat_y
|
||||||
};
|
};
|
||||||
Painting::paint_background(context, background_rect, background_data, normalized_border_radius_data());
|
Painting::paint_background(context, background_rect, background_data, normalized_border_radius_data());
|
||||||
}
|
}
|
||||||
|
|
|
@ -52,8 +52,8 @@ void InlineNode::paint(PaintContext& context, PaintPhase phase)
|
||||||
auto background_data = Painting::BackgroundData {
|
auto background_data = Painting::BackgroundData {
|
||||||
.color = computed_values().background_color(),
|
.color = computed_values().background_color(),
|
||||||
.image = background_image() ? background_image()->bitmap() : nullptr,
|
.image = background_image() ? background_image()->bitmap() : nullptr,
|
||||||
.repeat_x = computed_values().background_repeat_x(),
|
.repeat_x = computed_values().background_repeat().repeat_x,
|
||||||
.repeat_y = computed_values().background_repeat_y()
|
.repeat_y = computed_values().background_repeat().repeat_y
|
||||||
};
|
};
|
||||||
|
|
||||||
auto top_left_border_radius = computed_values().border_top_left_radius();
|
auto top_left_border_radius = computed_values().border_top_left_radius();
|
||||||
|
|
|
@ -240,13 +240,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
|
||||||
if (border_top_right_radius.has_value())
|
if (border_top_right_radius.has_value())
|
||||||
computed_values.set_border_top_right_radius(border_top_right_radius.value()->to_length());
|
computed_values.set_border_top_right_radius(border_top_right_radius.value()->to_length());
|
||||||
|
|
||||||
auto background_repeat_x = specified_style.background_repeat_x();
|
auto background_repeat = specified_style.background_repeat();
|
||||||
if (background_repeat_x.has_value())
|
if (background_repeat.has_value())
|
||||||
computed_values.set_background_repeat_x(background_repeat_x.value());
|
computed_values.set_background_repeat(background_repeat.value());
|
||||||
|
|
||||||
auto background_repeat_y = specified_style.background_repeat_y();
|
|
||||||
if (background_repeat_y.has_value())
|
|
||||||
computed_values.set_background_repeat_y(background_repeat_y.value());
|
|
||||||
|
|
||||||
computed_values.set_display(specified_style.display());
|
computed_values.set_display(specified_style.display());
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue