<!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");
test(() => {
assert_equals(
document.getAnimations().length, 0, 'No animations running at start');
let sheet = document.createElement("style");
sheet.appendChild(document.createTextNode(`
@keyframes unused {
from { color: pink }
to { color: orange }
}`));
document.head.appendChild(sheet);
assert_equals(
internals.updateStyleAndReturnAffectedElementCount(), 0,
'Adding @keyframes does not cause a style recalc of the anim element ' +
'when no animations are running.');
sheet = document.createElement("style");
sheet.appendChild(document.createTextNode(`
#anim {
color: red;
animation-name: later;
animation-duration: 100s;
animation-timing-function: step-end;
}`));
document.head.appendChild(sheet);
assert_equals(
internals.updateStyleAndReturnAffectedElementCount(), 1,
'Styling element causes style update');
assert_equals(getComputedStyle(anim).color, "rgb(255, 0, 0)",
"Initial color of #anim.");
sheet = document.createElement("style");
sheet.appendChild(document.createTextNode(`
@keyframes later {
from { color: green }
to { color: red }
}`));
document.head.appendChild(sheet);
assert_equals(
internals.updateStyleAndReturnAffectedElementCount(), 5,
'Adding @keyframes after keyframe resolution failed, recalculates ' +
'whole document');
assert_equals(getComputedStyle(anim).color, "rgb(0, 128, 0)",
"keyframe rule applies.");
sheet = document.createElement("style");
sheet.appendChild(document.createTextNode(`
@keyframes later {
from { color: lime }
to { color: red }
}`));
document.head.appendChild(sheet);
assert_equals(
internals.updateStyleAndReturnAffectedElementCount(), 1,
'Adding @keyframes causes a style recalc of the #anim element when ' +
'an animation is running');
assert_equals(getComputedStyle(anim).color, "rgb(0, 255, 0)",
"new keyframe rule applies.");
sheet = document.createElement("style");
sheet.appendChild(document.createTextNode(`
@keyframes unused2 {
from { color: pink }
to { color: orange }
}`));
document.head.appendChild(sheet);
assert_equals(
internals.updateStyleAndReturnAffectedElementCount(), 1,
'Adding unused @keyframes causes a style recalc of the #anim element ' +
'when an animation is running');
}, 'Test Style recalc keyframe injection on a running animation');
</script>
