0ct0pu5/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-12-24 23:23:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

LibHTML: Implement the <hr> element

Browse source 
This also meant I had to implement basic support for the border-styles
"inset" and "outset". If it's neither of those, we default to "solid".
This commit is contained in:
Andreas Kling 2019-10-01 20:50:11 +02:00
parent 53fae2af4f
commit 8f842375a2
Notes: sideshowbarker 2024-07-19 11:51:40 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/SerenityOS/serenity/commit/8f842375a2e
6 changed files with 54 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Libraries/LibHTML/CSS/Default.css
View file

@ -89,3 +89,9 @@ a {
color: #0000ff;
text-decoration: underline;
}
hr {
border-width: 1;
border-color: #888888;
border-style: inset;
}

10
Libraries/LibHTML/DOM/HTMLHRElement.cpp Normal file
View file

@ -0,0 +1,10 @@
#include <LibHTML/DOM/HTMLHRElement.h>
HTMLHRElement::HTMLHRElement(Document& document, const String& tag_name)
: HTMLElement(document, tag_name)
{
}
HTMLHRElement::~HTMLHRElement()
{
}

9
Libraries/LibHTML/DOM/HTMLHRElement.h Normal file
View file

@ -0,0 +1,9 @@
#pragma once
#include <LibHTML/DOM/HTMLElement.h>
class HTMLHRElement : public HTMLElement {
public:
HTMLHRElement(Document&, const String& tag_name);
virtual ~HTMLHRElement() override;
};

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

@ -56,13 +56,34 @@ void LayoutNode::render(RenderingContext& context)
auto border_width_value = style_properties().property("border-width");
auto border_color_value = style_properties().property("border-color");
auto border_style_value = style_properties().property("border-style");
if (border_width_value.has_value() && border_color_value.has_value()) {
int border_width = border_width_value.value()->to_length().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().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);
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);
}
}
// TODO: render our border

1
Libraries/LibHTML/Makefile.shared
View file

@ -6,6 +6,7 @@ LIBHTML_OBJS = \
DOM/HTMLAnchorElement.o \
DOM/HTMLHeadingElement.o \
DOM/HTMLHeadElement.o \
DOM/HTMLHRElement.o \
DOM/HTMLHtmlElement.o \
DOM/HTMLStyleElement.o \
DOM/HTMLTitleElement.o \

3
Libraries/LibHTML/Parser/HTMLParser.cpp
View file

@ -3,6 +3,7 @@
#include <AK/StringBuilder.h>
#include <LibHTML/DOM/Element.h>
#include <LibHTML/DOM/HTMLAnchorElement.h>
#include <LibHTML/DOM/HTMLHRElement.h>
#include <LibHTML/DOM/HTMLHeadElement.h>
#include <LibHTML/DOM/HTMLHeadingElement.h>
#include <LibHTML/DOM/HTMLHtmlElement.h>
@ -22,6 +23,8 @@ static NonnullRefPtr<Element> create_element(Document& document, const String& t
return adopt(*new HTMLHtmlElement(document, tag_name));
if (lowercase_tag_name == "head")
return adopt(*new HTMLHeadElement(document, tag_name));
if (lowercase_tag_name == "hr")
return adopt(*new HTMLHRElement(document, tag_name));
if (lowercase_tag_name == "style")
return adopt(*new HTMLStyleElement(document, tag_name));
if (lowercase_tag_name == "title")