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(); + } } }