<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@keyframes noSyntheticKeyframes {
  from { color: black; }
  to { color: green; }
}
@keyframes customPropertySyntheticKeyframes {
  to { --x: pants; }
}
@keyframes nonCompositedSyntheticKeyframes {
  to { color: green; }
}
@keyframes compositedSyntheticKeyframes {
  from {
    opacity: 0;
  }
  to {
    transform: rotate(45deg);
    opacity: 1;
  }
}
#target {
  animation-duration: 1s;
}
</style>
<div id="target"></div>
<script>
// From UseCounter.h.
var SyntheticKeyframesInCompositedCSSAnimation = 664;

function forceStyleRecalc() {
  getComputedStyle(target).left;
}

test(() => {
  forceStyleRecalc();
  assert_false(internals.isUseCounted(document, SyntheticKeyframesInCompositedCSSAnimation), 'No animations started');

  target.style.animationName = 'noSyntheticKeyframes';
  forceStyleRecalc();
  assert_false(internals.isUseCounted(document, SyntheticKeyframesInCompositedCSSAnimation), 'noSyntheticKeyframes');

  target.style.animationName = 'customPropertySyntheticKeyframes';
  forceStyleRecalc();
  assert_false(internals.isUseCounted(document, SyntheticKeyframesInCompositedCSSAnimation), 'customPropertySyntheticKeyframes');

  target.style.animationName = 'nonCompositedSyntheticKeyframes';
  forceStyleRecalc();
  assert_false(internals.isUseCounted(document, SyntheticKeyframesInCompositedCSSAnimation), 'nonCompositedSyntheticKeyframes');

  target.style.animationName = 'compositedSyntheticKeyframes';
  forceStyleRecalc();
  assert_true(internals.isUseCounted(document, SyntheticKeyframesInCompositedCSSAnimation), 'compositedSyntheticKeyframes');
}, 'The SyntheticKeyframesInCompositedCSSAnimation use counter should only be triggered by animations with composited properties with neutral keyframes');
</script>