LibWeb: Parse the CSS scrollbar-width property

Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/SerenityOS/serenity/commit/8d9e20cb03
Pull-request: https://github.com/SerenityOS/serenity/pull/23381
Reviewed-by: https://github.com/AtkinsSJ
Reviewed-by: https://github.com/trflynn89 ✅

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -138,6 +138,7 @@ position: static
 quotes: auto
 right: auto
 row-gap: auto
+scrollbar-width: auto
 stop-color: rgb(0, 0, 0)
 stop-opacity: 1
 stroke: none

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -177,6 +177,8 @@ public:
     static CSS::MathShift math_shift() { return CSS::MathShift::Normal; }
     static CSS::MathStyle math_style() { return CSS::MathStyle::Normal; }
     static int math_depth() { return 0; }
+
+    static CSS::ScrollbarWidth scrollbar_width() { return CSS::ScrollbarWidth::Auto; }
 };
 
 enum class BackgroundSize {
@@ -432,6 +434,8 @@ public:
     CSS::MathStyle math_style() const { return m_inherited.math_style; }
     int math_depth() const { return m_inherited.math_depth; }
 
+    CSS::ScrollbarWidth scrollbar_width() const { return m_noninherited.scrollbar_width; }
+
     NonnullOwnPtr<ComputedValues> clone_inherited_values() const
     {
         auto clone = make<ComputedValues>();
@@ -564,6 +568,8 @@ protected:
         CSS::MaskType mask_type { InitialValues::mask_type() };
         LengthPercentage x { InitialValues::x() };
         LengthPercentage y { InitialValues::x() };
+
+        CSS::ScrollbarWidth scrollbar_width { InitialValues::scrollbar_width() };
     } m_noninherited;
 };
 
@@ -694,6 +700,8 @@ public:
     void set_math_shift(CSS::MathShift value) { m_inherited.math_shift = value; }
     void set_math_style(CSS::MathStyle value) { m_inherited.math_style = value; }
     void set_math_depth(int value) { m_inherited.math_depth = value; }
+
+    void set_scrollbar_width(CSS::ScrollbarWidth value) { m_noninherited.scrollbar_width = value; }
 };
 
 }

Userland/Libraries/LibWeb/CSS/Enums.json

@@ -361,6 +361,11 @@
     "middle",
     "end"
   ],
+  "scrollbar-width": [
+    "auto",
+    "thin",
+    "none"
+  ],
   "text-align": [
     "center",
     "justify",

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -2034,6 +2034,18 @@
     ],
     "percentages-resolve-to": "length"
   },
+  "scrollbar-width": {
+    "affects-layout": false,
+    "animation-type": "by-computed-value",
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [ "scrollbar-width" ],
+    "valid-identifiers": [
+      "auto",
+      "thin",
+      "none"
+    ]
+  },
   "stop-color": {
     "affects-layout": false,
     "animation-type": "by-computed-value",

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -1110,4 +1110,10 @@ QuotesData StyleProperties::quotes() const
     return InitialValues::quotes();
 }
 
+Optional<CSS::ScrollbarWidth> StyleProperties::scrollbar_width() const
+{
+    auto value = property(CSS::PropertyID::ScrollbarWidth);
+    return value_id_to_scrollbar_width(value->to_identifier());
+}
+
 }

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -158,6 +158,8 @@ public:
 
     QuotesData quotes() const;
 
+    Optional<CSS::ScrollbarWidth> scrollbar_width() const;
+
     static NonnullRefPtr<Gfx::Font const> font_fallback(bool monospace, bool bold);
 
 private:

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -835,6 +835,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
 
     computed_values.set_object_position(computed_style.object_position());
 
+    if (auto scrollbar_width = computed_style.scrollbar_width(); scrollbar_width.has_value())
+        computed_values.set_scrollbar_width(scrollbar_width.value());
+
     propagate_style_to_anonymous_wrappers();
 }