RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 18:18:12 +00:00
Code Issues Activity Actions

LibWeb: Add CSS property 'border'

Browse source 
This makes it possible to write shorter CSS. Instead of writing
.foo {
        border-width: 3px;
        border-style: solid;
        border-color: blue;
}
it is now possible to write
.foo {
        border: 3px solid blue;
}
while the order of values is irrelevant.
Currently only the basic values are supported. More values should be
added in the future.

Three more value specific parse functions were added:
parse_line_width, parse_color, and parse_line_style

Additionally a few test cases were added to borders.html.
This commit is contained in:
myphs 2020-03-20 20:29:39 +01:00 • committed by Andreas Kling
parent 12e8efd74e
commit 0891f860f7
4 changed files with 205 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

86
Libraries/LibWeb/CSS/StyleResolver.cpp
View file

@ -144,8 +144,94 @@ static Vector<String> split_on_whitespace(const StringView& string)
return v;
}
static inline void set_property_border_width(StyleProperties& style, const StyleValue& value)
{
ASSERT(value.is_length());
style.set_property(CSS::PropertyID::BorderTopWidth, value);
style.set_property(CSS::PropertyID::BorderRightWidth, value);
style.set_property(CSS::PropertyID::BorderBottomWidth, value);
style.set_property(CSS::PropertyID::BorderLeftWidth, value);
}
static inline void set_property_border_color(StyleProperties& style, const StyleValue& value)
{
ASSERT(value.is_color());
style.set_property(CSS::PropertyID::BorderTopColor, value);
style.set_property(CSS::PropertyID::BorderRightColor, value);
style.set_property(CSS::PropertyID::BorderBottomColor, value);
style.set_property(CSS::PropertyID::BorderLeftColor, value);
}
static inline void set_property_border_style(StyleProperties& style, const StyleValue& value)
{
ASSERT(value.is_string());
style.set_property(CSS::PropertyID::BorderTopStyle, value);
style.set_property(CSS::PropertyID::BorderRightStyle, value);
style.set_property(CSS::PropertyID::BorderBottomStyle, value);
style.set_property(CSS::PropertyID::BorderLeftStyle, value);
}
static void set_property_expanding_shorthands(StyleProperties& style, CSS::PropertyID property_id, const StyleValue& value)
{
if (property_id == CSS::PropertyID::Border) {
auto parts = split_on_whitespace(value.to_string());
if (value.is_length()) {
set_property_border_width(style, value);
return;
}
if (value.is_color()) {
set_property_border_color(style, value);
return;
}
if (value.is_string()) {
auto parts = split_on_whitespace(value.to_string());
if (parts.size() == 1) {
if (auto value = parse_line_style(parts[0])) {
set_property_border_style(style, value.release_nonnull());
set_property_border_color(style, ColorStyleValue::create(Gfx::Color::Black));
set_property_border_width(style, LengthStyleValue::create(Length(3, Length::Type::Absolute)));
return;
}
}
RefPtr<LengthStyleValue> line_width_value;
RefPtr<ColorStyleValue> color_value;
RefPtr<StringStyleValue> line_style_value;
for (auto& part : parts) {
if (auto value = parse_line_width(part)) {
if (line_width_value)
return;
line_width_value = move(value);
continue;
}
if (auto value = parse_color(part)) {
if (color_value)
return;
color_value = move(value);
continue;
}
if (auto value = parse_line_style(part)) {
if (line_style_value)
return;
line_style_value = move(value);
continue;
}
}
if (line_width_value)
set_property_border_width(style, line_width_value.release_nonnull());
if (color_value)
set_property_border_color(style, color_value.release_nonnull());
if (line_style_value)
set_property_border_style(style, line_style_value.release_nonnull());
return;
}
return;
}
if (property_id == CSS::PropertyID::BorderStyle) {
style.set_property(CSS::PropertyID::BorderTopStyle, value);
style.set_property(CSS::PropertyID::BorderRightStyle, value);