length-percentage-type-mismatch-no-interpolation.html

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="target"></div>
<script>
setup(() => {
  CSS.registerProperty({
    name: '--length',
    syntax: '<length>',
    initialValue: '40px',
    inherits: false,
  });

  CSS.registerProperty({
    name: '--percentage',
    syntax: '<percentage>',
    initialValue: '40%',
    inherits: false,
  });
});

test(() => {
  var animation = target.animate({'--length': ['10%', '100px']}, 1);
  animation.currentTime = 0;
  assert_equals(getComputedStyle(target).getPropertyValue('--length'), '40px',
      '10% is invalid at computed-value time, hence --length becomes unset');
  animation.currentTime = 0.5;
  assert_equals(getComputedStyle(target).getPropertyValue('--length'), '100px',
      '--length has no interpolation, and flips half-way');
  animation.cancel();
}, "<length> properties don't accept percentages in animation keyframes");

test(() => {
  var animation = target.animate({'--percentage': ['10px', '100%']}, 1);
  animation.currentTime = 0;
  assert_equals(getComputedStyle(target).getPropertyValue('--percentage'), '40%',
      '10px is invalid at computed-value time, hence --percentage becomes unset');
  animation.currentTime = 0.5;
  assert_equals(getComputedStyle(target).getPropertyValue('--percentage'), '100%',
      '--percentage has no interpolation, and flips half-way');
  animation.cancel();
}, "<percentage> properties don't accept lengths in animation keyframes");
</script>
</body>
chromium/third_party/blink/web_tests/animations/custom-properties/length-percentage-type-mismatch-no-interpolation.html
