Bug 241570

Summary: WebKit doesn't re-resolve em-valued properties to account for font-size transitions
Product: WebKit Reporter: Daniel Holbert <dholbert>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: dino, emilio, graouts, graouts, heycam, koivisto, mmaxfield, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
testcase 1
none
CSS Animation of font-size combined with relative width value none

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).
Comment 7 Antti Koivisto 2023-01-07 02:08:26 PST
This was fixed in <https://commits.webkit.org/258514@main>

*** This bug has been marked as a duplicate of bug 210963 ***