line-height-interpolation.html | Explore in Territory

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
  line-height: 30px;
}
.target {
  display: inline-block;
  font: 20px sans-serif;
  line-height: 10px;
}
.expected {
  color: green;
  margin-right: 30px;
}
</style>
<body>
<template id="target-template">
  <p>
  v<br />v
  </p>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
// content_shell --run-web-tests uses a viewport of 800x600.
assertInterpolation({
  property: 'line-height',
  from: '4vw',
  to: '14vw',
}, [
  {at: -1, is: '0'},
  {at: -0.3, is: '1vw'},
  {at: 0, is: '4vw'},
  {at: 0.3, is: '7vw'},
  {at: 0.6, is: '10vw'},
  {at: 1, is: '14vw'},
  {at: 1.5, is: '19vw'},
]);
assertInterpolation({
  property: 'line-height',
  from: '50vmin',
  to: '100px',
}, [
  {at: -0.25, is: '350px'},
  {at: 0, is: '300px'},
  {at: 0.25, is: '250px'},
  {at: 0.75, is: '150px'},
  {at: 1, is: '100px'},
  {at: 1.5, is: '0px'},
]);
assertInterpolation({
  property: 'line-height',
  from: '100px',
  to: '50vmax',
}, [
  {at: -0.25, is: '25px'},
  {at: 0, is: '100px'},
  {at: 0.25, is: '175px'},
  {at: 0.75, is: '325px'},
  {at: 1, is: '400px'},
  {at: 1.5, is: '550px'},
]);
assertInterpolation({
  property: 'line-height',
  from: '75vw',
  to: '25vh',
}, [
  {at: -0.25, is: '712.5px'},
  {at: 0, is: '600px'},
  {at: 0.25, is: '487.5px'},
  {at: 0.75, is: '262.5px'},
  {at: 1, is: '150px'},
  {at: 1.5, is: '0px'}, // line-height must not be less than 0.
]);
</script>
</body>
chromium/third_party/blink/web_tests/animations/interpolation/line-height-interpolation.html
