third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-element-animate.html

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#target {
  background-color: var(--x);
}
</style>
<div id="target"></div>
<script>
test(() => {
  var animation = target.animate({'--x': ['green', 'lime']}, 1000);
  animation.currentTime = 250;
  assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'green');
  assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)');
  animation.currentTime = 750;
  assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'lime');
  assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 255, 0)');
}, 'element.animate() animations should apply custom properties');
</script>