RESOLVED DUPLICATE of bug 271040 279252
Feature detection of starting styles doesn't work 
https://bugs.webkit.org/show_bug.cgi?id=279252
Summary Feature detection of starting styles doesn't work
Rogier de Ruijter
Reported 2024-09-06 02:02:38 PDT
Using the following method to detect if starting styles are available in the browser, does work in Chrome but doesn't work in Safari. ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page Title</title> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> </body> <style> @property --supported { syntax: "<number>"; initial-value: 0; inherits: false; } :root { transition: --supported 0s calc(infinity * 1s); } @starting-style { :root { --supported: 1; } } body { background: red; } @container style(--supported: 1) { body { background: green; } </style> </html> ``` Live demo can be seen here: https://www.bram.us/2024/07/11/feature-detect-css-starting-style-support/
Attachments
Reduction without @starting-style (363 bytes, text/html)
2024-09-10 06:53 PDT, Antoine Quint 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2024-09-08 19:53:38 PDT
PASS Chrome FAIL Safari, Firefox
Radar WebKit Bug Importer
Comment 2 2024-09-09 10:42:50 PDT
<rdar://problem/135557879>
Antoine Quint
Comment 3 2024-09-10 05:50:04 PDT
It seems like we're computing the wrong "to" value for the CSS Transition here, not picking up on the `--supported` initial value and using "1" for both "from" and "to", unlike Chrome which goes from "1" to "0".
Antoine Quint
Comment 4 2024-09-10 06:40:39 PDT
Worth noting that "getComputedStyle(document.body).getPropertyValue("--supported")" returns "0", so the transition seems to apply the same way in Chrome and Safari. I wonder if the bug here is about "@container style(--supported: 1)" not working as expected.
Antoine Quint
Comment 5 2024-09-10 06:53:00 PDT
Created attachment 472515 [details] Reduction without @starting-style Attaching a test (custom-property-container-query.html) that removes @starting-style and CSS Transitions from the equation and only checks whether the container query works for the custom property and this test fails in Safari and Firefox but works in Chrome.
Antti Koivisto
Comment 6 2024-09-10 09:56:39 PDT
Looks like 271040 *** This bug has been marked as a duplicate of bug 271040 ***
Antoine Quint
Comment 7 2024-09-10 10:41:59 PDT
I think there are additional issues at play on top of bug 271040, so re-opening to debug them first.
Antti Koivisto
Comment 8 2024-09-11 06:33:27 PDT
The original reported issue appears to be fixed with https://commits.webkit.org/283480@main. Lets dupe this one for clarity and file a separate bug for the getComputedStyle() issue mentioned above. *** This bug has been marked as a duplicate of bug 271040 ***
Antoine Quint
Comment 9 2024-09-11 07:07:15 PDT
I filed bug 279514 for the getKeyframes() / getComputedStyle() issue.
Note You need to log in before you can comment on or make changes to this bug.