[csswg-drafts] [css-scrollbars] Interaction between scrollbar-color and scrollbar-width with ::-webkit-scrollbar (#9856)

frivoal has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scrollbars] Interaction between scrollbar-color and scrollbar-width with ::-webkit-scrollbar ==
The css scrollbar spec has a section explicitly declaring `::-webkit-*` scrollbar pseudos, and any other similar approach as out of scope: https://drafts.csswg.org/css-scrollbars/#out-of-scope

As documented in multiple previous issues, this is based on the consensus (including implementers) that this approach is a bad idea, and that shipping `::-webkit-*` scrollbar pseudos in the first place was a bad idea / accident which we wish we had avoided.

However, the wpt test suite contains a significant number of tests about the interaction between `scrollbar-color` and `scrollbar-width` with `::-webkit-scrollbar`.

<details><summary>It has 17 tests, for a total of 21 subtests</summary>
<ul class="wpt-tests-list">
     <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-color-001.html" title="css/css-scrollbars/scrollbar-color-001.html">scrollbar-color-001.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-color-002.html" title="css/css-scrollbars/scrollbar-color-002.html">scrollbar-color-002.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-color-003.html" title="css/css-scrollbars/scrollbar-color-003.html">scrollbar-color-003.html<small> (2 tests)</small></a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-color-004.html" title="css/css-scrollbars/scrollbar-color-004.html">scrollbar-color-004.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-color-005.html" title="css/css-scrollbars/scrollbar-color-005.html">scrollbar-color-005.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-color-006.html" title="css/css-scrollbars/scrollbar-color-006.html">scrollbar-color-006.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-color-007.html" title="css/css-scrollbars/scrollbar-color-007.html">scrollbar-color-007.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-color-008.html" title="css/css-scrollbars/scrollbar-color-008.html">scrollbar-color-008.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-color-009.html" title="css/css-scrollbars/scrollbar-color-009.html">scrollbar-color-009.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-color-010.html" title="css/css-scrollbars/scrollbar-color-010.html">scrollbar-color-010.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-width-010.html" title="css/css-scrollbars/scrollbar-width-010.html">scrollbar-width-010.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-width-011.html" title="css/css-scrollbars/scrollbar-width-011.html">scrollbar-width-011.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-width-012.html" title="css/css-scrollbars/scrollbar-width-012.html">scrollbar-width-012.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-width-013.html" title="css/css-scrollbars/scrollbar-width-013.html">scrollbar-width-013.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-width-014.html" title="css/css-scrollbars/scrollbar-width-014.html">scrollbar-width-014.html</a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-width-015.html" title="css/css-scrollbars/scrollbar-width-015.html">scrollbar-width-015.html<small> (2 tests)</small></a><span class="wpt-results"></span>  
     </li><li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-scrollbars/scrollbar-width-016.html" title="css/css-scrollbars/scrollbar-width-016.html">scrollbar-width-016.html<small> (3 tests)</small></a><span class="wpt-results"></span>  
    </li></ul>
</details>

These tests are designed to pass if the user agent does not support `::-webkit-scrollbar` at all (which is the case for Firefox), but they do expect a specific behavior if `::-webkit-scrollbar` is supported, and that behavior is not specified anywhere as far as I can tell.

What should we do?
* while keeping `::-webkit-scrollbar` optional / deprecated, specify the expected interaction, maybe in css-scrollbars, maybe in https://compat.spec.whatwg.org/
* delete the tests, to avoid constraining the behavior of a feature we're trying to get rid of
* keep the tests, but mark them as [`.tentative`](https://web-platform-tests.org/writing-tests/file-names.html#:~:text=tests%2C%20like%20%E2%80%9CMUST%E2%80%9D.-,.tentative,-%3A%20Indicates%20that%20a)
* something else?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9856 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 25 January 2024 06:25:37 UTC