RESOLVED FIXED 243539
Correct getComputedStyle() for invalid pseudo-elements 
https://bugs.webkit.org/show_bug.cgi?id=243539
Summary Correct getComputedStyle() for invalid pseudo-elements
Ahmad Saleem
Reported 2022-08-04 06:20:20 PDT
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!
Attachments
wpt test case (1.63 KB, text/html)
2022-12-11 20:24 PST, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Ahmad Saleem
Comment 1 2022-08-06 05:27:25 PDT
*** Bug 67157 has been marked as a duplicate of this bug. ***
Radar WebKit Bug Importer
Comment 2 2022-08-11 06:21:15 PDT
<rdar://problem/98504661>
Karl Dubost
Comment 3 2022-12-11 20:24:59 PST
Created attachment 463998 [details] wpt test case According to the specification Firefox seems to do the right thing here.
Karl Dubost
Comment 5 2022-12-11 20:41:50 PST
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
Comment 6 2022-12-11 23:30:27 PST
Pull request: https://github.com/WebKit/WebKit/pull/7468
Karl Dubost
Comment 7 2022-12-12 00:41:57 PST
see Also https://github.com/web-platform-tests/wpt/pull/37452 for the WPT test.
Karl Dubost
Comment 8 2022-12-12 17:11:13 PST
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
Comment 9 2022-12-14 00:48:58 PST
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
Comment 10 2022-12-14 01:23:24 PST
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
Comment 11 2023-12-24 01:41:10 PST
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
Comment 12 2023-12-24 01:53:38 PST
Oh wait, it's correct because of the requirement that the argument needs to start with a colon.
Anne van Kesteren
Comment 13 2023-12-28 07:55:02 PST
Pull request: https://github.com/WebKit/WebKit/pull/22259
EWS
Comment 14 2023-12-31 09:33:46 PST
Committed 272543@main (080d12dea41b): <https://commits.webkit.org/272543@main> Reviewed commits have been landed. Closing PR #22259 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.