Bug 243539

*** Bug 67157 has been marked as a duplicate of this bug. ***

<rdar://problem/98504661>

Created attachment 463998 [details]
wpt test case

According to the specification Firefox seems to do the right thing here.

The spec is https://w3c.github.io/csswg-drafts/cssom/#dom-window-getcomputedstyle

The code doesn't check in the first place if the pseudo-element starts with `:` before trying to remove them.
https://searchfox.org/wubkat/source/Source/WebCore/css/CSSComputedStyleDeclaration.cpp#49-59

Pull request: https://github.com/WebKit/WebKit/pull/7468

see Also https://github.com/web-platform-tests/wpt/pull/37452
for the WPT test.

There is a discussion going on https://github.com/web-platform-tests/wpt/pull/37452#discussion_r1046510669

Basically all browsers have issues currently, but Blink and WebKit right now should really validate the `::pseudoId`

<style>
#pseudo-invalid::marker {
  color: rgb(0 128 0);
}
#pseudo-invalid {
  color: rgb(255 0 0)
}
</style>
<!-- dot is green, text is red -->
  <ul><li id="pseudo-invalid">Item</li></ul>



getComputedStyle(document.getElementById("li"), "marker").color

EXPECTED: ''               
ACTUAL: 
Safari   'rgb(0, 128, 0)'
Firefox  'rgb(255, 0, 0)'      
Chrome   'rgb(0, 128, 0)'

getComputedStyle(document.getElementById("li"), ":marker").color

EXPECTED: ''               
ACTUAL: 
Safari   'rgb(0, 128, 0)'
Firefox  ''      
Chrome   'rgb(0, 128, 0)'

getComputedStyle(document.getElementById("li"), "foobar").color

EXPECTED: ''               
ACTUAL: 
Safari   'rgb(255, 0, 0)'
Firefox  'rgb(255, 0, 0)'      
Chrome   'rgb(255, 0, 0)'

getComputedStyle(document.getElementById("li"), ":foobar").color

EXPECTED: ''               
ACTUAL: 
Safari   'rgb(255, 0, 0)'
Firefox  ''      
Chrome   'rgb(255, 0, 0)'

Another difference.

data:text/html,<li style="color:red">item</li>

window.getComputedStyle(document.querySelector('li'), "::marker").color

Safari:  'rgb(255, 0, 0)'
Firefox: 'rgb(255, 0, 0)'
Chrome:  'rgb(255, 0, 0)' 

window.getComputedStyle(document.querySelector('li'), ":marker").color

Safari:  'rgb(255, 0, 0)'
Firefox: ''
Chrome:  'rgb(255, 0, 0)' 

window.getComputedStyle(document.querySelector('li'), "marker").color

Safari:  'rgb(255, 0, 0)'
Firefox: 'rgb(255, 0, 0)'
Chrome:  'rgb(255, 0, 0)'

https://w3c.github.io/csswg-drafts/cssom/#ref-for-dom-window-getcomputedstyle

The getComputedStyle(elt, pseudoElt) method must run these steps:

1. Let doc be elt’s node document.
2. Let obj be elt.
3. If pseudoElt is provided, is not the empty string, and starts with a colon, then:
   3.1 Parse pseudoElt as a <pseudo-element-selector>, and let type be the result.
   3.2 If type is failure, or is an ::slotted() or ::part() pseudo-element, let obj be null.
   3.3 Otherwise let obj be the given pseudo-element of elt.
       Note: CSS2 pseudo-elements should match both the double 
       and single-colon versions. That is, both :before 
       and ::before should match above.
4. Let decls be an empty list of CSS declarations.
5. If obj is not null, and elt is connected, part of the flat tree, and its shadow-including root has a browsing context which either doesn’t have a browsing context container, or whose browsing context container is being rendered, set decls to a list of all longhand properties that are supported CSS properties, in lexicographical order, with the value being the resolved value computed for obj using the style rules associated with doc. Additionally, append to decls all the custom properties whose computed value for obj is not the guaranteed-invalid value.

Given that isn't https://github.com/web-platform-tests/wpt/commit/c5a4bf6cbedee8b11c36a0bd499ffa16e917d618 wrong?

Why should it return the color of the element when the pseudo-element argument is invalid?

Oh wait, it's correct because of the requirement that the argument needs to start with a colon.

Pull request: https://github.com/WebKit/WebKit/pull/22259

Committed 272543@main (080d12dea41b): <https://commits.webkit.org/272543@main>

Reviewed commits have been landed. Closing PR #22259 and removing active labels.