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.)

6 files changed, 26 insertions, 14 deletions

diff --git a/Libraries/LibWeb/CSS/Default.css b/Libraries/LibWeb/CSS/Default.css
index ce25077313..76b657e021 100644
--- a/Libraries/LibWeb/CSS/Default.css
+++ b/Libraries/LibWeb/CSS/Default.css
@@ -59,7 +59,7 @@ article, aside, section {
 }
 
 center {
-    text-align: center;
+    text-align: -libweb-center;
 }
 
 h1, h2, h3 {
diff --git a/Libraries/LibWeb/CSS/StyleProperties.cpp b/Libraries/LibWeb/CSS/StyleProperties.cpp
index b2e2a02037..37c89240e2 100644
--- a/Libraries/LibWeb/CSS/StyleProperties.cpp
+++ b/Libraries/LibWeb/CSS/StyleProperties.cpp
@@ -216,4 +216,19 @@ bool StyleProperties::operator==(const StyleProperties& other) const
     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;
+}
+
 }
diff --git a/Libraries/LibWeb/CSS/StyleProperties.h b/Libraries/LibWeb/CSS/StyleProperties.h
index c45c2eddc2..3d18f3a86b 100644
--- a/Libraries/LibWeb/CSS/StyleProperties.h
+++ b/Libraries/LibWeb/CSS/StyleProperties.h
@@ -58,6 +58,7 @@ public:
     Length length_or_fallback(CSS::PropertyID, const Length& fallback, float reference_for_percentages) const;
     String string_or_fallback(CSS::PropertyID, const StringView& fallback) const;
     Color color_or_fallback(CSS::PropertyID, const Document&, Color fallback) const;
+    CSS::ValueID text_align() const;
 
     const Gfx::Font& font() const
     {
diff --git a/Libraries/LibWeb/CSS/StyleValue.cpp b/Libraries/LibWeb/CSS/StyleValue.cpp
index fc1abe924a..35c1d17add 100644
--- a/Libraries/LibWeb/CSS/StyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValue.cpp
@@ -53,6 +53,8 @@ String IdentifierStyleValue::to_string() const
         return "(invalid)";
     case CSS::ValueID::VendorSpecificLink:
         return "-libweb-link";
+    case CSS::ValueID::VendorSpecificCenter:
+        return "-libweb-center";
     case CSS::ValueID::VendorSpecificPaletteDesktopBackground:
         return "-libweb-palette-desktop-background";
     case CSS::ValueID::VendorSpecificPaletteActiveWindowBorder1:
diff --git a/Libraries/LibWeb/CSS/StyleValue.h b/Libraries/LibWeb/CSS/StyleValue.h
index 8186eddc5b..577620e031 100644
--- a/Libraries/LibWeb/CSS/StyleValue.h
+++ b/Libraries/LibWeb/CSS/StyleValue.h
@@ -104,6 +104,7 @@ enum class ValueID {
     Left,
     Right,
     Justify,
+    VendorSpecificCenter,
 };
 
 enum class Position {
diff --git a/Libraries/LibWeb/Layout/LayoutBlock.cpp b/Libraries/LibWeb/Layout/LayoutBlock.cpp
index abcd63da9e..aef96552bc 100644
--- a/Libraries/LibWeb/Layout/LayoutBlock.cpp
+++ b/Libraries/LibWeb/Layout/LayoutBlock.cpp
@@ -181,22 +181,10 @@ void LayoutBlock::layout_inline_children(LayoutMode layout_mode)
         line_box.trim_trailing_whitespace();
     }
 
+    auto text_align = style().text_align();
     float min_line_height = style().line_height(*this);
     float line_spacing = min_line_height - style().font().glyph_height();
     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;
 
     for (auto& line_box : m_line_boxes) {
@@ -210,6 +198,7 @@ void LayoutBlock::layout_inline_children(LayoutMode layout_mode)
 
         switch (text_align) {
         case CSS::ValueID::Center:
+        case CSS::ValueID::VendorSpecificCenter:
             x_offset += excess_horizontal_space / 2;
             break;
         case CSS::ValueID::Right:
@@ -464,6 +453,10 @@ void LayoutBlock::compute_position()
         + box_model().padding().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
         + box_model().offset().top.to_px(*this);