<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#target {
  --from: 100;
  --to: 200;
}
</style>
<div id="target"></div>
<script>
setup(() => {
  for (let name of ['--test', '--from', '--to']) {
    CSS.registerProperty({
      name,
      syntax: '<number>',
      initialValue: '0',
      inherits: false,
    });
  }
});

test(() => {
  let animation = target.animate({'--test': ['var(--from)', 'var(--to)']}, 100);

  animation.currentTime = 25;
  assert_equals(getComputedStyle(target).getPropertyValue('--test'), '125', 'target at 25%');

  animation.currentTime = 75;
  assert_equals(getComputedStyle(target).getPropertyValue('--test'), '175', 'target at 75%');
}, 'Animated registered custom properties can var() reference other registered custom properties.');
</script>