Enable system color by longvatrong111 · Pull Request #302 · servo/stylo

longvatrong111 · 2026-02-03T06:51:38Z

Enable system color and map keyword to value according to:
https://w3c.github.io/csswg-drafts/css-color-4/#valdef-color-canvastext
Values not mentioned are set to default.

Servo PR: servo/servo#42529

Loirooriol · 2026-02-09T12:37:10Z

I force-pushed main for the upgrade, can you rebase your changes?

longvatrong111 · 2026-02-10T08:20:54Z

I force-pushed main for the upgrade, can you rebase your changes?

sure, I updated.

Loirooriol · 2026-02-10T23:18:41Z

It seems you rebase the wrong one, it looks like the old code, not like c45ce85

Loirooriol · 2026-02-10T23:19:06Z

Also, can you open a Servo PR to run tests?

longvatrong111 · 2026-02-11T03:32:12Z

@Loirooriol ah, I've updated again.
And here is the Servo PR: servo/servo#42529. Manual test is ok.

~~Now Servo Cargo.toml doesn't point to head of stylo:main anymore, if this PR is merged, do I need to update Servo?~~ Seem like yes

Loirooriol · 2026-02-17T00:04:01Z

+
+        // Refer to spec
+        // <https://www.w3.org/TR/css-color-4/#css-system-colors>
+        // and computed style from Chrome


Where from Chrome? I'm seeing different values in LayoutTheme::DefaultSystemColor

Are they platform-specific ones? For what platform? Would it be better to use the default ones?

I get the computed style from Chrome devtool in a linux device, but seem like they are slightly different across devices. Better not mention Chrome here, we can define the colors ourselves, the visual looks are similar.

@Loirooriol AFAIK there is no default value, do you want to use value in Chromium source code? The current values are from devtool.

Loirooriol

Sorry for the delay.

I think it's slightly weird that the colors are hardcoded from what Chrome used on your system. Possibly, in the future the resolution should happen in Servo using a trait. But I guess this looks good as a start.

Enable system color and map keyword to value according to https://w3c.github.io/csswg-drafts/css-color-4/#valdef-color-canvastext Signed-off-by: batu_hoang <longvatrong111@gmail.com>

longvatrong111 · 2026-03-03T10:44:57Z

Sorry for the delay.

I think it's slightly weird that the colors are hardcoded from what Chrome used on your system. Possibly, in the future the resolution should happen in Servo using a trait. But I guess this looks good as a start.

@Loirooriol I see, I've rebase both PRs, look like they are ready now.

Enable system color: - stylo PR: servo/stylo#302 - Update WPT expectation - Update UA styleshee to use system color value --------- Signed-off-by: batu_hoang <longvatrong111@gmail.com>

Enable system color and map keyword to value according to: https://w3c.github.io/csswg-drafts/css-color-4/#valdef-color-canvastext Values not mentioned are set to default. Servo PR: servo/servo#42529 Signed-off-by: batu_hoang <longvatrong111@gmail.com>

…reviewers,dshin This imports servo/stylo#302 Differential Revision: https://phabricator.services.mozilla.com/D286389

…reviewers,dshin This imports #302 Differential Revision: https://phabricator.services.mozilla.com/D286389

longvatrong111 · 2026-03-11T04:19:31Z

Sorry for the delay.

I think it's slightly weird that the colors are hardcoded from what Chrome used on your system. Possibly, in the future the resolution should happen in Servo using a trait. But I guess this looks good as a start.

@Loirooriol can you explain how to implement this as a trait in Servo? I'm glad to continue

Loirooriol · 2026-03-11T06:52:40Z

See FontMetricsProvider in ExtraDeviceData, I was thinking something along these lines.

stylo/style/device/servo.rs

Lines 38 to 51 in f00c109

    
           /// A trait used to query font metrics in clients of Stylo. This is used by Device to 
        
           /// query font metrics in a way that is specific to the client using Stylo. 
        
           pub trait FontMetricsProvider: Debug + Sync { 
        
               /// Query the font metrics for the given font and the given base font size. 
        
               fn query_font_metrics( 
        
                   &self, 
        
                   vertical: bool, 
        
                   font: &Font, 
        
                   base_size: CSSPixelLength, 
        
                   flags: QueryFontMetricsFlags, 
        
               ) -> FontMetrics; 
        
               /// Gets the base size given a generic font family. 
        
               fn base_size_for_generic(&self, generic: GenericFontFamily) -> Length; 
        
           }

Loirooriol reviewed Feb 3, 2026

View reviewed changes

Comment thread style/values/specified/color.rs

Loirooriol reviewed Feb 3, 2026

View reviewed changes

Comment thread style/servo/media_queries.rs Outdated

longvatrong111 force-pushed the system-color branch 2 times, most recently from 78ec75d to 39096af Compare February 4, 2026 07:38

longvatrong111 requested a review from Loirooriol February 4, 2026 09:40

Loirooriol reviewed Feb 4, 2026

View reviewed changes

Comment thread style/values/specified/color.rs Outdated

longvatrong111 force-pushed the system-color branch 2 times, most recently from 4765f90 to 9985615 Compare February 4, 2026 11:16

Loirooriol reviewed Feb 4, 2026

View reviewed changes

Comment thread style/values/specified/color.rs Outdated

lukewarlow reviewed Feb 4, 2026

View reviewed changes

Comment thread style/servo/media_queries.rs

longvatrong111 force-pushed the system-color branch 2 times, most recently from 91fbcdd to 83812ce Compare February 5, 2026 05:59

longvatrong111 requested a review from Loirooriol February 5, 2026 06:14

Loirooriol reviewed Feb 6, 2026

View reviewed changes

Comment thread style/servo/media_queries.rs Outdated

Comment thread style/values/specified/color.rs Outdated

Comment thread style/servo/media_queries.rs Outdated

longvatrong111 force-pushed the system-color branch from 83812ce to c45ce85 Compare February 8, 2026 16:28

Loirooriol force-pushed the main branch from d99b4a5 to d9831d4 Compare February 9, 2026 11:12

longvatrong111 force-pushed the system-color branch from c45ce85 to 8d5a13d Compare February 10, 2026 08:13

longvatrong111 closed this Feb 10, 2026

longvatrong111 force-pushed the system-color branch from 8d5a13d to d9831d4 Compare February 10, 2026 08:17

longvatrong111 reopened this Feb 10, 2026

longvatrong111 requested a review from Loirooriol February 10, 2026 14:14

longvatrong111 force-pushed the system-color branch from c77570d to f8f1b1b Compare February 11, 2026 03:07

longvatrong111 mentioned this pull request Feb 12, 2026

stylo: Enable system color servo/servo#42529

Merged

longvatrong111 force-pushed the system-color branch from f8f1b1b to 8f66ad5 Compare February 16, 2026 22:06

Loirooriol reviewed Feb 17, 2026

View reviewed changes

longvatrong111 force-pushed the system-color branch from 8f66ad5 to 812f7f1 Compare February 22, 2026 07:18

longvatrong111 requested a review from Loirooriol February 24, 2026 02:24

Loirooriol approved these changes Mar 3, 2026

View reviewed changes

Enable system color

9a047fe

Enable system color and map keyword to value according to https://w3c.github.io/csswg-drafts/css-color-4/#valdef-color-canvastext Signed-off-by: batu_hoang <longvatrong111@gmail.com>

longvatrong111 force-pushed the system-color branch from 812f7f1 to 9a047fe Compare March 3, 2026 08:53

Loirooriol added this pull request to the merge queue Mar 3, 2026

Merged via the queue into servo:main with commit b22d59d Mar 3, 2026
5 checks passed

github-actions Bot pushed a commit that referenced this pull request Mar 7, 2026

Bug 2021454 - Enable system colors for Servo. r=firefox-style-system-…

4613792

…reviewers,dshin This imports #302 Differential Revision: https://phabricator.services.mozilla.com/D286389

Conversation

longvatrong111 commented Feb 3, 2026 • edited by Loirooriol Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Loirooriol commented Feb 9, 2026

Uh oh!

longvatrong111 commented Feb 10, 2026

Uh oh!

Loirooriol commented Feb 10, 2026

Uh oh!

Loirooriol commented Feb 10, 2026

Uh oh!

longvatrong111 commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Loirooriol Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

longvatrong111 Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

longvatrong111 Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Loirooriol left a comment

Choose a reason for hiding this comment

Uh oh!

longvatrong111 commented Mar 3, 2026

Uh oh!

Uh oh!

longvatrong111 commented Mar 11, 2026

Uh oh!

Loirooriol commented Mar 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

longvatrong111 commented Feb 3, 2026 •

edited by Loirooriol

Loading

longvatrong111 commented Feb 11, 2026 •

edited

Loading