| <!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> |
