243539 2022-08-04 06:20:20 -0700 Correct getComputedStyle() for invalid pseudo-elements 2023-12-31 09:33:48 -0800 1 1 1 Unclassified WebKit CSS Safari 15 Mac (Apple Silicon) macOS 12 RESOLVED FIXED https://bugs.webkit.org/show_bug.cgi?id=265237 https://bugs.webkit.org/show_bug.cgi?id=264103 BrowserCompat, InRadar P2 Normal --- 266862 1 ahmad.saleem792 annevk annevk ap bfulgham karlcow marc.hoyois rniwa simon.fraser webkit-bug-importer zalan oldest_to_newest 1888845 0 ahmad.saleem792 2022-08-04 06:20:20 -0700 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! 1889359 1 ahmad.saleem792 2022-08-06 05:27:25 -0700 *** Bug 67157 has been marked as a duplicate of this bug. *** 1890565 2 webkit-bug-importer 2022-08-11 06:21:15 -0700 <rdar://problem/98504661> 1918373 3 463998 karlcow 2022-12-11 20:24:59 -0800 Created attachment 463998 wpt test case According to the specification Firefox seems to do the right thing here. 1918374 4 karlcow 2022-12-11 20:26:52 -0800 The spec is https://w3c.github.io/csswg-drafts/cssom/#dom-window-getcomputedstyle 1918378 5 karlcow 2022-12-11 20:41:50 -0800 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 1918392 6 karlcow 2022-12-11 23:30:27 -0800 Pull request: https://github.com/WebKit/WebKit/pull/7468 1918412 7 karlcow 2022-12-12 00:41:57 -0800 see Also https://github.com/web-platform-tests/wpt/pull/37452 for the WPT test. 1918680 8 karlcow 2022-12-12 17:11:13 -0800 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)' 1919077 9 karlcow 2022-12-14 00:48:58 -0800 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)' 1919084 10 karlcow 2022-12-14 01:23:24 -0800 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. 2001788 11 annevk 2023-12-24 01:41:10 -0800 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? 2001790 12 annevk 2023-12-24 01:53:38 -0800 Oh wait, it's correct because of the requirement that the argument needs to start with a colon. 2002142 13 annevk 2023-12-28 07:55:02 -0800 Pull request: https://github.com/WebKit/WebKit/pull/22259 2002353 14 ews-feeder 2023-12-31 09:33:46 -0800 Committed 272543@main (080d12dea41b): <https://commits.webkit.org/272543@main> Reviewed commits have been landed. Closing PR #22259 and removing active labels. 463998 2022-12-11 20:24:59 -0800 2022-12-11 20:24:59 -0800 wpt test case marker-syntax-computed-style.html text/html 1670 karlcow PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KCjxoZWFkPgogICAgPG1ldGEgY2hhcnNl dD0iVVRGLTgiIC8+CiAgICA8bGluayByZWw9ImF1dGhvciIgdGl0bGU9IkthcmwgRHVib3N0IiBo cmVmPSJodHRwczovL2dpdGh1Yi5jb20va2FybGNvdyIgLz4KICAgIDxsaW5rIHJlbD0iaGVscCIg aHJlZj0iaHR0cHM6Ly93M2MuZ2l0aHViLmlvL2Nzc3dnLWRyYWZ0cy9jc3MtcHNldWRvLyNtYXJr ZXItcHNldWRvIiAvPgogICAgPGxpbmsgcmVsPSJoZWxwIiBocmVmPSJodHRwczovL3czYy5naXRo dWIuaW8vY3Nzd2ctZHJhZnRzL2Nzcy12YXJpYWJsZXMvI2RlZmluaW5nLXZhcmlhYmxlcyIgLz4K ICAgIDxzY3JpcHQgc3JjPSIvcmVzb3VyY2VzL3Rlc3RoYXJuZXNzLmpzIj48L3NjcmlwdD4KICAg IDxzY3JpcHQgc3JjPSIvcmVzb3VyY2VzL3Rlc3RoYXJuZXNzcmVwb3J0LmpzIj48L3NjcmlwdD4K ICAgIDx0aXRsZT46Om1hcmtlciBjb21wdXRlZC1zdHlsZTwvdGl0bGU+CiAgICA8c3R5bGU+CiAg ICAgICAgOjptYXJrZXIgewogICAgICAgICAgICBjb2xvcjogcmdiKDAgMTI4IDApOwogICAgICAg IH0KICAgICAgICBsaSB7CiAgICAgICAgICAgIGNvbG9yOiByZ2IoMjU1IDAgMCkKICAgICAgICB9 Cjwvc3R5bGU+CjwvaGVhZD4KCjxib2R5PgogICAgPHVsPgogICAgICAgIDxsaT5JdGVtPC9saT4K ICAgIDwvdWw+CiAgICA8c2NyaXB0PgogICAgICAgIHRlc3QoKCkgPT4gewogICAgICAgICAgICBs ZXQgbGkgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdsaScpOwogICAgICAgICAgICBsZXQgbWFy a2VyU3R5bGUgPSBnZXRDb21wdXRlZFN0eWxlKGxpLCAnOjptYXJrZXInKTsKICAgICAgICAgICAg YXNzZXJ0X2VxdWFscyhtYXJrZXJTdHlsZS5jb2xvciwgInJnYigwLCAxMjgsIDApIiwgImNvbG9y IGlzIGdyZWVuLiIpOwogICAgICAgIH0sIGBnZXRDb21wdXRlZFN0eWxlKCkgZm9yIDo6bWFya2Vy IHJldHVybnMgdGhlIHJpZ2h0IHZhbHVlYCk7CiAgICAgICAgdGVzdCgoKSA9PiB7CiAgICAgICAg ICAgIGxldCBsaSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2xpJyk7CiAgICAgICAgICAgIGxl dCBtYXJrZXJTdHlsZSA9IGdldENvbXB1dGVkU3R5bGUobGksICdtYXJrZXInKTsKICAgICAgICAg ICAgYXNzZXJ0X25vdF9lcXVhbHMobWFya2VyU3R5bGUuY29sb3IsICJyZ2IoMCwgMTI4LCAwKSIs ICJubyB2YWx1ZSBpcyByZXR1cm5lZC4iKTsKICAgICAgICB9LCBgZ2V0Q29tcHV0ZWRTdHlsZSgp IGZvciBpbnZhbGlkIG1hcmtlciBzaG91bGQgbm90IHJldHVybiB0aGUgY29sb3Igb2YgbWFya2Vy YCk7CiAgICAgICAgdGVzdCgoKSA9PiB7CiAgICAgICAgICAgIGxldCBsaSA9IGRvY3VtZW50LnF1 ZXJ5U2VsZWN0b3IoJ2xpJyk7CiAgICAgICAgICAgIGxldCBtYXJrZXJTdHlsZSA9IGdldENvbXB1 dGVkU3R5bGUobGksICdtYXJrZXInKTsKICAgICAgICAgICAgYXNzZXJ0X2VxdWFscyhtYXJrZXJT dHlsZS5jb2xvciwgInJnYigyNTUsIDAsIDApIiwgInRoZSByZXR1cm5lZCB2YWx1ZSBpcyB0aGUg b25lIG9mIGxpLiIpOwogICAgICAgIH0sIGBnZXRDb21wdXRlZFN0eWxlKCkgZm9yIGludmFsaWQg bWFya2VyIHJldHVybnMgdGhlIHZhbHVlIGZvciB0aGUgZWxlbWVudGApOwogICAgPC9zY3JpcHQ+ CjwvYm9keT4KCjwvaHRtbD4=