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:
parent
6de937a689
commit
784ed004e6
6 changed files with 26 additions and 14 deletions
|
@ -59,7 +59,7 @@ article, aside, section {
|
||||||
}
|
}
|
||||||
|
|
||||||
center {
|
center {
|
||||||
text-align: center;
|
text-align: -libweb-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3 {
|
h1, h2, h3 {
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
{
|
{
|
||||||
|
|
|
@ -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:
|
||||||
|
|
|
@ -104,6 +104,7 @@ enum class ValueID {
|
||||||
Left,
|
Left,
|
||||||
Right,
|
Right,
|
||||||
Justify,
|
Justify,
|
||||||
|
VendorSpecificCenter,
|
||||||
};
|
};
|
||||||
|
|
||||||
enum class Position {
|
enum class Position {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue