<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>scale interpolation</title>
    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">
    <meta name="assert" content="scale supports animation.">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="/css/support/interpolation-testcommon.js"></script>
    <style>
    .parent {
      scale: 0.5 1 2
    }
    .target {
      width: 10px;
      height: 10px;
      background-color: black;
      scale: 1.1 1;
    }
    .expected {
      background-color: green;
    }
    </style>
  </head>
  <body>
    <template id="target-template">
      <div class="parent">
        <div class="target"></div>
      </div>
    </template>

    <script>
      // Matching two <number> version.
      test_interpolation({
        property: 'scale',
        from: '-10 5',
        to: '10 -5',
      }, [
        {at: -1, expect: '-30 15'},
        {at: 0, expect: '-10 5'},
        {at: 0.25, expect: '-5 2.5'},
        {at: 0.75, expect: '5 -2.5'},
        {at: 1, expect: '10 -5'},
        {at: 2, expect: '30 -15'},
      ]);

      // Matching three <number> version.
      test_interpolation({
        property: 'scale',
        from: '2 30 400',
        to: '10 110 1200',
      }, [
        {at: -1, expect: '-6 -50 -400'},
        {at: 0, expect: '2 30 400'},
        {at: 0.125, expect: '3 40 500'},
        {at: 0.875, expect: '9 100 1100'},
        {at: 1, expect: '10 110 1200'},
        {at: 2, expect: '18 190 2000'}
      ]);

      // From three <number> to two <number>; test that it expands correctly.
      test_interpolation({
        property: 'scale',
        from: '26 17 9',
        to: '2 1',
      }, [
        {at: -1, expect: '50 33 17'},
        {at: 0, expect: '26 17 9'},
        {at: 0.125, expect: '23 15 8'},
        {at: 0.875, expect: '5 3 2'},
        {at: 1, expect: '2 1'},
        {at: 2, expect: '-22 -15 -7'}
      ]);

      // Test one <number> is expanded correctly.
      test_interpolation({
        property: 'scale',
        from: '1',
        to: '10 -5 0',
      }, [
        {at: -1, expect: '-8 7 2'},
        {at: 0, expect: '1'},
        {at: 0.25, expect: '3.25 -0.5 0.75'},
        {at: 0.75, expect: '7.75 -3.5 0.25'},
        {at: 1, expect: '10 -5 0'},
        {at: 2, expect: '19 -11 -1'},
      ]);

      test_interpolation({
        property: 'scale',
        from: '-10 5 1',
        to: '1',
      }, [
        {at: -1, expect: '-21 9'},
        {at: 0, expect: '-10 5'},
        {at: 0.25, expect: '-7.25 4'},
        {at: 0.75, expect: '-1.75 2'},
        {at: 1, expect: '1'},
        {at: 2, expect: '12 -3'},
      ]);

      // Handling of the none value.
      test_interpolation({
        property: 'scale',
        from: 'none',
        to: 'none',
      }, [
        {at: -1, expect: 'none'},
        {at: 0, expect: 'none'},
        {at: 0.125, expect: 'none'},
        {at: 0.875, expect: 'none'},
        {at: 1, expect: 'none'},
        {at: 2, expect: 'none'}
      ]);

      // Going from none to a valid value; test that it converts properly.
      test_interpolation({
        property: 'scale',
        from: 'none',
        to: '4 3 2',
      }, [
        {at: -1, expect: '-2 -1 0'},
        {at: 0, expect: '1'},
        {at: 0.125, expect: '1.375 1.25 1.125'},
        {at: 0.875, expect: '3.625 2.75 1.875'},
        {at: 1, expect: '4 3 2'},
        {at: 2, expect: '7 5 3'}
      ]);

      // Test neutral keyframe; make sure it adds the underlying.
      test_interpolation({
        property: 'scale',
        from: neutralKeyframe,
        to: '1.5 1',
      }, [
        {at: -1, expect: '0.7 1'},
        {at: 0, expect: '1.1 1'},
        {at: 0.25, expect: '1.2 1'},
        {at: 0.75, expect: '1.4 1'},
        {at: 1, expect: '1.5 1'},
        {at: 2, expect: '1.9 1'},
      ]);

      // Test initial value; for 'scale' this is 'none'.
      test_interpolation({
        property: 'scale',
        from: 'initial',
        to: '2 0.5 1',
      }, [
        {at: -1, expect: '0 1.5'},
        {at: 0, expect: '1'},
        {at: 0.25, expect: '1.25 0.875'},
        {at: 0.75, expect: '1.75 0.625'},
        {at: 1, expect: '2 0.5'},
        {at: 2, expect: '3 0'},
      ]);

      test_interpolation({
        property: 'scale',
        from: '2 0.5 1',
        to: 'initial',
      }, [
        {at: -1, expect: '3 0'},
        {at: 0, expect: '2 0.5'},
        {at: 0.25, expect: '1.75 0.6251'},
        {at: 0.75, expect: '1.25 0.875'},
        {at: 1, expect: '1'},
        {at: 2, expect: '0 1.5'},
      ]);


      // Test unset value; for 'scale' this is 'none'.
      test_interpolation({
        property: 'scale',
        from: 'unset',
        to: '1.5 1',
      }, [
        {at: -1, expect: '0.5 1'},
        {at: 0, expect: '1'},
        {at: 0.25, expect: '1.125 1'},
        {at: 0.75, expect: '1.375 1'},
        {at: 1, expect: '1.5 1'},
        {at: 2, expect: '2 1'},
      ]);

      // Test inherited value.
      test_interpolation({
        property: 'scale',
        from: 'inherit',
        to: '2 0.5 1',
      }, [
        {at: -1, expect: '-1 1.5 3'},
        {at: 0, expect: '0.5 1 2'},
        {at: 0.25, expect: '0.875 0.875 1.75'},
        {at: 0.75, expect: '1.625 0.625 1.25'},
        {at: 1, expect: '2 0.5'},
        {at: 2, expect: '3.5 0 0'},
      ]);

      test_interpolation({
        property: 'scale',
        from: '2 0.5 1',
        to: 'inherit',
      }, [
        {at: -1, expect: '3.5 0 0'},
        {at: 0, expect: '2 0.5'},
        {at: 0.25, expect: '1.625 0.625 1.25'},
        {at: 0.75, expect: '0.875 0.875 1.75'},
        {at: 1, expect: '0.5 1 2'},
        {at: 2, expect: '-1 1.5 3'},
      ]);

      // Test combination of initial and inherit.
      test_interpolation({
        property: 'scale',
        from: 'initial',
        to: 'inherit',
      }, [
        {at: -1, expect: '1.5 1 0'},
        {at: 0, expect: '1'},
        {at: 0.25, expect: '0.875 1 1.25'},
        {at: 0.75, expect: '0.625 1 1.75'},
        {at: 1, expect: '0.5 1 2'},
        {at: 2, expect: '0 1 3'},
      ]);

      test_interpolation({
        property: 'scale',
        from: 'inherit',
        to: 'initial',
      }, [
        {at: -1, expect: '0 1 3'},
        {at: 0, expect: '0.5 1 2'},
        {at: 0.25, expect: '0.625 1 1.75'},
        {at: 0.75, expect: '0.875 1 1.25'},
        {at: 1, expect: '1'},
        {at: 2, expect: '1.5 1 0'},
      ]);
    </script>
  </body>
</html>
