Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1266 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-values/calc-size/animation/calc-size-height-interpolation.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="UTF-8">
<title>height: calc-size() animations</title>
<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.1, expect: `${50 * 1.1 - expected * 0.1}px` },
]);
test_interpolation({
property: 'height',
from: 'calc-size(any, 50px)',
to: `calc-size(${keyword}, size * 2)`,
}, [
{ at: -0.05, expect: `${50 * 1.05 - expected * 0.1}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' },
* 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.
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>