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

LibWeb: Add list-style-type: disclosure-{closed,open}

Browse source 
These markers are rendered as equilateral triangles pointing right and
down respectively. As we currently don't implement writing-mode the
closed marker does not respect it.
This commit is contained in:
Simon Wanner 2023-05-30 22:50:29 +02:00 • committed by Andreas Kling
parent ad899b179f
commit 5e3e9b2f61
4 changed files with 41 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Userland/Libraries/LibWeb/CSS/Enums.json
View file

@ -179,6 +179,8 @@
"decimal",
"decimal-leading-zero",
"disc",
"disclosure-closed",
"disclosure-open",
"lower-alpha",
"lower-latin",
"lower-roman",

2
Userland/Libraries/LibWeb/CSS/Identifiers.json
View file

@ -108,6 +108,8 @@
"decimal-leading-zero",
"default",
"disc",
"disclosure-closed",
"disclosure-open",
"distribute",
"dotted",
"double",

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

@ -19,6 +19,8 @@ ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType
case CSS::ListStyleType::Square:
case CSS::ListStyleType::Circle:
case CSS::ListStyleType::Disc:
case CSS::ListStyleType::DisclosureClosed:
case CSS::ListStyleType::DisclosureOpen:
break;
case CSS::ListStyleType::Decimal:
m_text = DeprecatedString::formatted("{}.", m_index);

35
Userland/Libraries/LibWeb/Painting/MarkerPaintable.cpp
View file

@ -26,6 +26,8 @@ Layout::ListItemMarkerBox const& MarkerPaintable::layout_box() const
return static_cast<Layout::ListItemMarkerBox const&>(layout_node());
}
constexpr float sin_60_deg = 0.866025403f;
void MarkerPaintable::paint(PaintContext& context, PaintPhase phase) const
{
if (phase != PaintPhase::Foreground)
@ -55,6 +57,11 @@ void MarkerPaintable::paint(PaintContext& context, PaintPhase phase) const
marker_rect.center_within(enclosing);
auto device_marker_rect = context.enclosing_device_rect(marker_rect);
float left = device_marker_rect.x().value();
float right = left + device_marker_rect.width().value();
float top = device_marker_rect.y().value();
float bottom = top + device_marker_rect.height().value();
auto color = computed_values().color();
Gfx::AntiAliasingPainter aa_painter { context.painter() };
@ -69,6 +76,34 @@ void MarkerPaintable::paint(PaintContext& context, PaintPhase phase) const
case CSS::ListStyleType::Disc:
aa_painter.fill_ellipse(device_marker_rect.to_type<int>(), color);
break;
case CSS::ListStyleType::DisclosureClosed: {
// https://drafts.csswg.org/css-counter-styles-3/#disclosure-closed
// For the disclosure-open and disclosure-closed counter styles, the marker must be an image or character suitable for indicating the open and closed states of a disclosure widget, such as HTML’s details element.
// FIXME: If the image is directional, it must respond to the writing mode of the element, similar to the bidi-sensitive images feature of the Images 4 module.
// Draw an equilateral triangle pointing right.
auto path = Gfx::Path();
path.move_to({ left, top });
path.line_to({ left + sin_60_deg * (right - left), (top + bottom) / 2 });
path.line_to({ left, bottom });
path.close();
aa_painter.fill_path(path, color);
break;
}
case CSS::ListStyleType::DisclosureOpen: {
// https://drafts.csswg.org/css-counter-styles-3/#disclosure-open
// For the disclosure-open and disclosure-closed counter styles, the marker must be an image or character suitable for indicating the open and closed states of a disclosure widget, such as HTML’s details element.
// FIXME: If the image is directional, it must respond to the writing mode of the element, similar to the bidi-sensitive images feature of the Images 4 module.
// Draw an equilateral triangle pointing down.
auto path = Gfx::Path();
path.move_to({ left, top });
path.line_to({ right, top });
path.line_to({ (left + right) / 2, top + sin_60_deg * (bottom - top) });
path.close();
aa_painter.fill_path(path, color);
break;
}
case CSS::ListStyleType::Decimal:
case CSS::ListStyleType::DecimalLeadingZero:
case CSS::ListStyleType::LowerAlpha: