287948 2025-02-19 02:21:33 -0800 Allow use of ::before/::after pseudo-elements with <progress> 2025-05-08 05:18:21 -0700 1 1 1 Unclassified WebKit CSS WebKit Nightly Build Unspecified Unspecified RESOLVED FIXED InRadar P2 Normal --- 284540 1 graouts koivisto karlcow koivisto webkit-bug-importer oldest_to_newest 2095807 0 474284 graouts 2025-02-19 02:21:33 -0800 Created attachment 474284 Test The attached test case uses a custom property defined using `@property` and `inherits: true` to set the width of a `::before` pseudo-element: ``` @property --y { syntax: '<number>'; inherits: true; initial-value: 0.5; } progress { width: 150px; height: 150px; appearance: none; position: relative; --y: 0.25; animation: y 250ms both; } progress::before { position: absolute; content: ""; width: calc(var(--y) * 100%); height: 100%; background-color: green; } @keyframes y { from { --y: 0 } to { --y: 1 } } ``` In Chrome, the animation is visible, but in Firefox and WebKit it is not. The test also queries the computed style of the `<progress>` element and its `::before` pseudo-element separately and it appears the `--y` property is not inherited on the element. Commenting out the `animation` property shows in the console that the `--y` property is correctly inherited when not animated, but it doesn't get picked up in the rendering. 2095808 1 graouts 2025-02-19 02:23:38 -0800 This is blocking bug 284540 which has some scroll-animations issues but, once solved, revealed this specific issue. 2095809 2 webkit-bug-importer 2025-02-19 02:23:58 -0800 <rdar://problem/145125372> 2115632 3 koivisto 2025-05-07 05:59:08 -0700 The test case reduces to not being able to use ::before with <progress> (which has UA shadow tree). Only browser where that works is Chrome and it is not clear to me that is something that should work. <!DOCTYPE html> <style> progress { width: 150px; height: 150px; appearance: none; position: relative; } progress::before { position: absolute; content: ""; width: 25%; height: 100%; background-color: green; } </style> <progress></progress> 2115833 4 koivisto 2025-05-08 01:01:53 -0700 Pull request: https://github.com/WebKit/WebKit/pull/45102 2115859 5 ews-feeder 2025-05-08 05:18:19 -0700 Committed 294663@main (d793d6d497f0): <https://commits.webkit.org/294663@main> Reviewed commits have been landed. Closing PR #45102 and removing active labels. 474284 2025-02-19 02:21:33 -0800 2025-02-19 02:21:33 -0800 Test custom-property-inheritance-on-pseudo-elements.html text/html 1393 graouts PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0i dXRmLTgiPgogIDxtZXRhIGh0dHAtZXF1aXY9IngtdWEtY29tcGF0aWJsZSIgY29udGVudD0iaWU9 ZWRnZSI+CiAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0 aCwgaW5pdGlhbC1zY2FsZT0xLCBzaHJpbmstdG8tZml0PW5vIj4KCiAgPHRpdGxlPjwvdGl0bGU+ Cgo8c3R5bGU+CgogICAgQHByb3BlcnR5IC0teSB7CiAgICAgIHN5bnRheDogJzxudW1iZXI+JzsK ICAgICAgaW5oZXJpdHM6IHRydWU7CiAgICAgIGluaXRpYWwtdmFsdWU6IDAuNTsKICAgIH0KCiAg ICBwcm9ncmVzcyB7CiAgICAgIHdpZHRoOiAxNTBweDsKICAgICAgaGVpZ2h0OiAxNTBweDsKICAg ICAgYXBwZWFyYW5jZTogbm9uZTsKICAgICAgcG9zaXRpb246IHJlbGF0aXZlOwogICAgICAtLXk6 IDAuMjU7CiAgICAgIC8qYW5pbWF0aW9uOiB5IDI1MG1zIGJvdGg7Ki8KICAgIH0KCiAgICBwcm9n cmVzczo6YmVmb3JlIHsKICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICBjb250ZW50OiAi IjsKICAgICAgd2lkdGg6IGNhbGModmFyKC0teSkgKiAxMDAlKTsKICAgICAgaGVpZ2h0OiAxMDAl OwogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBncmVlbjsKICAgIH0KCiAgICBAa2V5ZnJhbWVzIHkg ewogICAgICBmcm9tIHsgLS15OiAwIH0KICAgICAgdG8geyAtLXk6IDEgfQogICAgfQoKPC9zdHls ZT4KICAKPC9oZWFkPgo8Ym9keT4KCjxwcm9ncmVzcz48L3Byb2dyZXNzPgoKPHNjcmlwdD4KCiAg ICBjb25zdCBhbmltYXRpb24gPSBkb2N1bWVudC5nZXRBbmltYXRpb25zKClbMF07CiAgICBjb25z dCBwcm9ncmVzcyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoInByb2dyZXNzIik7CgogICAgY29u c3QgZHVtcEFuaW1hdGlvbnMgPSAoKSA9PiB7CiAgICAgICAgY29uc29sZS5ncm91cChkb2N1bWVu dC50aW1lbGluZS5jdXJyZW50VGltZSk7CiAgICAgICAgY29uc29sZS5sb2coYC0teSBvbiA8cHJv Z3Jlc3M+ID0gJHtnZXRDb21wdXRlZFN0eWxlKHByb2dyZXNzKS5nZXRQcm9wZXJ0eVZhbHVlKCct LXknKX1gKTsKICAgICAgICBjb25zb2xlLmxvZyhgLS15IG9uIDxwcm9ncmVzcz46OmJlZm9yZSA9 ICR7Z2V0Q29tcHV0ZWRTdHlsZShwcm9ncmVzcywgIjo6YmVmb3JlIikuZ2V0UHJvcGVydHlWYWx1 ZSgnLS15Jyl9YCk7CiAgICAgICAgY29uc29sZS5ncm91cEVuZCgpOwogICAgICAgIGlmIChhbmlt YXRpb24/LnBsYXlTdGF0ZSA9PSAicnVubmluZyIpCiAgICAgICAgICAgIHJlcXVlc3RBbmltYXRp b25GcmFtZShkdW1wQW5pbWF0aW9ucyk7CiAgICB9OwoKICAgIGR1bXBBbmltYXRpb25zKCk7Cgo8 L3NjcmlwdD4KCjwvYm9keT4KPC9odG1sPg==