Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/external/wpt/css/css-values/calc-size/animation/calc-size-height-interpolation.html 

<!DOCTYPE html>
<meta charset="UTF-8">
<title>height: calc-size() animations</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../../support/interpolation-testcommon.js"></script>

<style>
.parent {
  display: block;
  width: 600px;
  height: 300px;
}
html.no-parent-height .parent {
  height: auto;
}
.target {
  display: block;
}
.target::before {
  display: block;
  content: "";
  width: 23px;
  height: 100px;
}
</style>

<body>

<script>
  test_interpolation({
    property: 'height',
    from: 'calc-size(auto, size)',
    to: 'calc-size(auto, size * 2)',
  }, [
    { at: -0.25, expect: '75px' },
    { at: 0, expect: '100px' },
    { at: 0.25, expect: '125px' },
    { at: 0.5, expect: '150px' },
    { at: 0.75, expect: '175px' },
    { at: 1, expect: '200px' },
    { at: 1.25, expect: '225px' },
  ]);

  test_interpolation({
    property: 'height',
    from: neutralKeyframe,
    to: 'calc-size(auto, size * 2)',
  }, [
    { at: -0.25, expect: '75px' },
    { at: 0, expect: '100px' },
    { at: 0.25, expect: '125px' },
    { at: 0.5, expect: '150px' },
    { at: 0.75, expect: '175px' },
    { at: 1, expect: '200px' },
    { at: 1.25, expect: '225px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(min-content, 0 * size)',
    to: 'calc-size(min-content, size)',
  }, [
    { at: -0.25, expect: '0' },
    { at: 0, expect: '0' },
    { at: 0.25, expect: '25px' },
    { at: 0.5, expect: '50px' },
    { at: 0.75, expect: '75px' },
    { at: 1, expect: '100px' },
    { at: 1.25, expect: '125px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(min-content, 0px)',
    to: 'calc-size(min-content, size)',
  }, [
    { at: -0.25, expect: '0' },
    { at: 0, expect: '0' },
    { at: 0.25, expect: '25px' },
    { at: 0.5, expect: '50px' },
    { at: 0.75, expect: '75px' },
    { at: 1, expect: '100px' },
    { at: 1.25, expect: '125px' },
  ]);

  test_interpolation({
    property: 'height',
    from: '0',
    to: 'calc-size(max-content, size)',
  }, [
    { at: -0.25, expect: '0' },
    { at: 0, expect: '0' },
    { at: 0.25, expect: '25px' },
    { at: 0.5, expect: '50px' },
    { at: 0.75, expect: '75px' },
    { at: 1, expect: '100px' },
    { at: 1.25, expect: '125px' },
  ]);

  const KEYWORDS = {
    "auto": 100,
    "min-content": 100,
    "fit-content": 100,
    "max-content": 100,
    "stretch": 300,
  };

  for (const keyword in KEYWORDS) {
    let expected = KEYWORDS[keyword];
    test_interpolation({
      property: 'height',
      from: keyword,
      to: `calc-size(${keyword}, size * 2)`,
    }, [
      { at: -0.25, expect: `${expected * 0.75}px` },
      { at: 0, expect: `${expected}px` },
      { at: 0.75, expect: `${expected * 1.75}px` },
      { at: 1, expect: `${expected * 2}px` },
      { at: 1.25, expect: `${expected * 2.25}px` },
    ]);

    test_interpolation({
      property: 'height',
      from: keyword,
      to: 'calc-size(any, 50px)',
    }, [
      { at: -0.25, expect: `${expected * 1.25 - 50 * 0.25}px` },
      { at: 0, expect: `${expected}px` },
      { at: 0.75, expect: `${expected * 0.25 + 50 * 0.75}px` },
      { at: 1, expect: `50px` },
      { at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` },
    ]);

    test_interpolation({
      property: 'height',
      from: 'calc-size(any, 50px)',
      to: `calc-size(${keyword}, size * 2)`,
    }, [
      { at: -0.1, expect: `${50 * 1.1 - expected * 0.2}px` },
      { at: 0, expect: "50px" },
      { at: 0.75, expect: `${50 * 0.25 + expected * 1.5}px` },
      { at: 1, expect: `${expected * 2}px` },
      { at: 1.25, expect: `${expected * 2.5 - 50 * 0.25}px` },
    ]);

    test_no_interpolation({
      property: 'height',
      from: keyword,
      to: 'calc-size(50px, size)',
    });
  }

  const KEYWORD_PAIRS = [
    [ "auto", "fit-content" ],
    [ "fit-content", "min-content" ],
    [ "stretch", "auto" ],
    [ "max-content", "stretch" ],
  ];

  for (const pair of KEYWORD_PAIRS) {
    test_no_interpolation({
      property: 'height',
      from: pair[0],
      to: `calc-size(${pair[1]}, size)`,
    });
  }

  test_interpolation({
    property: 'height',
    from: 'calc-size(20px, size)',
    to: 'calc-size(60px, size)',
  }, [
    { at: -0.25, expect: '10px' },
    { at: 0, expect: '20px' },
    { at: 0.75, expect: '50px' },
    { at: 1, expect: '60px' },
    { at: 1.25, expect: '70px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(50%, size)', /* 150px */
    to: 'calc-size(50px, size)',
  }, [
    { at: -0.25, expect: '175px' },
    { at: 0, expect: '150px' },
    { at: 0.75, expect: '75px' },
    { at: 1, expect: '50px' },
    { at: 1.25, expect: '25px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(37px, 200px)',
    to: 'calc-size(37px, size * 2 + 3% + 17px)', /* adds to 100px */
  }, [
    { at: -0.25, expect: '225px' },
    { at: 0, expect: '200px' },
    { at: 0.75, expect: '125px' },
    { at: 1, expect: '100px' },
    { at: 1.25, expect: '75px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(auto, size)',
    to: '50%',
  }, [
    { at: -0.25, expect: '87.5px' },
    { at: 0, expect: '100px' },
    { at: 0.75, expect: '137.5px' },
    { at: 1, expect: '150px' },
    { at: 1.25, expect: '162.5px' },
  ]);

  // Rerun roughly the same test with an auto height container.
  let auto_style_text = `
    .parent {
      height: auto;
    }
  `;
  let auto_style_element = document.createElement("style");
  auto_style_element.append(document.createTextNode(auto_style_text));
  document.head.append(auto_style_element);

  test_interpolation({
    property: 'height',
    from: 'calc-size(auto, size * 2)',
    to: '50%',
  }, [
    { at: -0.25, expect: '250px' },
    { at: 0, expect: '200px' },
    { at: 0.75, expect: '50px' },
    /* TODO(https://crbug.com/40339056): It's questionable whether this should
     * be the case, particularly for transitions.  Perhaps the value at the
     * end should have its percentage-ness back and be 100px here? */
    { at: 1, expect: '0px' },
    { at: 1.25, expect: '0px' },
  ]);

  auto_style_element.remove();

  test_no_interpolation({
    property: 'height',
    from: 'calc-size(auto, size)',
    to: 'calc-size(50%, size)',
  });

  test_no_interpolation({
    property: 'height',
    from: 'calc-size(calc-size(auto, size / 2), size * 2)',
    to: 'calc-size(12.5%, size * 4)',
  });

  test_interpolation({
    property: 'height',
    from: 'calc-size(calc-size(auto, size / 2), size * 2)',
    to: 'calc-size(auto, size * 2)',
  }, [
    { at: -0.25, expect: '75px' },
    { at: 0, expect: '100px' },
    { at: 0.75, expect: '175px' },
    { at: 1, expect: '200px' },
    { at: 1.25, expect: '225px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(calc-size(min-content, size / 2), size * 2)', /* 100px */
    to: 'calc-size(calc-size(any, 150px), size * 2)', /* 300px */
  }, [
    { at: -0.25, expect: '50px' },
    { at: 0, expect: '100px' },
    { at: 0.75, expect: '250px' },
    { at: 1, expect: '300px' },
    { at: 1.25, expect: '350px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(calc-size(auto, size / 2), size * 2)',
    to: 'calc-size(auto, size * 5)',
  }, [
    { at: -0.125, expect: '50px' },
    { at: 0, expect: '100px' },
    { at: 0.75, expect: '400px' },
    { at: 1, expect: '500px' },
    { at: 1.25, expect: '600px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(calc-size(100px, size / 2), size * 2)',
    to: 'calc-size(12.5%, size * 4)',
  }, [
    { at: -0.25, expect: '87.5px' },
    { at: 0, expect: '100px' },
    { at: 0.75, expect: '137.5px' },
    { at: 1, expect: '150px' },
    { at: 1.25, expect: '162.5px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(calc-size(100px, size * 2), size * 2)',
    to: 'calc-size(100px, size * 3)',
  }, [
    { at: -0.25, expect: '425px' },
    { at: 0, expect: '400px' },
    { at: 0.75, expect: '325px' },
    { at: 1, expect: '300px' },
    { at: 1.25, expect: '275px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(calc-size(auto, size / 2), size * 2)',
    to: 'calc-size(calc-size(calc-size(auto, size + size / 2 + size / 2), size + size), size / 4 + size / 8 + size / 8)',
  }, [
    { at: -0.25, expect: '75px' },
    { at: 0, expect: '100px' },
    { at: 0.75, expect: '175px' },
    { at: 1, expect: '200px' },
    { at: 1.25, expect: '225px' },
  ]);

  // Test that we don't interpolate if doing so would require too much expansion.
  // See https://github.com/w3c/csswg-drafts/issues/10369 .
  test_no_interpolation({
    property: 'height',
    from: 'calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(calc-size(auto, size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2), size / 2 + size / 2)',
    to: 'calc-size(auto, size * 3)',
  });

  test_interpolation({
    property: 'height',
    from: 'calc-size(20%, size)',
    to: 'calc-size(60%, size)',
  }, [
    { at: 0, expect: '60px' },
    { at: 0.5, expect: '120px' },
    { at: 1, expect: '180px' },
  ]);

  document.documentElement.classList.add("no-parent-height");

  // repeat the previous test, but with height:auto on the parent
  test_interpolation({
    property: 'height',
    from: 'calc-size(20%, size)',
    to: 'calc-size(60%, size)',
  }, [
    { at: 0, expect: '100px' },
    { at: 0.5, expect: '100px' },
    { at: 1, expect: '100px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(50px, size)',
    to: 'calc-size(60%, size)',
  }, [
    { at: 0, expect: '100px' },
    { at: 0.5, expect: '100px' },
    { at: 1, expect: '100px' },
  ]);

  test_interpolation({
    property: 'height',
    from: 'calc-size(50px, size)',
    to: 'calc-size(200px, size)',
  }, [
    { at: 0, expect: '50px' },
    { at: 0.5, expect: '125px' },
    { at: 1, expect: '200px' },
  ]);

  document.documentElement.classList.remove("no-parent-height");

  test_no_interpolation({
    property: 'height',
    from: 'calc-size(50%, size)',
    to: 'calc-size(min-content, size)',
  });

  test_interpolation({
    property: 'height',
    from: 'calc-size(50px, size)',
    to: 'calc-size(min-content, size)',
  }, [
    { at: 0, expect: '50px' },
    { at: 0.5, expect: '75px' },
    { at: 1, expect: '100px' },
  ]);

</script>