Merge pull request #1712 from lightpanda-io/css-selector-quote

Handle commas inside quoted attributes

src/browser/tests/document/query_selector_attributes.html

@@ -111,3 +111,15 @@
   const containerDataTest = document.querySelector('#container [data-test]');
   testing.expectEqual('First', containerDataTest.innerText);
 </script>
+
+<link rel="preload" as="image" imagesrcset="url1.png 1x, url2.png 2x" id="preload-link">
+
+<script id="commaInAttrValue">
+  // Commas inside quoted attribute values must not be treated as selector separators
+  const el = document.querySelector('link[rel="preload"][as="image"][imagesrcset="url1.png 1x, url2.png 2x"]');
+  testing.expectEqual('preload-link', el.id);
+
+  // Also test with single quotes inside selector
+  const el2 = document.querySelector("link[imagesrcset='url1.png 1x, url2.png 2x']");
+  testing.expectEqual('preload-link', el2.id);
+</script>

src/browser/webapi/selector/Parser.zig

@@ -87,15 +87,35 @@ pub fn parseList(arena: Allocator, input: []const u8, page: *Page) ParseError![]
 
         var comma_pos: usize = trimmed.len;
         var depth: usize = 0;
+        var in_quote: u8 = 0; // 0 = not in quotes, '"' or '\'' = in that quote type
         var i: usize = 0;
         while (i < trimmed.len) {
             const c = trimmed[i];
+            if (in_quote != 0) {
+                // Inside a quoted string
+                if (c == '\\') {
+                    // Skip escape sequence inside quotes
+                    i += 1;
+                    if (i < trimmed.len) i += 1;
+                } else if (c == in_quote) {
+                    // Closing quote
+                    in_quote = 0;
+                    i += 1;
+                } else {
+                    i += 1;
+                }
+                continue;
+            }
             switch (c) {
                 '\\' => {
                     // Skip escape sequence (backslash + next character)
                     i += 1;
                     if (i < trimmed.len) i += 1;
                 },
+                '"', '\'' => {
+                    in_quote = c;
+                    i += 1;
+                },
                 '(' => {
                     depth += 1;
                     i += 1;