Bug 241570 - WebKit doesn't re-resolve em-valued properties to account for font-size transitions
Summary: WebKit doesn't re-resolve em-valued properties to account for font-size trans...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-06-13 14:29 PDT by Daniel Holbert
Modified: 2022-06-14 14:52 PDT (History)
8 users (show)

See Also:


Attachments
testcase 1 (388 bytes, text/html)
2022-06-13 14:29 PDT, Daniel Holbert
no flags Details
CSS Animation of font-size combined with relative width value (374 bytes, text/html)
2022-06-14 11:00 PDT, Antoine Quint
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Holbert 2022-06-13 14:29:01 PDT
Created attachment 460214 [details]
testcase 1

STR:
1. Load attached testcase.
2. Hover the orange area.

ACTUAL RESULTS:
The orange area's width suddenly jumps to twice its original width.

EXPECTED RESULTS:
The orange area's width should grow gradually (in response to the font-size transition).


NOTES:
The element here has a width specified in `em` units, and hovering triggers a change to `font-size` which triggers a CSS transition.  That should add a value for `font-size` to the cascade, per https://www.w3.org/TR/css-transitions-1/#application , which should in turn influence the resolution of `em`-valued properties.

Safari 15.5 gives ACTUAL RESULTS.
Firefox and Chrome give EXPECTED RESULTS.
Comment 1 Daniel Holbert 2022-06-13 14:40:39 PDT
Note: I ran across this bug due to a bug report in Firefox, which turned out to be the reporter inadvertently depending on this WebKit bug.  (Chrome matches Firefox's behavior FWIW.)

That report was https://bugzilla.mozilla.org/show_bug.cgi?id=1774014, which I closed as invalid since Firefox and Chrome are pretty-clearly following the spec.

WebKit happens to match the reporter's expectations over there, but I'm pretty sure that's just an accident and is essentially due to this bug here.  If/when you fix this bug, I suspect you'll match Firefox and Chrome on the jsfiddle and attached testcase on https://bugzilla.mozilla.org/show_bug.cgi?id=1774014 .
Comment 2 Radar WebKit Bug Importer 2022-06-14 05:41:03 PDT
<rdar://problem/95105214>
Comment 3 Antoine Quint 2022-06-14 06:03:55 PDT
Thanks for filing this Daniel. Do you know whether this is already covered by WPT?
Comment 4 Antoine Quint 2022-06-14 06:10:24 PDT
I think this might be covered by the css/css-transitions/transition-base-response-*.html tests that WebKit is the sole engine to fail :(
Comment 5 Antoine Quint 2022-06-14 11:00:01 PDT
Created attachment 460235 [details]
CSS Animation of font-size combined with relative width value

Adding another test where we use a CSS Animation to animate font-size. In that example, the em-based width is never updated.
Comment 6 Daniel Holbert 2022-06-14 14:52:14 PDT
(In reply to Antoine Quint from comment #3)
> Thanks for filing this Daniel.

Thanks for taking a look!

> Do you know whether this is already covered
> by WPT?

I don't know offhand, no (though it sounds like you might've subsequently found some related WPT tests).