LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-21 10:19:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Add basic support for "border-style: {dotted,dashed}"

Browse Source
This commit is contained in:
Linus Groh 2020-05-10 18:08:02 +01:00 committed by Andreas Kling
parent 0669dbcf5d
commit 4c1a765076
Notes: sideshowbarker 2024-07-19 06:45:21 +09:00 
Author: https://github.com/linusg
Commit: https://github.com/SerenityOS/serenity/commit/4c1a7650765
Pull-request: https://github.com/SerenityOS/serenity/pull/2182
Issue: https://github.com/SerenityOS/serenity/issues/2176
2 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
Base/home/anon/www/borders.html
View File

@ -3,6 +3,9 @@
<head>
<title>CSS borders lookin' good</title>
<style>
div + div {
margin-top: 20px;
}
#foo {
border-top-color: red;
border-right-color: lime;
@ -84,6 +87,40 @@
#double-color-solo {
border: red blue;
}
#dotted-1px {
border: 1px dotted blue;
}
#dotted-5px {
border: 5px dotted blue;
}
#dotted-20px {
border: 20px dotted blue;
}
#dashed-1px {
border: 1px dashed blue;
}
#dashed-5px {
border: 5px dashed blue;
}
#dashed-20px {
border: 20px dashed blue;
}
#mixed {
border-top-width: 20px;
border-top-style: dashed;
border-top-color: red;
border-left-width: 5px;
border-left-style: solid;
border-left-color: blue;
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: lime;
border-right-width: 10px;
border-right-style: inset;
}
</style>
</head>
<body>
@ -102,5 +139,12 @@
<div id="double-width-solo">double width solo</div>
<div id="double-style-solo">double style solo</div>
<div id="double-color-solo">double color solo</div>
<div id="dotted-1px">dotted (1px)</div>
<div id="dotted-5px">dotted (5px)</div>
<div id="dotted-20px">dotted (20px)</div>
<div id="dashed-1px">dashed (1px)</div>
<div id="dashed-5px">dashed (5px)</div>
<div id="dashed-20px">dashed (20px)</div>
<div id="mixed">mixed</div>
</body>
</html>

25
Libraries/LibWeb/Layout/LayoutBox.cpp
View File

@ -106,6 +106,31 @@ void LayoutBox::paint_border(RenderingContext& context, Edge edge, const Gfx::Fl
if (border_style.has_value()) {
if (border_style.value()->to_string() == "dotted")
line_style = Gfx::Painter::LineStyle::Dotted;
if (border_style.value()->to_string() == "dashed")
line_style = Gfx::Painter::LineStyle::Dashed;
}
if (line_style != Gfx::Painter::LineStyle::Solid) {
switch (edge) {
case Edge::Top:
p1.move_by(int_width / 2, int_width / 2);
p2.move_by(-int_width / 2, int_width / 2);
break;
case Edge::Right:
p1.move_by(-int_width / 2, int_width / 2);
p2.move_by(-int_width / 2, -int_width / 2);
break;
case Edge::Bottom:
p1.move_by(int_width / 2, -int_width / 2);
p2.move_by(-int_width / 2, -int_width / 2);
break;
case Edge::Left:
p1.move_by(int_width / 2, int_width / 2);
p2.move_by(int_width / 2, -int_width / 2);
break;
}
context.painter().draw_line({ (int)p1.x(), (int)p1.y() }, { (int)p2.x(), (int)p2.y() }, color, int_width, line_style);
return;
}
auto draw_line = [&](auto& p1, auto& p2) {