mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-22 12:35:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibHTML: Draw each CSS border edge separately with their own style

Browse source 
The borders still look very wrong with any border-width other than 1,
but at least we can see that they have the right color, and end up in
mostly the right place :^)
This commit is contained in:
Andreas Kling 2019-11-25 13:17:14 +01:00
parent 3c8a1ea386
commit 05b1ecf1b1
Notes: sideshowbarker 2024-07-19 11:05:08 +09:00
4 changed files with 114 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
Base/home/anon/www/borders.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS borders lookin' good</title>
<style>
#foo {
border-top-color: red;
border-right-color: lime;
border-bottom-color: blue;
border-left-color: yellow;
border-top-width: 40px;
border-right-width: 30px;
border-bottom-width: 20px;
border-left-width: 10px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
</style>
</head>
<body>
<div id="foo">One day at a time!</div>
</body>
</html>

1
Base/home/anon/www/welcome.html
View file

@ -24,6 +24,7 @@ h1 {
<p>Some small test pages:</p>
<ul>
<li><a href="small.html">small</a></li>
<li><a href="borders.html">borders</a></li>
<li><a href="css.html">css</a></li>
<li><a href="attrselectors.html">attribute selectors</a></li>
<li><a href="lorem.html">lorem ipsum</a></li>

122
Libraries/LibHTML/Layout/LayoutBox.cpp
View file

@ -8,6 +8,75 @@
//#define DRAW_BOXES_AROUND_LAYOUT_NODES
//#define DRAW_BOXES_AROUND_HOVERED_NODES
void LayoutBox::paint_border(RenderingContext& context, Edge edge, const Rect& rect, CSS::PropertyID style_property_id, CSS::PropertyID color_property_id, CSS::PropertyID width_property_id)
{
auto border_width = style().property(width_property_id);
if (!border_width.has_value())
return;
auto border_style = style().property(style_property_id);
float width = border_width.value()->to_length().to_px();
Color color;
auto border_color = style().property(color_property_id);
if (border_color.has_value()) {
color = border_color.value()->to_color(document());
} else {
// FIXME: This is basically CSS "currentColor" which should be handled elsewhere
// in a much more reusable way.
auto current_color = style().property(CSS::PropertyID::Color);
if (current_color.has_value())
color = current_color.value()->to_color(document());
else
color = Color::Black;
}
auto first_point_for_edge = [](Edge edge, const Rect& rect) {
switch (edge) {
case Edge::Top:
return rect.top_left();
case Edge::Right:
return rect.top_right();
case Edge::Bottom:
return rect.bottom_left();
case Edge::Left:
default:
return rect.top_left();
}
};
auto second_point_for_edge = [](Edge edge, const Rect& rect) {
switch (edge) {
case Edge::Top:
return rect.top_right();
case Edge::Right:
return rect.bottom_right();
case Edge::Bottom:
return rect.bottom_right();
case Edge::Left:
default:
return rect.bottom_left();
}
};
auto p1 = first_point_for_edge(edge, rect);
auto p2 = second_point_for_edge(edge, rect);
if (border_style.has_value() && border_style.value()->to_string() == "inset") {
auto top_left_color = Color::from_rgb(0x5a5a5a);
auto bottom_right_color = Color::from_rgb(0x888888);
color = (edge == Edge::Left || edge == Edge::Top) ? top_left_color : bottom_right_color;
} else if (border_style.has_value() && border_style.value()->to_string() == "outset") {
auto top_left_color = Color::from_rgb(0x888888);
auto bottom_right_color = Color::from_rgb(0x5a5a5a);
color = (edge == Edge::Left || edge == Edge::Top) ? top_left_color : bottom_right_color;
} else {
// border-style: solid
}
dbg() << "draw_line(" << p1 << ", " << p2 << ", " << color.to_string() << ", " << (int)width << ")";
context.painter().draw_line(p1, p2, color, width);
}
void LayoutBox::render(RenderingContext& context)
{
if (!is_visible())
@ -45,51 +114,16 @@ void LayoutBox::render(RenderingContext& context)
}
}
// FIXME: Respect all individual border sides
auto border_width_value = style().property(CSS::PropertyID::BorderTopWidth);
auto border_color_value = style().property(CSS::PropertyID::BorderTopColor);
auto border_style_value = style().property(CSS::PropertyID::BorderTopStyle);
Rect bordered_rect;
bordered_rect.set_x(padded_rect.x() - box_model().border().left.to_px());
bordered_rect.set_width(padded_rect.width() + box_model().border().left.to_px() + box_model().border().right.to_px());
bordered_rect.set_y(padded_rect.y() - box_model().border().top.to_px());
bordered_rect.set_height(padded_rect.height() + box_model().border().top.to_px() + box_model().border().bottom.to_px());
if (border_width_value.has_value()) {
float border_width = border_width_value.value()->to_length().to_px();
Color border_color;
if (border_color_value.has_value())
border_color = border_color_value.value()->to_color(document());
else {
// FIXME: This is basically CSS "currentColor" which should be handled elsewhere
// in a much more reusable way.
auto color_value = style().property(CSS::PropertyID::Color);
if (color_value.has_value())
border_color = color_value.value()->to_color(document());
else
border_color = Color::Black;
}
if (border_style_value.has_value() && border_style_value.value()->to_string() == "inset") {
// border-style: inset
auto shadow_color = Color::from_rgb(0x888888);
auto highlight_color = Color::from_rgb(0x5a5a5a);
context.painter().draw_line(padded_rect.top_left(), padded_rect.top_right(), highlight_color, border_width);
context.painter().draw_line(padded_rect.top_right(), padded_rect.bottom_right(), shadow_color, border_width);
context.painter().draw_line(padded_rect.bottom_right(), padded_rect.bottom_left(), shadow_color, border_width);
context.painter().draw_line(padded_rect.bottom_left(), padded_rect.top_left(), highlight_color, border_width);
} else if (border_style_value.has_value() && border_style_value.value()->to_string() == "outset") {
// border-style: outset
auto highlight_color = Color::from_rgb(0x888888);
auto shadow_color = Color::from_rgb(0x5a5a5a);
context.painter().draw_line(padded_rect.top_left(), padded_rect.top_right(), highlight_color, border_width);
context.painter().draw_line(padded_rect.top_right(), padded_rect.bottom_right(), shadow_color, border_width);
context.painter().draw_line(padded_rect.bottom_right(), padded_rect.bottom_left(), shadow_color, border_width);
context.painter().draw_line(padded_rect.bottom_left(), padded_rect.top_left(), highlight_color, border_width);
} else {
// border-style: solid
context.painter().draw_line(padded_rect.top_left(), padded_rect.top_right(), border_color, border_width);
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);
}
}
paint_border(context, Edge::Top, bordered_rect, CSS::PropertyID::BorderTopStyle, CSS::PropertyID::BorderTopColor, CSS::PropertyID::BorderTopWidth);
paint_border(context, Edge::Right, bordered_rect, CSS::PropertyID::BorderRightStyle, CSS::PropertyID::BorderRightColor, CSS::PropertyID::BorderRightWidth);
paint_border(context, Edge::Bottom, bordered_rect, CSS::PropertyID::BorderBottomStyle, CSS::PropertyID::BorderBottomColor, CSS::PropertyID::BorderBottomWidth);
paint_border(context, Edge::Left, bordered_rect, CSS::PropertyID::BorderLeftStyle, CSS::PropertyID::BorderLeftColor, CSS::PropertyID::BorderLeftWidth);
LayoutNodeWithStyleAndBoxModelMetrics::render(context);
}

8
Libraries/LibHTML/Layout/LayoutBox.h
View file

@ -32,6 +32,14 @@ protected:
private:
virtual bool is_box() const override { return true; }
enum class Edge {
Top,
Right,
Bottom,
Left,
};
void paint_border(RenderingContext&, Edge, const Rect&, CSS::PropertyID style_property_id, CSS::PropertyID color_property_id, CSS::PropertyID width_property_id);
FloatRect m_rect;
};