LibWeb/CSS: Handle whitespace properly for scrollbar properties

AtkinsSJ · AtkinsSJ · commit 971c0d01265c · 2025-11-03T11:23:21.000Z
Imported a WPT test that regressed without these changes.
diff --git a/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp b/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp
@@ -5145,35 +5145,39 @@ RefPtr<StyleValue const> Parser::parse_scrollbar_color_value(TokenStream<Compone
 RefPtr<StyleValue const> Parser::parse_scrollbar_gutter_value(TokenStream<ComponentValue>& tokens)
 {
     // auto | stable && both-edges?
+    tokens.discard_whitespace();
     if (!tokens.has_next_token())
         return nullptr;
 
     auto transaction = tokens.begin_transaction();
 
     auto parse_stable = [&]() -> Optional<bool> {
-        auto transaction = tokens.begin_transaction();
+        auto stable_transaction = tokens.begin_transaction();
+        tokens.discard_whitespace();
         auto const& token = tokens.consume_a_token();
         if (!token.is(Token::Type::Ident))
             return {};
         auto const& ident = token.token().ident();
         if (ident.equals_ignoring_ascii_case("auto"sv)) {
-            transaction.commit();
+            stable_transaction.commit();
             return false;
-        } else if (ident.equals_ignoring_ascii_case("stable"sv)) {
-            transaction.commit();
+        }
+        if (ident.equals_ignoring_ascii_case("stable"sv)) {
+            stable_transaction.commit();
             return true;
         }
         return {};
     };
 
     auto parse_both_edges = [&]() -> Optional<bool> {
-        auto transaction = tokens.begin_transaction();
+        auto edges_transaction = tokens.begin_transaction();
+        tokens.discard_whitespace();
         auto const& token = tokens.consume_a_token();
         if (!token.is(Token::Type::Ident))
             return {};
         auto const& ident = token.token().ident();
         if (ident.equals_ignoring_ascii_case("both-edges"sv)) {
-            transaction.commit();
+            edges_transaction.commit();
             return true;
         }
         return {};
@@ -5190,6 +5194,7 @@ RefPtr<StyleValue const> Parser::parse_scrollbar_gutter_value(TokenStream<Compon
             return nullptr;
     }
 
+    tokens.discard_whitespace();
     if (tokens.has_next_token())
         return nullptr;
 
diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json
@@ -3445,22 +3445,19 @@
     "affects-stacking-context": true
   },
   "scrollbar-color": {
-    "strip-whitespace": true,
     "affects-layout": false,
     "animation-type": "by-computed-value",
     "inherited": "yes",
     "initial": "auto"
   },
   "scrollbar-gutter": {
-    "strip-whitespace": true,
     "affects-layout": false,
     "animation-type": "discrete",
     "__comment": "This property should affect layout per-spec, but ladybird always uses overlay scrollbars so it doesn't in practice.",
     "inherited": false,
     "initial": "auto"
   },
   "scrollbar-width": {
-    "strip-whitespace": true,
     "affects-layout": false,
     "animation-type": "by-computed-value",
     "inherited": false,
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-overflow/parsing/scrollbar-gutter-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-overflow/parsing/scrollbar-gutter-valid.txt
@@ -0,0 +1,9 @@
+Harness status: OK
+
+Found 4 tests
+
+4 Pass
+Pass	e.style['scrollbar-gutter'] = "auto" should set the property value
+Pass	e.style['scrollbar-gutter'] = "stable" should set the property value
+Pass	e.style['scrollbar-gutter'] = "stable both-edges" should set the property value
+Pass	e.style['scrollbar-gutter'] = "both-edges stable" should set the property value
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-overflow/parsing/scrollbar-gutter-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-overflow/parsing/scrollbar-gutter-valid.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: parsing valid scrollbar-gutter declarations</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
+<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
+<meta name="assert" content="Parsing valid scrollbar-gutter declarations">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/parsing-testcommon.js"></script>
+
+<script>
+
+    test_valid_value("scrollbar-gutter", "auto");
+    test_valid_value("scrollbar-gutter", "stable");
+    test_valid_value("scrollbar-gutter", "stable both-edges");
+
+    test_valid_value("scrollbar-gutter", "both-edges stable", "stable both-edges");
+
+</script>
