The styles added by https://webkit.org/b/148120 no longer work. `input[type=range]::-webkit-slider-runnable-track { ... }` still works, but adding `::before` to the rule has no effect. As an aside, neither of the two rules show up in the styles sidebar (even with Shadow DOM visible).
Oh forgot to mention this issue was circumvented by the changes in <https://webkit.org/b/166933> (Source/WebInspectorUI/UserInterface/Views/Main.css).
Can you attach a reduced test case, so that there is no confusion?
Created attachment 298637 [details] [HTML] Reduction Notice that the color "green" never appears. <style> input { -webkit-appearance: none; } input::-webkit-slider-runnable-track { background-color: red; height: 1px; } input::-webkit-slider-runnable-track::before { display: block; height: 10px; content: ""; background-color: green; } </style> <input type="range">
This started failing with the new CSS Parser. My guess is that this is not a valid selector: input::-webkit-slider-runnable-track::before This is the text from the CSS Selectors Module 3: Spec: https://www.w3.org/TR/selectors/#pseudo-elements > Only one pseudo-element may appear per selector, and if present > it must appear after the sequence of simple selectors that represents > the subjects of the selector. Note: A future version of this > specification may allow multiple pseudo-elements per selector. I doubt it is very common, and given you worked around it, maybe we should close this as the new correct behavior. What do others think?
Searching WebCore's User Agent Stylesheets, I see the following cases of multiple pseudo-element selectors. $ find . | ack '\.css$' | xargs ack '::[^ ]+::' Modules/mediacontrols/mediaControlsApple.css 356:video::-webkit-media-controls-volume-slider::-webkit-slider-thumb, 357:audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb { 559:video::-webkit-media-controls-timeline::-webkit-slider-thumb, 560:audio::-webkit-media-controls-timeline::-webkit-slider-thumb { Modules/mediacontrols/mediaControlsBase.css 245:video::-webkit-media-controls-volume-slider::-webkit-slider-thumb, 246:audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb { 264:video::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active, 265:video::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb, 266:audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active, 267:audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb { 427:video::-webkit-media-controls-timeline::-webkit-slider-thumb, 428:audio::-webkit-media-controls-timeline::-webkit-slider-thumb { 447:video::-webkit-media-controls-timeline::-webkit-slider-thumb:active, 448:video::-webkit-media-controls-timeline:active::-webkit-slider-thumb, 449:audio::-webkit-media-controls-timeline::-webkit-slider-thumb:active, 450:audio::-webkit-media-controls-timeline:active::-webkit-slider-thumb, 609:video:-webkit-full-screen::-webkit-media-controls-volume-slider::-webkit-slider-thumb { Modules/mediacontrols/mediaControlsiOS.css 413:audio::-webkit-media-controls-timeline::-webkit-slider-runnable-track, 414:video::-webkit-media-controls-timeline::-webkit-slider-runnable-track { 420:video::-webkit-media-controls-timeline::-webkit-slider-thumb, 421:audio::-webkit-media-controls-timeline::-webkit-slider-thumb { 434:video::-webkit-media-controls-timeline::-webkit-slider-thumb:active, 435:audio::-webkit-media-controls-timeline::-webkit-slider-thumb:active { 439:audio::-webkit-media-controls-timeline::-webkit-slider-thumb { Maybe these work in some other way? Either way they may need to be sanity checked to make sure they are still working.
Pull request: https://github.com/WebKit/WebKit/pull/22265
Committed 272555@main (5444b05a5fea): <https://commits.webkit.org/272555@main> Reviewed commits have been landed. Closing PR #22265 and removing active labels.
<rdar://problem/120343021>