[css-scrollbars-1] How are the specified color used?

[frivoal]

The spec is not specific about how the user agent is supposed to use the color provided. Is it required that the thumb / track are painted flat, entirely colored with the specified color and only that one? Is it OK if they merely use the color as input to what the dominant tint of these parts should be, similarly to how accent color works?

If you look at a variety of operating systems, it has happened sometimes (and notably, that's the case now) that either or both of the thumb and track had a flat single color design, but that is far from the only possible variant.

As the specification does not require a particular way the color should be used, I assumed it was fine for user agents to incorporate it in any way they wanted into the coloring of the thumb/track.

However, some tests, like http://wpt.live/css/css-scrollbars/scrollbar-color-012.html and https://wpt.fyi/results/css/css-scrollbars/transparent-on-root.html assume that if you specify a color, you get that color and nothing else.

The spec currently allows a simplification of the scrollbar design (though not necessarily all the way down to a single-color flat design) when colors are specified, but it doesn't require it.

implementations may render a simpler scrollbar than the default platform UI rendering, and color it accordingly.

If that is an expectation we want to depend on, we should add it to the spec. But is it?

Note: On top of that, these tests are a bit of a special case in other ways as well:

• The color they use is transparent, for both the thumb and track, with the intent that the characteristic discussed above will result in an wholly invisible thumb and track. I think this is just trying to use the (assumed) normal coloring rule, but maybe it's meant to be a special case?
• They assume there is no other component to the scrollbar (such as buttons), so that if the thumb and track are invisible, the whole scrollbar is invisible. Although this can be true on some platforms, I don't think that assumption can be depended upon in general. That said, this issue is not about that aspect of the tests.

[LeaVerou]

I think the spec should be clear that the UA should use that color to generate a reasonable color scheme for the scrollbar, not to indiscriminately apply that particular color to everything, degrading usability for end-users in the process. End-users over authors :) That said, the color itself should be used in some part of the scrollbar, i.e. it shouldn't be just variations.

[css-meeting-bot]

The CSS Working Group just discussed [css-scrollbars-1] How are the specified color used?, and agreed to the following:

• RESOLVED: no change to spec for non-transparent colors (tests need fixing)

The full IRC log of that discussion

<fantasai> florian: Contradiction between spec and tests
<fantasai> florian: tests are being more specific than the specs
<fantasai> florian: css-scrollbars allows setting color of thumb and track
<fantasai> florian: doesn't say how the color is used
<fantasai> florian: my interpretation was similar to accent-color, browser can use in a reasonable way
<fantasai> florian: if scrollbar is very plain, then it will be very basic
<fantasai> florian: but if has highlights, shadows, shaping, etc. then it would tint appropriately
<fantasai> florian: tests assume flat color
<fantasai> florian: and e.g. transparent means you can't see the scrollbar at all
<fantasai> florian: Either the tests or the spec are wrong, since they don't agree with each other
<emilio> q+
<fantasai> florian: Lea opined that it should indeed be like accent-color
<astearns> ack emilio
<fantasai> emilio: Agree in general, if you specify a color you're not forced to use just that color
<fantasai> emilio: but if you set both colors to transparent, it should probably require a transparent scrollbar
<fantasai> emilio: mostly because that's a useful way to e.g. show the scrollbar on :hover
<fantasai> florian: there's a separate issue on transparency
<fantasai> florian: could consider it a special case or not
<fantasai> florian: if no special case for transparency, then need to figure how how it's special
<astearns> ack fantasai
<fantasai> emilio: I added some of the transparent tests because someone was trying to go for this effect, and we didn't have it working on linux
<TabAtkins> fantasai: I agree with Lea's comment in the issue
<fantasai> https://github.com//issues/9851#issuecomment-1994722439
<TabAtkins> fantasai: You should use the colro to generate a usable scheme that matches the way the scrollbar is normally styled, and the color itself should be used *somewhere* (rather than just variations of it)
<fantasai> florian: Propose resolution that at least if the color isn't transparent, do what Lea said
<fantasai> astearns: so for non-transparent colors, current tests are invalid?
<fantasai> florian: right
<fantasai> florian: means it'll be hard to test, but that's a separate problem
<fantasai> astearns: Proposed no change to spec for non-transparent colors, meaning current tests are overprescriptive
<fantasai> florian: might add a note to highlight this impact, but no normative change to spec
<fantasai> +1
<fantasai> RESOLVED: no change to spec for non-transparent colors (tests need fixing)