RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-26 01:55:08 +00:00
Code Issues Activity Actions

LibHTML: Implement basic border rendering

Browse source 
We currently assume the border-style is solid, and simply draw a box
around the padded LayoutNode rect. :^)
This commit is contained in:
Andreas Kling 2019-10-01 20:31:56 +02:00
parent 7573e3c46d
commit 53fae2af4f
1 changed files with 17 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

24
Libraries/LibHTML/Layout/LayoutNode.cpp
View file

@ -43,16 +43,26 @@ void LayoutNode::render(RenderingContext& context)
context.painter().draw_rect(m_rect, Color::Red); context.painter().draw_rect(m_rect, Color::Red);
#endif #endif
Rect padded_rect;
padded_rect.set_x(rect().x() - style().padding().left.to_px());
padded_rect.set_width(rect().width() + style().padding().left.to_px() + style().padding().right.to_px());
padded_rect.set_y(rect().y() - style().padding().top.to_px());
padded_rect.set_height(rect().height() + style().padding().top.to_px() + style().padding().bottom.to_px());
auto bgcolor = style_properties().property("background-color"); auto bgcolor = style_properties().property("background-color");
if (bgcolor.has_value() && bgcolor.value()->is_color()) { if (bgcolor.has_value() && bgcolor.value()->is_color()) {
context.painter().fill_rect(padded_rect, bgcolor.value()->to_color());
}
Rect background_rect; auto border_width_value = style_properties().property("border-width");
background_rect.set_x(rect().x() - style().padding().left.to_px()); auto border_color_value = style_properties().property("border-color");
background_rect.set_width(rect().width() + style().padding().left.to_px() + style().padding().right.to_px()); if (border_width_value.has_value() && border_color_value.has_value()) {
background_rect.set_y(rect().y() - style().padding().top.to_px()); int border_width = border_width_value.value()->to_length().to_px();
background_rect.set_height(rect().height() + style().padding().top.to_px() + style().padding().bottom.to_px()); Color border_color = border_color_value.value()->to_color();
context.painter().draw_line(padded_rect.top_left(), padded_rect.top_right(), border_color, border_width);
context.painter().fill_rect(background_rect, bgcolor.value()->to_color()); context.painter().draw_line(padded_rect.top_right(), padded_rect.bottom_right(), border_color, border_width);
context.painter().draw_line(padded_rect.bottom_right(), padded_rect.bottom_left(), border_color, border_width);
context.painter().draw_line(padded_rect.bottom_left(), padded_rect.top_left(), border_color, border_width);
} }
// TODO: render our border // TODO: render our border