| Index: third_party/WebKit/LayoutTests/animations/add-keyframes-recalc.html
|
| diff --git a/third_party/WebKit/LayoutTests/animations/add-keyframes-recalc.html b/third_party/WebKit/LayoutTests/animations/add-keyframes-recalc.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..c696b85fdd3432f735cf5a767fa6021ae0e066ac
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/animations/add-keyframes-recalc.html
|
| @@ -0,0 +1,79 @@
|
| +<!DOCTYPE html>
|
| +<script src="../resources/testharness.js"></script>
|
| +<script src="../resources/testharnessreport.js"></script>
|
| +<div id="anim"></div>
|
| +<script>
|
| + test(() => assert_not_equals(window.internals, undefined, "Needs window.internals for testing."), "Check that window.internals is defined");
|
| + anim.offsetTop;
|
| +</script>
|
| +<style>
|
| + @keyframes unused {
|
| + from { color: pink }
|
| + to { color: orange }
|
| + }
|
| +</style>
|
| +<script>
|
| + test(() =>
|
| + assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Recalc for style and script.")
|
| + , "Check that adding @keyframes does not cause a style recalc of the anim element when no animations are running.");
|
| +</script>
|
| +<style>
|
| + #anim {
|
| + color: red;
|
| + animation-name: later;
|
| + animation-duration: 100s;
|
| + animation-timing-function: step-end;
|
| + }
|
| +</style>
|
| +<script>
|
| + test(() =>
|
| + assert_equals(getComputedStyle(anim).color, "rgb(255, 0, 0)", "Initial color of #anim.")
|
| + , "Check initial color of #anim.");
|
| +
|
| + anim.offsetTop;
|
| +</script>
|
| +<style>
|
| + @keyframes later {
|
| + from { color: green }
|
| + to { color: red }
|
| + }
|
| +</style>
|
| +<script>
|
| + test(() =>
|
| + assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 13, "Full document recalc.")
|
| + , "Check that adding @keyframes after keyframe resolution failed, recalculates whole document");
|
| +
|
| + test(() =>
|
| + assert_equals(getComputedStyle(anim).color, "rgb(0, 128, 0)", "Color of #anim during animation.")
|
| + , "Check that @keyframes rule applies.");
|
| +
|
| + anim.offsetTop;
|
| +</script>
|
| +<style>
|
| + @keyframes later {
|
| + from { color: lime }
|
| + to { color: red }
|
| + }
|
| +</style>
|
| +<script>
|
| + test(() =>
|
| + assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Recalc of style, script, and #anim.")
|
| + , "Check that adding @keyframes causes a style recalc of the #anim element when an animation is running.");
|
| +
|
| + test(() =>
|
| + assert_equals(getComputedStyle(anim).color, "rgb(0, 255, 0)", "Color of #anim during animation for new @keyframes.")
|
| + , "Check that the new @keyframes rule for 'later' applies.");
|
| +
|
| + anim.offsetTop;
|
| +</script>
|
| +<style>
|
| + @keyframes unused2 {
|
| + from { color: pink }
|
| + to { color: orange }
|
| + }
|
| +</style>
|
| +<script>
|
| + test(() =>
|
| + assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Recalc of style, script, and #anim.")
|
| + , "Check that adding unused @keyframes causes a style recalc of the #anim element when an animation is running.");
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 2105743002:
Optimize style recalc when adding @keyframes. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master