mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 21:28:04 +02:00
c634c6019a
Automatic update from web-platform-tests Base style should respond to animations modified with setKeyframes When animating font-affecting properties (e.g. font-size) while the base style contains font-relative units (e.g. em), we can not use the base computed style optimization, since the font-relative units in the base must respond to the font animation. A has_font_affecting_animation_ flag was recently added to ElementAnimations to assist in disabling the optimization under these circumstances. However, that was added with an insufficient understanding of ElementAnimation's lifetime, and hence this flag doesn't really work properly. For example, if we have an animation that initially doesn't affect the font, but then suddenly affects the font after all via setKeyframes, we would paint one incorrect frame before discovering that the font is now affected, and then (for frame #2 and subsequent) we'd be able to disable the optimization. This CL instead checks if the EffectStack affects the font when we're considering the base computed style for use. Bug: 437689 Change-Id: If07f1e82559673433be0a80d2c3edea1c1a5165a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2139662 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#759197} -- wpt-commits: f16078c799c17f920a1328347f99588b10dfea5f wpt-pr: 22914
35 lines
940 B
HTML
35 lines
940 B
HTML
<!DOCTYPE html>
|
|
<title>Tests that base responds to font-affecting properties appearing via setKeyframes</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations/">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
#target1 {
|
|
font-size: 10px;
|
|
height: 1em;
|
|
}
|
|
</style>
|
|
<div id=target1></div>
|
|
<script>
|
|
test(function() {
|
|
getComputedStyle(target1).height;
|
|
|
|
let animation = target1.animate([
|
|
{ height: '50px' },
|
|
{ height: '100px' },
|
|
], {
|
|
duration: 1000000,
|
|
delay: -500000,
|
|
easing: 'steps(2, end)'
|
|
});
|
|
|
|
assert_equals(getComputedStyle(target1).height, '75px');
|
|
|
|
animation.effect.setKeyframes([
|
|
{ fontSize: '10px' },
|
|
{ fontSize: '20px' },
|
|
]);
|
|
|
|
assert_equals(getComputedStyle(target1).height, '15px');
|
|
}, 'Base is responsive to font-affecting appearing via setKeyframes');
|
|
</script>
|