Bug 166946 - REGRESSION: Applying ::before to a pseudo-element no longer works
Summary: REGRESSION: Applying ::before to a pseudo-element no longer works
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2017-01-11 15:44 PST by Devin Rousso
Modified: 2017-01-11 19:51 PST (History)
6 users (show)

See Also:


Attachments
[HTML] Reduction (287 bytes, text/html)
2017-01-11 17:12 PST, Devin Rousso
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Devin Rousso 2017-01-11 15:44:20 PST
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).
Comment 1 Devin Rousso 2017-01-11 15:46:32 PST
Oh forgot to mention this issue was circumvented by the changes in <https://webkit.org/b/166933> (Source/WebInspectorUI/UserInterface/Views/Main.css).
Comment 2 Joseph Pecoraro 2017-01-11 15:51:28 PST
Can you attach a reduced test case, so that there is no confusion?
Comment 3 Devin Rousso 2017-01-11 17:12:02 PST
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">
Comment 4 Joseph Pecoraro 2017-01-11 19:46:55 PST
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?
Comment 5 Joseph Pecoraro 2017-01-11 19:51:51 PST
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.