-
Notifications
You must be signed in to change notification settings - Fork 710
[css-animations-1] Font-relative units in keyframes #3751
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
cc @birtles I think off-hand I'd consider this a Firefox bug. But note that Blink has issues in here as well (i.e., I think the third element in this test-case should grow): <!doctype html>
<style>
@keyframes anim1 {
from { width: 10em; font-size: 10px; }
to { width: 30em; font-size: 50px; }
}
@keyframes anim2 {
from { font-size: 10px; width: 10em; }
to { font-size: 50px; width: 30em; }
}
@keyframes anim3 {
from { font-size: 10px; }
to { font-size: 50px; }
}
div {
height: 60px;
background: purple;
animation: anim1 10s linear infinite;
margin: 5px 0;
}
div + div {
animation-name: anim2;
}
div + div + div {
width: 30em;
animation-name: anim3;
}
</style>
<div></div>
<div></div>
<div></div> |
Yeah, that's a known related issue in Blink. |
Hmm. 🤔 § 3. Animations [css-animations-1]:
But then also: § 3. Combining Values: Interpolation, Addition, and Accumulation [css-values-4]
So ... should the interpolation happen in |
The newest definition of the Interestingly, the MDN page for the With all that said, I wouldn't consider either behavior a bug until the [css-animations] spec resolves its issue about the interpolation rules between keyframes. |
So this is basically a dupe of #66 (which, if you follow far enough, will take you to this mail from dbaron) I wrote a test case with a few variations on the test case from the first comment: https://codepen.io/birtles/pen/drQQaJ. Blink seems to mostly do G-β but has trouble with overlapping keyframes and, as Emilio points out, reflecting the animated font-size on static declarations. Edge doesn't seem to recognize I thought we fixed some of these issues in Firefox when we switched to Servo, but I guess not. I believe we might have deferred the ordering dependency introduced by So I think we already have a resolution to do G-β, it just needs to be implemented in Firefox, tested (the WPT for this spec need rewriting first) and specced. Unfortunately this behavior does mean that some animations can no longer effectively be run on the compositor. |
This is the "Keyframe Animation Inconsistency" described in the initial StyleCascade design doc [1] (see Appendix). This was fixed at some point during the StyleCascade work, probably when interpolations started using the same StyleCascade instance as the main declarations. The test only asserts equality between the standard and custom property cases, while ignoring absolute values, as browser disagree wildly on what that value should be at the moment [2]. [1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I [2] w3c/csswg-drafts#3751 Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1
This is the "Keyframe Animation Inconsistency" described in the initial StyleCascade design doc [1] (see Appendix). This was fixed at some point during the StyleCascade work, probably when interpolations started using the same StyleCascade instance as the main declarations. The test only asserts equality between the standard and custom property cases, while ignoring absolute values, as browser disagree wildly on what that value should be at the moment [2]. [1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I [2] w3c/csswg-drafts#3751 Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150432 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#759618}
This is the "Keyframe Animation Inconsistency" described in the initial StyleCascade design doc [1] (see Appendix). This was fixed at some point during the StyleCascade work, probably when interpolations started using the same StyleCascade instance as the main declarations. The test only asserts equality between the standard and custom property cases, while ignoring absolute values, as browser disagree wildly on what that value should be at the moment [2]. [1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I [2] w3c/csswg-drafts#3751 Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150432 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#759618}
This is the "Keyframe Animation Inconsistency" described in the initial StyleCascade design doc [1] (see Appendix). This was fixed at some point during the StyleCascade work, probably when interpolations started using the same StyleCascade instance as the main declarations. The test only asserts equality between the standard and custom property cases, while ignoring absolute values, as browser disagree wildly on what that value should be at the moment [2]. [1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I [2] w3c/csswg-drafts#3751 Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150432 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#759618}
…ize/width/<length> animation, a=testonly Automatic update from web-platform-tests Add WPT coverage for simultaneous font-size/width/<length> animation This is the "Keyframe Animation Inconsistency" described in the initial StyleCascade design doc [1] (see Appendix). This was fixed at some point during the StyleCascade work, probably when interpolations started using the same StyleCascade instance as the main declarations. The test only asserts equality between the standard and custom property cases, while ignoring absolute values, as browser disagree wildly on what that value should be at the moment [2]. [1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I [2] w3c/csswg-drafts#3751 Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150432 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#759618} -- wpt-commits: fc468874fa836b89cff342e9e35dc8c0379c4beb wpt-pr: 22991
…ize/width/<length> animation, a=testonly Automatic update from web-platform-tests Add WPT coverage for simultaneous font-size/width/<length> animation This is the "Keyframe Animation Inconsistency" described in the initial StyleCascade design doc [1] (see Appendix). This was fixed at some point during the StyleCascade work, probably when interpolations started using the same StyleCascade instance as the main declarations. The test only asserts equality between the standard and custom property cases, while ignoring absolute values, as browser disagree wildly on what that value should be at the moment [2]. [1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I [2] w3c/csswg-drafts#3751 Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150432 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#759618} -- wpt-commits: fc468874fa836b89cff342e9e35dc8c0379c4beb wpt-pr: 22991
…ize/width/<length> animation, a=testonly Automatic update from web-platform-tests Add WPT coverage for simultaneous font-size/width/<length> animation This is the "Keyframe Animation Inconsistency" described in the initial StyleCascade design doc [1] (see Appendix). This was fixed at some point during the StyleCascade work, probably when interpolations started using the same StyleCascade instance as the main declarations. The test only asserts equality between the standard and custom property cases, while ignoring absolute values, as browser disagree wildly on what that value should be at the moment [2]. [1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I [2] w3c/csswg-drafts#3751 Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150432 Reviewed-by: Rune Lillesveen <futharkchromium.org> Commit-Queue: Anders Hartvoll Ruud <andruudchromium.org> Cr-Commit-Position: refs/heads/master{#759618} -- wpt-commits: fc468874fa836b89cff342e9e35dc8c0379c4beb wpt-pr: 22991 UltraBlame original commit: ec4d98a812265604fd30612d4177b0a41f3542b7
…ize/width/<length> animation, a=testonly Automatic update from web-platform-tests Add WPT coverage for simultaneous font-size/width/<length> animation This is the "Keyframe Animation Inconsistency" described in the initial StyleCascade design doc [1] (see Appendix). This was fixed at some point during the StyleCascade work, probably when interpolations started using the same StyleCascade instance as the main declarations. The test only asserts equality between the standard and custom property cases, while ignoring absolute values, as browser disagree wildly on what that value should be at the moment [2]. [1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I [2] w3c/csswg-drafts#3751 Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150432 Reviewed-by: Rune Lillesveen <futharkchromium.org> Commit-Queue: Anders Hartvoll Ruud <andruudchromium.org> Cr-Commit-Position: refs/heads/master{#759618} -- wpt-commits: fc468874fa836b89cff342e9e35dc8c0379c4beb wpt-pr: 22991 UltraBlame original commit: ec4d98a812265604fd30612d4177b0a41f3542b7
…ize/width/<length> animation, a=testonly Automatic update from web-platform-tests Add WPT coverage for simultaneous font-size/width/<length> animation This is the "Keyframe Animation Inconsistency" described in the initial StyleCascade design doc [1] (see Appendix). This was fixed at some point during the StyleCascade work, probably when interpolations started using the same StyleCascade instance as the main declarations. The test only asserts equality between the standard and custom property cases, while ignoring absolute values, as browser disagree wildly on what that value should be at the moment [2]. [1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I [2] w3c/csswg-drafts#3751 Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150432 Reviewed-by: Rune Lillesveen <futharkchromium.org> Commit-Queue: Anders Hartvoll Ruud <andruudchromium.org> Cr-Commit-Position: refs/heads/master{#759618} -- wpt-commits: fc468874fa836b89cff342e9e35dc8c0379c4beb wpt-pr: 22991 UltraBlame original commit: ec4d98a812265604fd30612d4177b0a41f3542b7
Closing as Duplicate of #5125. |
…ize/width/<length> animation, a=testonly Automatic update from web-platform-tests Add WPT coverage for simultaneous font-size/width/<length> animation This is the "Keyframe Animation Inconsistency" described in the initial StyleCascade design doc [1] (see Appendix). This was fixed at some point during the StyleCascade work, probably when interpolations started using the same StyleCascade instance as the main declarations. The test only asserts equality between the standard and custom property cases, while ignoring absolute values, as browser disagree wildly on what that value should be at the moment [2]. [1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I [2] w3c/csswg-drafts#3751 Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150432 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#759618} -- wpt-commits: fc468874fa836b89cff342e9e35dc8c0379c4beb wpt-pr: 22991
What does
em
resolve against in the following animation?In Chrome,
anim1
produces an animation forwidth
inem
-space, whereem
is resolved against the animatedfont-size
for each frame.In FF,
anim1
produces an animation forwidth
from160px
to320px
, i.e. thefont-size
of the keyframe is ignored.The text was updated successfully, but these errors were encountered: