Add modern HSL syntax fast path to CSSParserFastPaths by cdumez · Pull Request #62026 · WebKit/WebKit

cdumez · 2026-04-04T08:41:40Z

`524b854`

Add modern HSL syntax fast path to CSSParserFastPaths
https://bugs.webkit.org/show_bug.cgi?id=311468

Reviewed by Darin Adler.

The existing HSL fast path only handled the legacy comma-separated syntax
(e.g., hsl(120, 100%, 50%)). Modern CSS uses space-separated syntax
(e.g., hsl(120 100% 50%) or hsl(120 100% 50% / 0.5)), which was falling
through to the full tokenizer and parser.

Rename parseLegacyHSL() to parseHSL() and teach it to handle the modern
space-separated syntax with optional slash-separated alpha, including
support for angle units (deg, rad) and percentage alpha values. The
legacy path is tried first since its comma check is effectively free
when it fails.

Also add API tests for both legacy and modern HSL parsing through
parseSimpleColor(), covering primary colors, black/white, alpha variants,
angle units, hue wrapping, and modern-vs-legacy equivalence, along with
negative tests for malformed modern HSL inputs.

Test: Tools/TestWebKitAPI/Tests/WebCore/CSSParserFastPaths.cpp

* Source/WebCore/css/parser/CSSParserFastPaths.cpp:
(WebCore::parseHSL):
(WebCore::parseNumericColor):
(WebCore::parseColor):
(WebCore::CSSParserFastPaths::parseNamedColor):
(WebCore::isUniversalKeyword):
(WebCore::parseLegacyHSL): Deleted.
* Tools/TestWebKitAPI/Tests/WebCore/CSSParserFastPaths.cpp:
(TestWebKitAPI::TEST(CSSParserFastPaths, ParseLegacyHsl)):
(TestWebKitAPI::TEST(CSSParserFastPaths, ParseModernHsl)):
(TestWebKitAPI::TEST(CSSParserFastPaths, ParseModernHslInvalid)):

Canonical link: https://commits.webkit.org/310603@main

9ad8e88

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows	Apple Internal
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win	✅ 🛠 ios-apple
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2	✅ 🧪 win-tests	✅ 🛠 mac-apple
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe		⏳ 🛠 vision-apple
	✅ 🧪 ios-wk2-wpt	✅ 🧪 api-mac-debug	✅ 🛠 gtk3-libwebrtc
	✅ 🧪 api-ios	✅ 🧪 mac-wk1	✅ 🛠 gtk
	✅ 🛠 ios-safer-cpp	✅ 🧪 mac-wk2	❌ 🧪 gtk-wk2
	✅ 🛠 vision	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 api-gtk
✅ 🛠 🧪 merge	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🛠 playstation
	✅ 🧪 vision-wk2	✅ 🧪 mac-intel-wk2
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2026-04-04T08:41:47Z

EWS run on previous version of this PR (hash 6f4b85c)

Details

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows	Apple Internal
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win	✅ 🛠 ios-apple
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2	✅ 🧪 win-tests	✅ 🛠 mac-apple
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe		✅ 🛠 vision-apple
	✅ 🧪 ios-wk2-wpt	✅ 🧪 api-mac-debug	✅ 🛠 gtk3-libwebrtc
	✅ 🧪 api-ios	✅ 🧪 mac-wk1	✅ 🛠 gtk
	✅ 🛠 ios-safer-cpp	✅ 🧪 mac-wk2	✅ 🧪 gtk-wk2
	✅ 🛠 vision	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 api-gtk
	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🛠 playstation
	✅ 🧪 vision-wk2	✅ 🧪 mac-intel-wk2
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

weinig · 2026-04-04T09:05:20Z

I can’t review in detail right away, and I have no problem with adding this, but I have been curious for a while if we have any data on how common the fast parser gets hit in the wild and/or perf tests.

My recollection is that it only gets applied for JS element.style[prop] = “foo”. Is that still the case?

cdumez · 2026-04-04T09:26:40Z

I can’t review in detail right away, and I have no problem with adding this, but I have been curious for a while if we have any data on how common the fast parser gets hit in the wild and/or perf tests.

My recollection is that it only gets applied for JS element.style[prop] = “foo”. Is that still the case?

I can't say I'm very familiar with our CSS parser so I asked Claude and it appears you are mostly correct!

CSSParserFastPaths are essentially only used when parsing a CSS property value from a raw string — which is primarily the CSSOM / JavaScript path. The
main call sites are:

CSSParser::parseValue — called from MutableStyleProperties::setProperty, which is the CSSOM path (element.style.prop = "foo",
element.style.setProperty(...), editing commands, @font-face JS API setters, etc.)

CSSPropertyParser::parseStylePropertyLonghand(String&) — only called from CSSValuePool for caching font family values.

Color/HTMLElement — for legacy HTML color attribute parsing.

CSS.supports() validation.

During normal stylesheet parsing (parsing <style> blocks or .css files), the input is already tokenized into a CSSParserTokenRange, and the parser calls
CSSPropertyParsing::parseStylePropertyLonghand(range, ...) directly — bypassing CSSParserFastPaths entirely.

I did not realize that when I wrote the PR but I did think it was odd to support the legacy syntax and not the modern one in the fast path. I figured more and more developers are likely switching to the new syntax 🤷🏻 I'll let CSS experts decide if it's worth it.

darinadler

I’m kind of surprised that the syntax for modern HSL is the same inside hsl() and hsla().

darinadler · 2026-04-04T22:40:12Z

+
+    skip(characters, hueEnd);
+
+    auto parsePercentage = [&](std::span<const CharacterType>& characters) -> std::optional<double> {


If we’re going to capture something here, why not capture characters too?

darinadler · 2026-04-04T22:41:27Z

+    auto resultColor = convertToColor<HSLFunctionModern, CSSColorFunctionForm::Absolute>(typedColor, 0);
+    return resultColor.tryGetAsSRGBABytes();


Suggested change

auto resultColor = convertToColor<HSLFunctionModern, CSSColorFunctionForm::Absolute>(typedColor, 0);

return resultColor.tryGetAsSRGBABytes();

return convertToColor<HSLFunctionModern, CSSColorFunctionForm::Absolute>(typedColor, 0).tryGetAsSRGBABytes();

darinadler · 2026-04-04T22:42:41Z

+    if (mightBeHSLA(characters)) {
+        auto innerCharacters = characters.subspan(5);
+        if (auto color = parseLegacyHSL(innerCharacters))
+            return color;
+        return parseModernHSL(innerCharacters);
+    }


Why not add a parseHSL that does both legacy and modern?

Suggested change

if (mightBeHSLA(characters)) {

auto innerCharacters = characters.subspan(5);

if (auto color = parseLegacyHSL(innerCharacters))

return color;

return parseModernHSL(innerCharacters);

}

if (mightBeHSLA(characters))

return parseHSL(characters.subspan(5));

darinadler · 2026-04-04T22:43:07Z

+    if (mightBeHSL(characters)) {
+        auto innerCharacters = characters.subspan(4);
+        if (auto color = parseLegacyHSL(innerCharacters))
+            return color;
+        return parseModernHSL(innerCharacters);
+    }


Why not add a parseHSL that does both legacy and modern?

Suggested change

if (mightBeHSL(characters)) {

auto innerCharacters = characters.subspan(4);

if (auto color = parseLegacyHSL(innerCharacters))

return color;

return parseModernHSL(innerCharacters);

}

if (mightBeHSL(characters))

return parseHSL(characters.subspan(4));

webkit-early-warning-system · 2026-04-05T08:33:27Z

EWS run on current version of this PR (hash 9ad8e88)

Details

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows	Apple Internal
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win	✅ 🛠 ios-apple
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2	✅ 🧪 win-tests	✅ 🛠 mac-apple
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe		⏳ 🛠 vision-apple
	✅ 🧪 ios-wk2-wpt	✅ 🧪 api-mac-debug	✅ 🛠 gtk3-libwebrtc
	✅ 🧪 api-ios	✅ 🧪 mac-wk1	✅ 🛠 gtk
	✅ 🛠 ios-safer-cpp	✅ 🧪 mac-wk2	❌ 🧪 gtk-wk2
	✅ 🛠 vision	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 api-gtk
✅ 🛠 🧪 merge	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🛠 playstation
	✅ 🧪 vision-wk2	✅ 🧪 mac-intel-wk2
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

https://bugs.webkit.org/show_bug.cgi?id=311468 Reviewed by Darin Adler. The existing HSL fast path only handled the legacy comma-separated syntax (e.g., hsl(120, 100%, 50%)). Modern CSS uses space-separated syntax (e.g., hsl(120 100% 50%) or hsl(120 100% 50% / 0.5)), which was falling through to the full tokenizer and parser. Rename parseLegacyHSL() to parseHSL() and teach it to handle the modern space-separated syntax with optional slash-separated alpha, including support for angle units (deg, rad) and percentage alpha values. The legacy path is tried first since its comma check is effectively free when it fails. Also add API tests for both legacy and modern HSL parsing through parseSimpleColor(), covering primary colors, black/white, alpha variants, angle units, hue wrapping, and modern-vs-legacy equivalence, along with negative tests for malformed modern HSL inputs. Test: Tools/TestWebKitAPI/Tests/WebCore/CSSParserFastPaths.cpp * Source/WebCore/css/parser/CSSParserFastPaths.cpp: (WebCore::parseHSL): (WebCore::parseNumericColor): (WebCore::parseColor): (WebCore::CSSParserFastPaths::parseNamedColor): (WebCore::isUniversalKeyword): (WebCore::parseLegacyHSL): Deleted. * Tools/TestWebKitAPI/Tests/WebCore/CSSParserFastPaths.cpp: (TestWebKitAPI::TEST(CSSParserFastPaths, ParseLegacyHsl)): (TestWebKitAPI::TEST(CSSParserFastPaths, ParseModernHsl)): (TestWebKitAPI::TEST(CSSParserFastPaths, ParseModernHslInvalid)): Canonical link: https://commits.webkit.org/310603@main

webkit-commit-queue · 2026-04-05T11:23:49Z

Committed 310603@main (524b854): https://commits.webkit.org/310603@main

Reviewed commits have been landed. Closing PR #62026 and removing active labels.

cdumez self-assigned this Apr 4, 2026

cdumez added the CSS Cascading Style Sheets implementation label Apr 4, 2026

cdumez marked this pull request as ready for review April 4, 2026 11:24

cdumez requested review from anttijk, darinadler and weinig April 4, 2026 11:25

darinadler approved these changes Apr 4, 2026

View reviewed changes

cdumez force-pushed the 311468_modern_hsl branch from 6f4b85c to 9ad8e88 Compare April 5, 2026 08:33

cdumez requested a review from darinadler April 5, 2026 08:35

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Apr 5, 2026

darinadler approved these changes Apr 5, 2026

View reviewed changes

cdumez added merge-queue Applied to send a pull request to merge-queue and removed merging-blocked Applied to prevent a change from being merged labels Apr 5, 2026

webkit-commit-queue force-pushed the 311468_modern_hsl branch from 9ad8e88 to 524b854 Compare April 5, 2026 11:23

webkit-commit-queue merged commit 524b854 into WebKit:main Apr 5, 2026

webkit-commit-queue removed the merge-queue Applied to send a pull request to merge-queue label Apr 5, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add modern HSL syntax fast path to CSSParserFastPaths#62026

Add modern HSL syntax fast path to CSSParserFastPaths#62026
webkit-commit-queue merged 1 commit intoWebKit:mainfrom
cdumez:311468_modern_hsl

cdumez commented Apr 4, 2026 •

edited by webkit-early-warning-system

Loading

Uh oh!

webkit-early-warning-system commented Apr 4, 2026 •

edited

Loading

Uh oh!

weinig commented Apr 4, 2026

Uh oh!

cdumez commented Apr 4, 2026

Uh oh!

darinadler left a comment

Uh oh!

darinadler Apr 4, 2026

Uh oh!

darinadler Apr 4, 2026

Uh oh!

darinadler Apr 4, 2026

Uh oh!

darinadler Apr 4, 2026

Uh oh!

webkit-early-warning-system commented Apr 5, 2026 •

edited

Loading

Uh oh!

webkit-commit-queue commented Apr 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants


		skip(characters, hueEnd);

		auto parsePercentage = [&](std::span<const CharacterType>& characters) -> std::optional<double> {

		auto resultColor = convertToColor<HSLFunctionModern, CSSColorFunctionForm::Absolute>(typedColor, 0);
		return resultColor.tryGetAsSRGBABytes();

	auto resultColor = convertToColor<HSLFunctionModern, CSSColorFunctionForm::Absolute>(typedColor, 0);
	return resultColor.tryGetAsSRGBABytes();
	return convertToColor<HSLFunctionModern, CSSColorFunctionForm::Absolute>(typedColor, 0).tryGetAsSRGBABytes();

Conversation

cdumez commented Apr 4, 2026 • edited by webkit-early-warning-system Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

524b854

Uh oh!

webkit-early-warning-system commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

weinig commented Apr 4, 2026

Uh oh!

cdumez commented Apr 4, 2026

Uh oh!

darinadler left a comment

Choose a reason for hiding this comment

Uh oh!

darinadler Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

darinadler Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

darinadler Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

darinadler Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

webkit-early-warning-system commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

webkit-commit-queue commented Apr 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

cdumez commented Apr 4, 2026 •

edited by webkit-early-warning-system

Loading

`524b854`

webkit-early-warning-system commented Apr 4, 2026 •

edited

Loading

webkit-early-warning-system commented Apr 5, 2026 •

edited

Loading