1424106 - -webkit pseudo-element selectors makes the CSS rules fail.

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Karl Dubost💡 :karlcow]

This is a spin-off of https://webcompat.com/issues/14117

Go to  https://www.saavn.com/corporate/help/
Just go to this page and notice how the magnifier is taking the full space.

In Safari it has the right size.
layout.css.servo.enabled: true
https://webcompat.com/uploads/2017/12/a8df6c71-d769-4069-8a0a-9a42340cfa6e.jpg



.promagnifier, .prosettings, .searchsettings, 
.search input[type=search]::-webkit-search-decoration,
.search input[type=search]::-webkit-search-cancel-button,
.search input[type=search]::-webkit-search-results-button,
.search input[type=search]::-webkit-search-results-decoration { 
      display: none !important; }


Removing the block 

.search input[type=search]::-webkit-search-decoration,
.search input[type=search]::-webkit-search-cancel-button,
.search input[type=search]::-webkit-search-results-button,
.search input[type=search]::-webkit-search-results-decoration

and everything is working.

Something is happening with the parsing of that section of selectors.

Comment 1

[Xidorn Quan [:xidorn] UTC+10]

So... it is expected behavior that when an unknown pseudo-element appears in the selector list, the whole selector list is invalid, and the rule would not apply.

However, it seems that WebKit and Blink have a quirk that, when the pseudo-element has -webkit- prefix, it is always treated valid. I have no idea whether we should spec and implement this quirk, or ask other browsers to drop this quirk as well as these pseudo-elements...

Comment 2

[Xidorn Quan [:xidorn] UTC+10]

Attachment: testcase showing the webkit-prefix pseudo-element quirk

Comment 3

[Xidorn Quan [:xidorn] UTC+10]

Filed w3c/csswg-drafts#2156 for this.

Comment 4

[Mike Taylor [:miketaylr]]

(In reply to Xidorn Quan [:xidorn] UTC+10 from comment #3)
> Filed w3c/csswg-drafts#2156 for this.

Sounds like it's too high for them to drop...

https://github.com/w3c/csswg-drafts/issues/2156#issuecomment-382730864

I wonder what kinds of things would break by fixing this...

Comment 6

[Xidorn Quan [:xidorn] UTC+10]

This may need to wait until the soft code freeze ends.

Comment 7

[Xidorn Quan [:xidorn] UTC+10]

Attachment: Bug 1424106 part 1 - Add starts_with_ignore_ascii_case method and use it for tree pseudos. r=emilio

Comment 8

[Xidorn Quan [:xidorn] UTC+10]

Attachment: Bug 1424106 - Accept unknown webkit pseudo-element. r=emilio

Depends on D4185

Comment 9

[Xidorn Quan [:xidorn] UTC+10]

Attachment: Bug 1424106 part 3 - Add web-platform tests for webkit pseudo-elements. r=emilio

Depends on D4186

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Does it make more sense to accept unknown webkit pseudo-elements, or to accept a list of known ones that webkit accepts?  (Otherwise wouldn't we accept things that webkit rejects?)

Comment 11

[Xidorn Quan [:xidorn] UTC+10]

WebKit and Blink accept any pseudo-element with -webkit-prefix. See w3c/csswg-drafts#2156.

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Oops, sorry, should have read more carefully.

Comment 13

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9003694 [details]
Bug 1424106 part 1 - Add starts_with_ignore_ascii_case method and use it for tree pseudos. r=emilio

Emilio Cobos Álvarez (:emilio) has approved the revision.

Comment 14

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9003696 [details]
Bug 1424106 part 3 - Add web-platform tests for webkit pseudo-elements. r=emilio

Emilio Cobos Álvarez (:emilio) has approved the revision.

Comment 15

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9003695 [details]
Bug 1424106 - Accept unknown webkit pseudo-element. r=emilio

Emilio Cobos Álvarez (:emilio) has approved the revision.

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/988b2e838fd1
Accept unknown webkit pseudo-element. r=emilio

Comment 17

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/12673 for changes under testing/web-platform/tests

Comment 18

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 19

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/988b2e838fd1

Comment 20

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged

Comment 21

[Xidorn Quan [:xidorn] UTC+10]

I tried to add a println in the parsing code to record what pseudo-elements would we encounter, and then visit several top sites. The following is a list of webkit-prefixed pseudo-elements I see:
    302 -webkit-input-placeholder
     91 -webkit-scrollbar
     39 -webkit-scrollbar-thumb
     33 -webkit-search-cancel-button
     29 -webkit-search-decoration
     24 -webkit-scrollbar-button
     18 -webkit-outer-spin-button
     18 -webkit-inner-spin-button
     17 -webkit-scrollbar-track
     10 -webkit-slider-thumb
      6 -webkit-media-controls-start-playback-button
      5 -webkit-slider-runnable-track
      3 -webkit-search-results-decoration
      3 -webkit-search-results-button
      3 -webkit-media-controls
      2 -webkit-scrollbar-corner
      2 -webkit-media-controls-wireless-playback-picker-button
      2 -webkit-media-controls-timeline
      2 -webkit-media-controls-time-remaining-display
      2 -webkit-media-controls-play-button
      2 -webkit-media-controls-fullscreen-button
      2 -webkit-media-controls-current-time-display
      2 -webkit-file-upload-button
      1 -webkit-validation-bubble-message
      1 -webkit-selection
      1 -webkit-scrollbar-track-piece
      1 -webkit-media-controls-enclosure

The number is the total time we parse such pseudo-element, not number of sites. But input-placeholder is indeed one I saw for many sites.

Comment 22

[Estelle Weyl]

updated https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions to reflect the change. 
No relevant compat tables were found that required updating.

Comment 23

[Xidorn Quan [:xidorn] UTC+10]

The note isn't strictly correct. Arbitrary -webkit-prefixed pseudo-class isn't treated valid with this bug, not do other browsers do. I've updated the note in the MDN page to reflect that.