From 53387080914204d26f7bb05f787758b254d414f4 Mon Sep 17 00:00:00 2001
From: Tobias Christiansen <tobi@tobyase.de>
Date: Sat, 17 Apr 2021 23:11:49 +0200
Subject: [PATCH] LibWeb: Display <ol> and respect list-style-type in <ul>

In the ListItemMarkerBox render the correct thing when painting.
This covers decimal counting for ordered lists as well as square,
disc, and circle for unordered lists. Thus all currently supported
list-style-types are displayed correctly.

This closes #2059
---
 Userland/Libraries/LibWeb/CSS/Default.css     |  8 +++++
 .../LibWeb/Layout/ListItemMarkerBox.cpp       | 34 +++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/Userland/Libraries/LibWeb/CSS/Default.css b/Userland/Libraries/LibWeb/CSS/Default.css
index 1721d317ec..2a39d42857 100644
--- a/Userland/Libraries/LibWeb/CSS/Default.css
+++ b/Userland/Libraries/LibWeb/CSS/Default.css
@@ -199,6 +199,14 @@ ol {
     padding-left: 20px;
 }
 
+ul {
+    list-style-type: disc;
+}
+
+ol {
+    list-style-type: decimal;
+}
+
 /* FIXME: This is a temporary hack until we can render a native-looking frame for these. */
 input[type=text] {
     border: 1px solid black;
diff --git a/Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp b/Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp
index 0289783d54..87d63d07bf 100644
--- a/Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp
+++ b/Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp
@@ -45,11 +45,39 @@ void ListItemMarkerBox::paint(PaintContext& context, PaintPhase phase)
 {
     if (phase != PaintPhase::Foreground)
         return;
-    Gfx::IntRect bullet_rect { 0, 0, 4, 4 };
-    bullet_rect.center_within(enclosing_int_rect(absolute_rect()));
+
     // FIXME: It would be nicer to not have to go via the parent here to get our inherited style.
     auto color = parent()->computed_values().color();
-    context.painter().fill_rect(bullet_rect, color);
+
+    auto enclosing = enclosing_int_rect(absolute_rect());
+    int marker_width = (int)enclosing.height() / 2;
+    Gfx::IntRect marker_rect { 0, 0, marker_width, marker_width };
+    marker_rect.center_within(enclosing);
+
+    switch (m_list_style_type) {
+    case CSS::ListStyleType::Square:
+        context.painter().fill_rect(marker_rect, color);
+        break;
+    case CSS::ListStyleType::Circle:
+        // For some reason for draw_ellipse() the ellipse is outside of the rect while for fill_ellipse() the ellipse is inside.
+        // Scale the marker_rect with sqrt(2) to get an ellipse arc (circle) that appears as if it was inside of the marker_rect.
+        marker_rect.set_height(marker_rect.height() / 1.41);
+        marker_rect.set_width(marker_rect.width() / 1.41);
+        marker_rect.center_within(enclosing);
+        context.painter().draw_ellipse_intersecting(marker_rect, color);
+        break;
+    case CSS::ListStyleType::Decimal:
+        context.painter().draw_text(enclosing, String::formatted("{}.", m_index), Gfx::TextAlignment::Center);
+        break;
+    case CSS::ListStyleType::Disc:
+        context.painter().fill_ellipse(marker_rect, color);
+        break;
+    case CSS::ListStyleType::None:
+        return;
+
+    default:
+        VERIFY_NOT_REACHED();
+    }
 }
 
 }