Merge pull request #1704 from lightpanda-io/non-ascii-css-key

css: fix crash in consumeName() on UTF-8 multibyte sequences

src/browser/css/Tokenizer.zig

@@ -480,10 +480,11 @@ fn consumeName(self: *Tokenizer) []const u8 {
                 self.consumeEscape();
             },
             0x0 => self.advance(1),
-            '\x80'...'\xBF', '\xC0'...'\xEF', '\xF0'...'\xFF' => {
+            '\x80'...'\xFF' => {
-                // This byte *is* part of a multi-byte code point,
+                // Non-ASCII: advance over the complete UTF-8 code point in one step.
-                // we’ll end up copying the whole code point before this loop does something else.
+                // Using consumeChar() instead of advance(1) ensures we never land on
-                self.advance(1);
+                // a continuation byte, which advance() asserts against.
+                self.consumeChar();
             },
             else => {
                 if (self.hasNonAsciiAt(0)) {

src/browser/tests/css/stylesheet.html

@@ -256,3 +256,22 @@
     testing.expectTrue(!html.includes('opacity:0'));
 }
 </script>
+
+<script id="CSSStyleDeclaration_non_ascii_custom_property">
+{
+    // Regression test: accessing element.style must not crash when the inline
+    // style attribute contains CSS custom properties with non-ASCII (UTF-8
+    // multibyte) names, such as French accented characters.
+    // The CSS Tokenizer's consumeName() must advance over whole UTF-8 sequences
+    // rather than byte-by-byte to avoid landing on a continuation byte.
+    const div = document.createElement('div');
+    div.setAttribute('style',
+        '--color-store-bulles-\u00e9t\u00e9-fg: #6a818f;' +
+        '--color-store-soir\u00e9es-odl-fg: #56b3b3;' +
+        'color: red;'
+    );
+
+    // Must not crash, and ASCII properties that follow non-ASCII ones must be readable.
+    testing.expectEqual('red', div.style.getPropertyValue('color'));
+}
+</script>