RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 12:17:44 +00:00
Code Issues Activity Actions

LibWeb: Display <ol> and respect list-style-type in <ul>

Browse source 
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
This commit is contained in:
Tobias Christiansen 2021-04-17 23:11:49 +02:00 • committed by Andreas Kling
parent bfcfe84240
commit 5338708091
2 changed files with 39 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
Userland/Libraries/LibWeb/CSS/Default.css
View file

@ -199,6 +199,14 @@ ol {
padding-left: 20px; 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. */ /* FIXME: This is a temporary hack until we can render a native-looking frame for these. */
input[type=text] { input[type=text] {
border: 1px solid black; border: 1px solid black;

34
Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp
View file

@ -45,11 +45,39 @@ void ListItemMarkerBox::paint(PaintContext& context, PaintPhase phase)
{ {
if (phase != PaintPhase::Foreground) if (phase != PaintPhase::Foreground)
return; 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. // 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(); 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();
}
} }
} }