web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>Processing a keyframes argument (easing)</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#processing-a-keyframes-argument">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../resources/easing-tests.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
<script>
'use strict';

test(() => {
  for (const [easing, expected] of gEasingParsingTests) {
    const effect = new KeyframeEffect(target, {
      left: ['10px', '20px'],
      easing: easing
    });
    assert_equals(effect.getKeyframes()[0].easing, expected,
                  `resulting easing for '${easing}'`);
  }
}, 'easing values are parsed correctly when set on a property-indexed'
   + ' keyframe');

test(() => {
  for (const [easing, expected] of gEasingParsingTests) {
    const effect = new KeyframeEffect(target, [
      { offset: 0, left: '10px', easing: easing },
      { offset: 1, left: '20px' }
    ]);
    assert_equals(effect.getKeyframes()[0].easing, expected,
                  `resulting easing for '${easing}'`);
  }
}, 'easing values are parsed correctly when using a keyframe sequence');

test(() => {
  for (const invalidEasing of gInvalidEasings) {
    assert_throws_js(TypeError, () => {
      new KeyframeEffect(target, { easing: invalidEasing });
    }, `TypeError is thrown for easing '${invalidEasing}'`);
  }
}, 'Invalid easing values are correctly rejected when set on a property-'
   + 'indexed keyframe');

test(() => {
  for (const invalidEasing of gInvalidEasings) {
    assert_throws_js(TypeError, () => {
      new KeyframeEffect(target, [{ easing: invalidEasing }]);
    }, `TypeError is thrown for easing '${invalidEasing}'`);
  }
}, 'Invalid easing values are correctly rejected when using a keyframe'
   + ' sequence');

test(() => {
  let readToEnd = false;
  const keyframe_obj = {
    *[Symbol.iterator]() {
      yield { left: '100px', easing: '' };
      yield { left: '200px' };
      readToEnd = true;
    },
  };
  assert_throws_js(
    TypeError,
    () => {
      new KeyframeEffect(null, keyframe_obj);
    },
    'TypeError is thrown for an invalid easing'
  );
  assert_true(
    readToEnd,
    'Read all the keyframe properties before reporting invalid easing'
  );
}, 'Invalid easing values are correctly rejected after doing all the'
   + ' iterating');

test(() => {
  let propAccessCount = 0;
  const keyframe = {};
  const addProp = prop => {
    Object.defineProperty(keyframe, prop, {
      get: () => { propAccessCount++; },
      enumerable: true
    });
  }
  addProp('height');
  addProp('width');
  keyframe.easing = 'easy-peasy';

  assert_throws_js(TypeError, () => {
    new KeyframeEffect(target, keyframe);
  });
  assert_equals(propAccessCount, 2,
    'All properties were read before throwing the easing error');
}, 'Errors from invalid easings on a property-indexed keyframe are thrown after reading all properties');

test(() => {
  let propAccessCount = 0;

  const addProp = (keyframe, prop) => {
    Object.defineProperty(keyframe, prop, {
      get: () => { propAccessCount++; },
      enumerable: true
    });
  }

  const kf1 = {};
  addProp(kf1, 'height');
  addProp(kf1, 'width');
  kf1.easing = 'easy-peasy';

  const kf2 = {};
  addProp(kf2, 'height');
  addProp(kf2, 'width');

  assert_throws_js(TypeError, () => {
    new KeyframeEffect(target, [ kf1, kf2 ]);
  });
  assert_equals(propAccessCount, 4,
    'All properties were read before throwing the easing error');
}, 'Errors from invalid easings on a keyframe sequence are thrown after reading all properties');

</script>