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

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.

4 files changed, 41 insertions, 0 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/Enums.json b/Userland/Libraries/LibWeb/CSS/Enums.json
index 2859f31787..b82058ec74 100644
--- a/Userland/Libraries/LibWeb/CSS/Enums.json
+++ b/Userland/Libraries/LibWeb/CSS/Enums.json
@@ -179,6 +179,8 @@
         "decimal",
         "decimal-leading-zero",
         "disc",
+        "disclosure-closed",
+        "disclosure-open",
         "lower-alpha",
         "lower-latin",
         "lower-roman",
diff --git a/Userland/Libraries/LibWeb/CSS/Identifiers.json b/Userland/Libraries/LibWeb/CSS/Identifiers.json
index 5a0fa0df50..285a4be831 100644
--- a/Userland/Libraries/LibWeb/CSS/Identifiers.json
+++ b/Userland/Libraries/LibWeb/CSS/Identifiers.json
@@ -108,6 +108,8 @@
   "decimal-leading-zero",
   "default",
   "disc",
+  "disclosure-closed",
+  "disclosure-open",
   "distribute",
   "dotted",
   "double",
diff --git a/Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp b/Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp
index 80724b6124..94be21c5d3 100644
--- a/Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp
+++ b/Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp
@@ -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);
diff --git a/Userland/Libraries/LibWeb/Painting/MarkerPaintable.cpp b/Userland/Libraries/LibWeb/Painting/MarkerPaintable.cpp
index 4263a3b44e..106506478c 100644
--- a/Userland/Libraries/LibWeb/Painting/MarkerPaintable.cpp
+++ b/Userland/Libraries/LibWeb/Painting/MarkerPaintable.cpp
@@ -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: