LibWeb: Support list-style-position

This moves the ::marker inside of <summary> actually inside. :^)

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -46,6 +46,7 @@ public:
     static CSS::BackdropFilter backdrop_filter() { return BackdropFilter::make_none(); }
     static Color background_color() { return Color::Transparent; }
     static CSS::ListStyleType list_style_type() { return CSS::ListStyleType::Disc; }
+    static CSS::ListStylePosition list_style_position() { return CSS::ListStylePosition::Outside; }
     static CSS::Visibility visibility() { return CSS::Visibility::Visible; }
     static CSS::FlexDirection flex_direction() { return CSS::FlexDirection::Row; }
     static CSS::FlexWrap flex_wrap() { return CSS::FlexWrap::Nowrap; }
@@ -288,6 +289,7 @@ public:
     Vector<BackgroundLayerData> const& background_layers() const { return m_noninherited.background_layers; }
 
     CSS::ListStyleType list_style_type() const { return m_inherited.list_style_type; }
+    CSS::ListStylePosition list_style_position() const { return m_inherited.list_style_position; }
 
     Optional<SVGPaint> const& fill() const { return m_inherited.fill; }
     Optional<SVGPaint> const& stroke() const { return m_inherited.stroke; }
@@ -327,6 +329,7 @@ protected:
         CSS::LengthPercentage text_indent { InitialValues::text_indent() };
         CSS::WhiteSpace white_space { InitialValues::white_space() };
         CSS::ListStyleType list_style_type { InitialValues::list_style_type() };
+        CSS::ListStylePosition list_style_position { InitialValues::list_style_position() };
         CSS::Visibility visibility { InitialValues::visibility() };
 
         Optional<SVGPaint> fill;
@@ -448,6 +451,7 @@ public:
     void set_overflow_x(CSS::Overflow value) { m_noninherited.overflow_x = value; }
     void set_overflow_y(CSS::Overflow value) { m_noninherited.overflow_y = value; }
     void set_list_style_type(CSS::ListStyleType value) { m_inherited.list_style_type = value; }
+    void set_list_style_position(CSS::ListStylePosition value) { m_inherited.list_style_position = value; }
     void set_display(CSS::Display value) { m_noninherited.display = value; }
     void set_backdrop_filter(CSS::BackdropFilter backdrop_filter) { m_noninherited.backdrop_filter = move(backdrop_filter); }
     void set_border_bottom_left_radius(CSS::BorderRadiusData value) { m_noninherited.border_bottom_left_radius = move(value); }

Userland/Libraries/LibWeb/CSS/Enums.json

@@ -190,6 +190,10 @@
         "upper-latin",
         "upper-roman"
     ],
+    "list-style-position": [
+        "inside",
+        "outside"
+    ],
     "overflow": [
         "auto",
         "clip",

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -1232,9 +1232,8 @@
   "list-style-position": {
     "inherited": true,
     "initial": "outside",
-    "valid-identifiers": [
+    "valid-types": [
-      "inside",
+      "list-style-position"
-      "outside"
     ]
   },
   "list-style-type": {

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -711,6 +711,12 @@ Optional<CSS::ListStyleType> StyleProperties::list_style_type() const
     return value_id_to_list_style_type(value->to_identifier());
 }
 
+Optional<CSS::ListStylePosition> StyleProperties::list_style_position() const
+{
+    auto value = property(CSS::PropertyID::ListStylePosition);
+    return value_id_to_list_style_position(value->to_identifier());
+}
+
 Optional<CSS::Overflow> StyleProperties::overflow_x() const
 {
     return overflow(CSS::PropertyID::OverflowX);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -63,6 +63,7 @@ public:
     Optional<CSS::TextTransform> text_transform() const;
     Vector<CSS::ShadowData> text_shadow() const;
     Optional<CSS::ListStyleType> list_style_type() const;
+    Optional<CSS::ListStylePosition> list_style_position() const;
     Optional<CSS::FlexDirection> flex_direction() const;
     Optional<CSS::FlexWrap> flex_wrap() const;
     Optional<CSS::FlexBasisData> flex_basis() const;

Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp

@@ -999,8 +999,14 @@ void BlockFormattingContext::layout_list_item_marker(ListItemBox const& list_ite
 
     marker_state.set_content_height(max(image_height, marker.font().pixel_size_rounded_up() + 1).value());
 
-    marker_state.set_content_offset({ -(marker_state.content_width() + default_marker_width),
+    auto final_marker_width = marker_state.content_width() + default_marker_width;
-        max(CSSPixels(0), (CSSPixels(marker.line_height()) - marker_state.content_height()) / 2) });
+
+    if (marker.list_style_position() == CSS::ListStylePosition::Inside) {
+        list_item_state.set_content_offset({ final_marker_width, list_item_state.offset.y() });
+        list_item_state.set_content_width(list_item_state.content_width() - final_marker_width);
+    }
+
+    marker_state.set_content_offset({ -final_marker_width, max(CSSPixels(0), (CSSPixels(marker.line_height()) - marker_state.content_height()) / 2) });
 
     if (marker_state.content_height() > list_item_state.content_height())
         list_item_state.set_content_height(marker_state.content_height());

Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp

@@ -10,9 +10,10 @@
 
 namespace Web::Layout {
 
-ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType style_type, size_t index, NonnullRefPtr<CSS::StyleProperties> style)
+ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType style_type, CSS::ListStylePosition style_position, size_t index, NonnullRefPtr<CSS::StyleProperties> style)
     : Box(document, nullptr, move(style))
     , m_list_style_type(style_type)
+    , m_list_style_position(style_position)
     , m_index(index)
 {
     switch (m_list_style_type) {

Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.h

@@ -15,7 +15,7 @@ class ListItemMarkerBox final : public Box {
     JS_CELL(ListItemMarkerBox, Box);
 
 public:
-    explicit ListItemMarkerBox(DOM::Document&, CSS::ListStyleType, size_t index, NonnullRefPtr<CSS::StyleProperties>);
+    explicit ListItemMarkerBox(DOM::Document&, CSS::ListStyleType, CSS::ListStylePosition, size_t index, NonnullRefPtr<CSS::StyleProperties>);
     virtual ~ListItemMarkerBox() override;
 
     DeprecatedString const& text() const { return m_text; }
@@ -23,12 +23,14 @@ public:
     virtual JS::GCPtr<Painting::Paintable> create_paintable() const override;
 
     CSS::ListStyleType list_style_type() const { return m_list_style_type; }
+    CSS::ListStylePosition list_style_position() const { return m_list_style_position; }
 
 private:
     virtual bool is_list_item_marker_box() const final { return true; }
     virtual bool can_have_children() const override { return false; }
 
     CSS::ListStyleType m_list_style_type { CSS::ListStyleType::None };
+    CSS::ListStylePosition m_list_style_position { CSS::ListStylePosition::Outside };
     size_t m_index;
 
     DeprecatedString m_text {};

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -572,6 +572,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
         const_cast<CSS::AbstractImageStyleValue&>(*m_list_style_image).load_any_resources(document());
     }
 
+    if (auto list_style_position = computed_style.list_style_position(); list_style_position.has_value())
+        computed_values.set_list_style_position(list_style_position.value());
+
     // FIXME: The default text decoration color value is `currentcolor`, but since we can't resolve that easily,
     //        we just manually grab the value from `color`. This makes it dependent on `color` being
     //        specified first, so it's far from ideal.

Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp

@@ -291,7 +291,7 @@ ErrorOr<void> TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::
         auto& element = static_cast<DOM::Element&>(dom_node);
         int child_index = layout_node->parent()->index_of_child<ListItemBox>(*layout_node).value();
         auto marker_style = TRY(style_computer.compute_style(element, CSS::Selector::PseudoElement::Marker));
-        auto list_item_marker = document.heap().allocate_without_realm<ListItemMarkerBox>(document, layout_node->computed_values().list_style_type(), child_index + 1, *marker_style);
+        auto list_item_marker = document.heap().allocate_without_realm<ListItemMarkerBox>(document, layout_node->computed_values().list_style_type(), layout_node->computed_values().list_style_position(), child_index + 1, *marker_style);
         static_cast<ListItemBox&>(*layout_node).set_marker(list_item_marker);
         element.set_pseudo_element_node({}, CSS::Selector::PseudoElement::Marker, list_item_marker);
         layout_node->append_child(*list_item_marker);