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}
bocoup · Apr 15, 2020 · f16078c · f16078c
1 parent 4b10411
commit f16078c
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/css/css-animations/animation-base-response-004.html b/css/css-animations/animation-base-response-004.html
@@ -0,0 +1,35 @@
+<!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>