LibWeb: Support strings as list-style-types

We've long claimed to support this, but then silently ignored string
values, until 4cb2063577 which would
not-so-silently crash instead. (Oops)

So, actually pass the string value along and use it in the list marker.

As part of this, rename our `list-style-type` enum to
`counter-style-name-keyword`. This is an awkward name, attempting to be
spec-based. (The spec says `<counter-style>`, which is either a
`<counter-style-name>` or a function, and the `<counter-style-name>` is
a `<custom-ident>` that also has a few predefined values. So this is the
best I could come up with.)

Unfortunately only one WPT test for this passes - the others fail
because we produce a different layout when text is in `::before` than
when it's in `::marker`, and similar issues.

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -1008,7 +1008,9 @@ TextTransform ComputedProperties::text_transform() const
 ListStyleType ComputedProperties::list_style_type() const
 {
     auto const& value = property(PropertyID::ListStyleType);
-    return keyword_to_list_style_type(value.to_keyword()).release_value();
+    if (value.is_string())
+        return value.as_string().string_value().to_string();
+    return keyword_to_counter_style_name_keyword(value.to_keyword()).release_value();
 }
 
 ListStylePosition ComputedProperties::list_style_position() const

Libraries/LibWeb/CSS/ComputedValues.h

@@ -78,6 +78,8 @@ struct Containment {
     bool is_empty() const { return !(size_containment || inline_size_containment || layout_containment || style_containment || paint_containment); }
 };
 
+using ListStyleType = Variant<CounterStyleNameKeyword, String>;
+
 class InitialValues {
 public:
     static AspectRatio aspect_ratio() { return AspectRatio { true, {} }; }
@@ -112,7 +114,7 @@ public:
     static Vector<Gfx::Filter> backdrop_filter() { return {}; }
     static Vector<Gfx::Filter> filter() { return {}; }
     static Color background_color() { return Color::Transparent; }
-    static CSS::ListStyleType list_style_type() { return CSS::ListStyleType::Disc; }
+    static CSS::ListStyleType list_style_type() { return CSS::CounterStyleNameKeyword::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; }

Libraries/LibWeb/CSS/Enums.json

@@ -122,6 +122,22 @@
     "auto",
     "hidden"
   ],
+  "counter-style-name-keyword": [
+    "circle",
+    "decimal",
+    "decimal-leading-zero",
+    "disc",
+    "disclosure-closed",
+    "disclosure-open",
+    "lower-alpha",
+    "lower-latin",
+    "lower-roman",
+    "none",
+    "square",
+    "upper-alpha",
+    "upper-latin",
+    "upper-roman"
+  ],
   "cursor": [
     "auto",
     "default",
@@ -386,22 +402,6 @@
     "inset",
     "outset"
   ],
-  "list-style-type": [
-    "circle",
-    "decimal",
-    "decimal-leading-zero",
-    "disc",
-    "disclosure-closed",
-    "disclosure-open",
-    "lower-alpha",
-    "lower-latin",
-    "lower-roman",
-    "none",
-    "square",
-    "upper-alpha",
-    "upper-latin",
-    "upper-roman"
-  ],
   "list-style-position": [
     "inside",
     "outside"
@@ -419,10 +419,10 @@
     "compact"
   ],
   "mix-blend-mode": [
-    "normal", 
-    "multiply", 
-    "screen", 
-    "overlay", 
+    "normal",
+    "multiply",
+    "screen",
+    "overlay",
     "darken",
     "lighten",
     "color-dodge",
@@ -434,8 +434,8 @@
     "hue",
     "saturation",
     "color",
-    "luminosity", 
-    "plus-darker", 
+    "luminosity",
+    "plus-darker",
     "plus-lighter"
   ],
   "object-fit": [

Libraries/LibWeb/CSS/Properties.json

@@ -1815,8 +1815,8 @@
     "inherited": true,
     "initial": "disc",
     "valid-types": [
-      "string",
-      "list-style-type"
+      "counter-style-name-keyword",
+      "string"
     ]
   },
   "margin": {

Libraries/LibWeb/CSS/StyleValues/CounterStyleValue.cpp

@@ -53,35 +53,34 @@ static String generate_a_counter_representation(CSSStyleValue const& counter_sty
         auto counter_style_name = counter_style.as_custom_ident().custom_ident();
         auto keyword = keyword_from_string(counter_style_name);
         if (keyword.has_value()) {
-            auto list_style_type = keyword_to_list_style_type(*keyword);
-            if (list_style_type.has_value()) {
+            if (auto list_style_type = keyword_to_counter_style_name_keyword(*keyword); list_style_type.has_value()) {
                 switch (*list_style_type) {
-                case ListStyleType::Square:
+                case CounterStyleNameKeyword::Square:
                     return "▪"_string;
-                case ListStyleType::Circle:
+                case CounterStyleNameKeyword::Circle:
                     return "◦"_string;
-                case ListStyleType::Disc:
+                case CounterStyleNameKeyword::Disc:
                     return "•"_string;
-                case ListStyleType::DisclosureClosed:
+                case CounterStyleNameKeyword::DisclosureClosed:
                     return "▸"_string;
-                case ListStyleType::DisclosureOpen:
+                case CounterStyleNameKeyword::DisclosureOpen:
                     return "▾"_string;
-                case ListStyleType::Decimal:
+                case CounterStyleNameKeyword::Decimal:
                     return MUST(String::formatted("{}", value));
-                case ListStyleType::DecimalLeadingZero:
+                case CounterStyleNameKeyword::DecimalLeadingZero:
                     // This is weird, but in accordance to spec.
                     if (value < 10)
                         return MUST(String::formatted("0{}", value));
                     return MUST(String::formatted("{}", value));
-                case ListStyleType::LowerAlpha:
-                case ListStyleType::LowerLatin:
+                case CounterStyleNameKeyword::LowerAlpha:
+                case CounterStyleNameKeyword::LowerLatin:
                     return String::bijective_base_from(value - 1, String::Case::Lower);
-                case ListStyleType::UpperAlpha:
-                case ListStyleType::UpperLatin:
+                case CounterStyleNameKeyword::UpperAlpha:
+                case CounterStyleNameKeyword::UpperLatin:
                     return String::bijective_base_from(value - 1, String::Case::Upper);
-                case ListStyleType::LowerRoman:
+                case CounterStyleNameKeyword::LowerRoman:
                     return String::roman_number_from(value, String::Case::Lower);
-                case ListStyleType::UpperRoman:
+                case CounterStyleNameKeyword::UpperRoman:
                     return String::roman_number_from(value, String::Case::Upper);
                 default:
                     break;