<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="target">target</div>
<script>
setup(() => {
  for (let name of ['--a', '--b', '--c']) {
    CSS.registerProperty({
      name,
      syntax: '<number> | initial-value',
      initialValue: 'initial-value',
      inherits: false,
    });
  }
});

test(() => {
  let animation = target.animate({
    '--a': ['100',      'var(--b)', 'var(--c)'],
    '--b': ['var(--a)', '200',      'var(--c)'],
    '--c': ['var(--a)', 'var(--b)', '300'     ],
  }, {
    duration: 100,
    fill: 'forwards',
  });

  animation.currentTime = 0;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), '100', '--a at 0%');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), '100', '--b at 0%');
  assert_equals(getComputedStyle(target).getPropertyValue('--c'), '100', '--c at 0%');

  animation.currentTime = 25;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), 'initial-value', '--a at 25%');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), 'initial-value', '--b at 25%');
  assert_equals(getComputedStyle(target).getPropertyValue('--c'), 'initial-value', '--c at 25%');

  animation.currentTime = 50;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), '200', '--a at 50%');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), '200', '--b at 50%');
  assert_equals(getComputedStyle(target).getPropertyValue('--c'), '200', '--c at 50%');

  animation.currentTime = 75;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), 'initial-value', '--a at 75%');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), 'initial-value', '--b at 75%');
  assert_equals(getComputedStyle(target).getPropertyValue('--c'), 'initial-value', '--c at 75%');

  animation.currentTime = 100;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), '300', '--a at 100%');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), '300', '--b at 100%');
  assert_equals(getComputedStyle(target).getPropertyValue('--c'), '300', '--c at 100%');
}, 'Animated registered custom properties are invalid at computed-value time when there is a cyclic var() dependency between them.');
</script>