Bug 243539 – Correct getComputedStyle() for invalid pseudo-elements

• Component: CSS
• Status: RESOLVED FIXED

[Ahmad Saleem]

Hi Team,

Another test case from Chrome Bugs, where all browsers are different and I just wanted to share the latest share of Safari 15.6 on macOS 12.5:

Test Case - https://jsfiddle.net/rdb1jz8n/show

Chrome Bug - https://bugs.chromium.org/p/chromium/issues/detail?id=1197620

*** STEPS TO REPRODUCE ***

1) Run Test Case
2) Go to Console [Safari Developer Tools] and Run following:

getComputedStyle(document.getElementById("a"), "selection").color
getComputedStyle(document.getElementById("a"), ":selection").color

<> EXPECTED RESULTS:

"rgb(0, 0, 0)"
"rgb(0, 0, 0)"

<> ACTUAL RESULTS:

"rgb(255, 0, 0)"
"rgb(255, 0, 0)"

_________

All other browsers output:

Firefox Nightly 105 -> "rgb(0, 0, 0)" & "" (for first and second case respectively)
Chrome Canary 105 -> "rgb(255, 0, 0)" for both and matching Safari right now

______

Appreciate if we can align with web-spec and fix this across all browsers. If it is duplicate then please mark and if it is fixed upstream then please also mark duplicate in reference to other.

Thanks!

[Ahmad Saleem]

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

[Radar WebKit Bug Importer]

<rdar://problem/98504661>

[Karl Dubost]

Created attachment 463998 [details]
wpt test case

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

[Karl Dubost]

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

[Karl Dubost]

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

[Karl Dubost]

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

[Karl Dubost]

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

[Karl Dubost]

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)'

[Karl Dubost]

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)'

[Karl Dubost]

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.

[Anne van Kesteren]

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?

[Anne van Kesteren]

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

[Anne van Kesteren]

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

[EWS]

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

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