RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 20:07:36 +00:00
Code Issues Activity Actions

LibWeb: Render any specified list-style-image for list items

Browse source
This commit is contained in:
Timothy Flynn 2021-10-29 09:00:30 -04:00 • committed by Andreas Kling
parent eb0fb38cac
commit ef62118c8b
5 changed files with 37 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Userland/Libraries/LibWeb/Layout/ListItemBox.cpp
View file

@ -40,7 +40,9 @@ void ListItemBox::layout_marker()
} }
m_marker->set_offset(-(m_marker->width() + 4), 0); m_marker->set_offset(-(m_marker->width() + 4), 0);
m_marker->set_height(line_height());
if (m_marker->height() > height())
set_height(m_marker->height());
} }
} }

29
Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp
View file

@ -49,13 +49,21 @@ ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType
VERIFY_NOT_REACHED(); VERIFY_NOT_REACHED();
} }
if (m_text.is_null()) { int image_width = 0;
set_width(4); int image_height = 0;
return; if (auto const* list_style_image = list_style_image_bitmap()) {
image_width = list_style_image->rect().width();
image_height = list_style_image->rect().height();
} }
if (m_text.is_null()) {
set_width(image_width + 4);
} else {
auto text_width = font().width(m_text); auto text_width = font().width(m_text);
set_width(text_width); set_width(image_width + text_width);
}
set_height(max(image_height, line_height()));
} }
ListItemMarkerBox::~ListItemMarkerBox() ListItemMarkerBox::~ListItemMarkerBox()
@ -67,10 +75,16 @@ void ListItemMarkerBox::paint(PaintContext& context, PaintPhase phase)
if (phase != PaintPhase::Foreground) if (phase != PaintPhase::Foreground)
return; return;
auto enclosing = enclosing_int_rect(absolute_rect());
if (auto const* list_style_image = list_style_image_bitmap()) {
context.painter().blit(enclosing.location(), *list_style_image, list_style_image->rect());
return;
}
// FIXME: It would be nicer to not have to go via the parent here to get our inherited style. // FIXME: It would be nicer to not have to go via the parent here to get our inherited style.
auto color = parent()->computed_values().color(); auto color = parent()->computed_values().color();
auto enclosing = enclosing_int_rect(absolute_rect());
int marker_width = (int)enclosing.height() / 2; int marker_width = (int)enclosing.height() / 2;
Gfx::IntRect marker_rect { 0, 0, marker_width, marker_width }; Gfx::IntRect marker_rect { 0, 0, marker_width, marker_width };
marker_rect.center_within(enclosing); marker_rect.center_within(enclosing);
@ -110,4 +124,9 @@ void ListItemMarkerBox::paint(PaintContext& context, PaintPhase phase)
} }
} }
Gfx::Bitmap const* ListItemMarkerBox::list_style_image_bitmap() const
{
return list_style_image() ? list_style_image()->bitmap() : nullptr;
}
} }

1
Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.h
View file

@ -20,6 +20,7 @@ public:
private: private:
virtual bool can_have_children() const override { return false; } virtual bool can_have_children() const override { return false; }
Gfx::Bitmap const* list_style_image_bitmap() const;
CSS::ListStyleType m_list_style_type { CSS::ListStyleType::None }; CSS::ListStyleType m_list_style_type { CSS::ListStyleType::None };
size_t m_index; size_t m_index;

6
Userland/Libraries/LibWeb/Layout/Node.cpp
View file

@ -320,6 +320,12 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
if (auto list_style_type = specified_style.list_style_type(); list_style_type.has_value()) if (auto list_style_type = specified_style.list_style_type(); list_style_type.has_value())
computed_values.set_list_style_type(list_style_type.value()); computed_values.set_list_style_type(list_style_type.value());
auto list_style_image = specified_style.property(CSS::PropertyID::ListStyleImage);
if (list_style_image.has_value() && list_style_image.value()->is_image()) {
m_list_style_image = list_style_image.value()->as_image();
m_list_style_image->load_bitmap(document());
}
computed_values.set_color(specified_style.color_or_fallback(CSS::PropertyID::Color, *this, CSS::InitialValues::color())); computed_values.set_color(specified_style.color_or_fallback(CSS::PropertyID::Color, *this, CSS::InitialValues::color()));
computed_values.set_background_color(specified_style.color_or_fallback(CSS::PropertyID::BackgroundColor, *this, CSS::InitialValues::background_color())); computed_values.set_background_color(specified_style.color_or_fallback(CSS::PropertyID::BackgroundColor, *this, CSS::InitialValues::background_color()));

2
Userland/Libraries/LibWeb/Layout/Node.h
View file

@ -206,6 +206,7 @@ public:
float line_height() const { return m_line_height; } float line_height() const { return m_line_height; }
float font_size() const { return m_font_size; } float font_size() const { return m_font_size; }
const CSS::ImageStyleValue* background_image() const { return m_background_image; } const CSS::ImageStyleValue* background_image() const { return m_background_image; }
const CSS::ImageStyleValue* list_style_image() const { return m_list_style_image; }
NonnullRefPtr<NodeWithStyle> create_anonymous_wrapper() const; NonnullRefPtr<NodeWithStyle> create_anonymous_wrapper() const;
@ -222,6 +223,7 @@ private:
float m_line_height { 0 }; float m_line_height { 0 };
float m_font_size { 0 }; float m_font_size { 0 };
RefPtr<CSS::ImageStyleValue> m_background_image; RefPtr<CSS::ImageStyleValue> m_background_image;
RefPtr<CSS::ImageStyleValue> m_list_style_image;
bool m_has_definite_height { false }; bool m_has_definite_height { false };
bool m_has_definite_width { false }; bool m_has_definite_width { false };