font-weight-interpolation.html | Explore in Territory

<!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: -7, is: '1'},
  {at: -0.3, is: '640'},
  {at: 0, is: 'bold'},
  {at: 0.3, is: '760'},
  {at: 0.5, is: '800'},
  {at: 0.6, is: '820'},
  {at: 1, is: '900'},
  {at: 1.5, is: '1000'},
]);

assertInterpolation({
  property: 'font-weight',
  from: 'initial',
  to: '900',
}, [
  {at: -4/5, is: '1'},
  {at: -0.5, is: '150'},
  {at: 0, is: 'normal'},
  {at: 0.3, is: '550'},
  {at: 0.5, is: '650'},
  {at: 0.6, is: 'bold'},
  {at: 1, is: '900'},
  {at: 1.5, is: '1000'},
]);

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

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

assertInterpolation({
  property: 'font-weight',
  from: 'bold',
  to: 'normal',
}, [
  {at: -0.5, is: '850'},
  {at: 0, is: 'bold'}, // 700
  {at: 0.3, is: '610'},
  {at: 0.5, is: '550'},
  {at: 0.6, is: '520'},
  {at: 1, is: 'normal'}, // 400
  {at: 1.5, is: '250'},
]);

assertInterpolation({
  property: 'font-weight',
  from: '100',
  to: '900'
  }, [
  {at: -2/8, is: '1'},
  {at: -1/8, is: '1'},
  {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: 9/8, is: '1000'},
  {at: 10/8, is: '1000'},

  {at: 0.10/8, is: '110'},
  {at: 0.49/8, is: '148.75'},
  {at: 0.50/8, is: '150'},
  {at: 0.51/8, is: '151'},
  {at: 0.90/8, is: '190'},
  {at: 7.10/8, is: '810'},
  {at: 7.49/8, is: '849'},
  {at: 7.50/8, is: '850'},
  {at: 7.51/8, is: '851'},

  {at: -0.1, is: '20'},
  {at: 1.1, is: '980'},
]);
</script>
chromium/third_party/blink/web_tests/animations/interpolation/font-weight-interpolation.html
