<!DOCTYPE html>
<style>
@font-face {
  font-family: 'WebKit WeightWatcher';
  font-weight: 100;
  src:  url('../../resources/WebKitWeightWatcher100.ttf');
}
@font-face {
  font-family: 'WebKit WeightWatcher';
  font-weight: 200;
  src:  url('../../resources/WebKitWeightWatcher200.ttf');
}
@font-face {
  font-family: 'WebKit WeightWatcher';
  font-weight: 300;
  src:  url('../../resources/WebKitWeightWatcher300.ttf');
}
@font-face {
  font-family: 'WebKit WeightWatcher';
  font-weight: 400;
  src:  url('../../resources/WebKitWeightWatcher400.ttf');
}
@font-face {
  font-family: 'WebKit WeightWatcher';
  font-weight: 500;
  src:  url('../../resources/WebKitWeightWatcher500.ttf');
}
@font-face {
  font-family: 'WebKit WeightWatcher';
  font-weight: 600;
  src:  url('../../resources/WebKitWeightWatcher600.ttf');
}
@font-face {
  font-family: 'WebKit WeightWatcher';
  font-weight: 700;
  src:  url('../../resources/WebKitWeightWatcher700.ttf');
}
@font-face {
  font-family: 'WebKit WeightWatcher';
  font-weight: 800;
  src:  url('../../resources/WebKitWeightWatcher800.ttf');
}
@font-face {
  font-family: 'WebKit WeightWatcher';
  font-weight: 900;
  src:  url('../../resources/WebKitWeightWatcher900.ttf');
}

.parent {
  font-weight: 500;
}
.target {
  display: inline-block;
  font-family: 'WebKit WeightWatcher';
  font-size: 20px;
  font-weight: 700;
}
.expected {
  color: green;
  margin-right: 30px;
}
</style>
<template id="target-template">A</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
  property: 'font-weight',
  from: neutralKeyframe,
  to: '900',
}, [
  {at: -0.3, is: '600'},
  {at: 0, is: 'bold'},
  {at: 0.3, is: '800'},
  {at: 0.5, is: '800'},
  {at: 0.6, is: '800'},
  {at: 1, is: '900'},
  {at: 1.5, is: '900'},
]);

assertInterpolation({
  property: 'font-weight',
  from: 'initial',
  to: '900',
}, [
  {at: -0.5, is: '200'},
  {at: 0, is: 'normal'},
  {at: 0.3, is: '600'},
  {at: 0.5, is: 'bold'},
  {at: 0.6, is: 'bold'},
  {at: 1, is: '900'},
  {at: 1.5, is: '900'},
]);

assertInterpolation({
  property: 'font-weight',
  from: 'inherit',
  to: '900',
}, [
  {at: -0.3, is: 'normal'},
  {at: 0, is: '500'},
  {at: 0.3, is: '600'},
  {at: 0.5, is: 'bold'},
  {at: 0.6, is: 'bold'},
  {at: 1, is: '900'},
  {at: 1.5, is: '900'},
]);

assertInterpolation({
  property: 'font-weight',
  from: 'unset',
  to: '900',
}, [
  {at: -0.3, is: 'normal'},
  {at: 0, is: '500'},
  {at: 0.3, is: '600'},
  {at: 0.5, is: 'bold'},
  {at: 0.6, is: 'bold'},
  {at: 1, is: '900'},
  {at: 1.5, is: '900'},
]);

assertInterpolation({
  property: 'font-weight',
  from: '100',
  to: '900'
  }, [
  {at: 0/8, is: '100'},
  {at: 1/8, is: '200'},
  {at: 2/8, is: '300'},
  {at: 3/8, is: '400'},
  {at: 4/8, is: '500'},
  {at: 5/8, is: '600'},
  {at: 6/8, is: '700'},
  {at: 7/8, is: '800'},
  {at: 8/8, is: '900'},

  {at: 0.10/8, is: '100'},
  {at: 0.49/8, is: '100'},
  {at: 0.50/8, is: '200'},
  {at: 0.51/8, is: '200'},
  {at: 0.90/8, is: '200'},
  {at: 7.10/8, is: '800'},
  {at: 7.49/8, is: '800'},
  {at: 7.50/8, is: '900'},
  {at: 7.51/8, is: '900'},

  {at: -0.1, is: '100'},
  {at: 1.1, is: '900'},
]);
</script>