Bug 287948

Summary: Allow use of ::before/::after pseudo-elements with <progress>
Product: WebKit Reporter: Antoine Quint <graouts>
Component: CSSAssignee: Antti Koivisto <koivisto>
Status: RESOLVED FIXED    
Severity: Normal CC: karlcow, koivisto, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 284540    
Attachments:
Description Flags
Test none

Antoine Quint
Reported 2025-02-19 02:21:33 PST
Created attachment 474284 [details] 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.
Attachments
Test (1.36 KB, text/html)
2025-02-19 02:21 PST, Antoine Quint 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Antoine Quint
Comment 1 2025-02-19 02:23:38 PST
This is blocking bug 284540 which has some scroll-animations issues but, once solved, revealed this specific issue.
Radar WebKit Bug Importer
Comment 2 2025-02-19 02:23:58 PST
<rdar://problem/145125372>
Antti Koivisto
Comment 3 2025-05-07 05:59:08 PDT
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>
Antti Koivisto
Comment 4 2025-05-08 01:01:53 PDT
Pull request: https://github.com/WebKit/WebKit/pull/45102
EWS
Comment 5 2025-05-08 05:18:19 PDT
Committed 294663@main (d793d6d497f0): <https://commits.webkit.org/294663@main> Reviewed commits have been landed. Closing PR #45102 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.