1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-24 19:57:41 +00:00

LibWeb: Implement <center> as -libweb-center

To get the expected behavior for <center>, we needed a special text
alignment mode that centers block-level elements (and not just line
box fragments.)
This commit is contained in:
Andreas Kling 2020-06-13 10:54:58 +02:00
parent 6de937a689
commit 784ed004e6
6 changed files with 26 additions and 14 deletions

View file

@ -59,7 +59,7 @@ article, aside, section {
} }
center { center {
text-align: center; text-align: -libweb-center;
} }
h1, h2, h3 { h1, h2, h3 {

View file

@ -216,4 +216,19 @@ bool StyleProperties::operator==(const StyleProperties& other) const
return true; return true;
} }
CSS::ValueID StyleProperties::text_align() const
{
auto string = string_or_fallback(CSS::PropertyID::TextAlign, "left");
if (string == "center")
return CSS::ValueID::Center;
if (string == "right")
return CSS::ValueID::Right;
if (string == "justify")
return CSS::ValueID::Justify;
if (string == "-libweb-center")
return CSS::ValueID::VendorSpecificCenter;
// Otherwise, just assume "left"..
return CSS::ValueID::Left;
}
} }

View file

@ -58,6 +58,7 @@ public:
Length length_or_fallback(CSS::PropertyID, const Length& fallback, float reference_for_percentages) const; Length length_or_fallback(CSS::PropertyID, const Length& fallback, float reference_for_percentages) const;
String string_or_fallback(CSS::PropertyID, const StringView& fallback) const; String string_or_fallback(CSS::PropertyID, const StringView& fallback) const;
Color color_or_fallback(CSS::PropertyID, const Document&, Color fallback) const; Color color_or_fallback(CSS::PropertyID, const Document&, Color fallback) const;
CSS::ValueID text_align() const;
const Gfx::Font& font() const const Gfx::Font& font() const
{ {

View file

@ -53,6 +53,8 @@ String IdentifierStyleValue::to_string() const
return "(invalid)"; return "(invalid)";
case CSS::ValueID::VendorSpecificLink: case CSS::ValueID::VendorSpecificLink:
return "-libweb-link"; return "-libweb-link";
case CSS::ValueID::VendorSpecificCenter:
return "-libweb-center";
case CSS::ValueID::VendorSpecificPaletteDesktopBackground: case CSS::ValueID::VendorSpecificPaletteDesktopBackground:
return "-libweb-palette-desktop-background"; return "-libweb-palette-desktop-background";
case CSS::ValueID::VendorSpecificPaletteActiveWindowBorder1: case CSS::ValueID::VendorSpecificPaletteActiveWindowBorder1:

View file

@ -104,6 +104,7 @@ enum class ValueID {
Left, Left,
Right, Right,
Justify, Justify,
VendorSpecificCenter,
}; };
enum class Position { enum class Position {

View file

@ -181,22 +181,10 @@ void LayoutBlock::layout_inline_children(LayoutMode layout_mode)
line_box.trim_trailing_whitespace(); line_box.trim_trailing_whitespace();
} }
auto text_align = style().text_align();
float min_line_height = style().line_height(*this); float min_line_height = style().line_height(*this);
float line_spacing = min_line_height - style().font().glyph_height(); float line_spacing = min_line_height - style().font().glyph_height();
float content_height = 0; float content_height = 0;
// FIXME: This should be done by the CSS parser!
CSS::ValueID text_align = CSS::ValueID::Left;
auto text_align_string = style().string_or_fallback(CSS::PropertyID::TextAlign, "left");
if (text_align_string == "center")
text_align = CSS::ValueID::Center;
else if (text_align_string == "left")
text_align = CSS::ValueID::Left;
else if (text_align_string == "right")
text_align = CSS::ValueID::Right;
else if (text_align_string == "justify")
text_align = CSS::ValueID::Justify;
float max_linebox_width = 0; float max_linebox_width = 0;
for (auto& line_box : m_line_boxes) { for (auto& line_box : m_line_boxes) {
@ -210,6 +198,7 @@ void LayoutBlock::layout_inline_children(LayoutMode layout_mode)
switch (text_align) { switch (text_align) {
case CSS::ValueID::Center: case CSS::ValueID::Center:
case CSS::ValueID::VendorSpecificCenter:
x_offset += excess_horizontal_space / 2; x_offset += excess_horizontal_space / 2;
break; break;
case CSS::ValueID::Right: case CSS::ValueID::Right:
@ -464,6 +453,10 @@ void LayoutBlock::compute_position()
+ box_model().padding().left.to_px(*this) + box_model().padding().left.to_px(*this)
+ box_model().offset().left.to_px(*this); + box_model().offset().left.to_px(*this);
if (parent()->is_block() && parent()->style().text_align() == CSS::ValueID::VendorSpecificCenter) {
position_x += (containing_block.width() / 2) - width() / 2;
}
float position_y = box_model().margin_box(*this).top float position_y = box_model().margin_box(*this).top
+ box_model().offset().top.to_px(*this); + box_model().offset().top.to_px(*this);