<!DOCTYPE html>
<title>calc-size() on height, with border/padding/margin/box-sizing</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#container {
display: inline-block;
font-size: 20px;
}
#target {
width: 123px;
border-style: solid;
border-width: 1px 20px 3px 20px;
padding: 3px 20px 5px 20px;
margin: 2px 20px 1px 20px;
}
#child {
width: 20px;
height: 7px;
}
</style>
<div id="container">
<div id="target">
<div id="child"></div>
</div>
</div>
<script>
let tests = [
{
styles: {
"height": "auto",
},
expected_target_computed: "7px",
expected_target_border_box: 19,
expected_container: 22,
},
{
styles: {
"height": "auto",
"box-sizing": "border-box",
},
expected_target_computed: "19px",
expected_target_border_box: 19,
expected_container: 22,
},
{
styles: {
"height": "calc-size(auto, size)",
},
expected_target_computed: "7px",
expected_target_border_box: 19,
expected_container: 22,
},
{
styles: {
"height": "calc-size(auto, size)",
"box-sizing": "border-box",
},
expected_target_computed: "19px",
expected_target_border_box: 19,
expected_container: 22,
},
{
styles: {
"height": "calc-size(auto, size * 2)",
},
expected_target_computed: "14px",
expected_target_border_box: 26,
expected_container: 29,
},
{
styles: {
"height": "calc-size(auto, size * 2)",
"box-sizing": "content-box", /* just one test with explicit initial value */
},
expected_target_computed: "14px",
expected_target_border_box: 26,
expected_container: 29,
},
{
styles: {
"height": "calc-size(auto, size * 2)",
"box-sizing": "border-box",
},
expected_target_computed: "38px",
expected_target_border_box: 38,
expected_container: 41,
},
{
styles: {
"height": "calc-size(min-content, size * 2)",
},
expected_target_computed: "14px",
expected_target_border_box: 26,
expected_container: 29,
},
{
styles: {
"height": "calc-size(fit-content, size * 2)",
"box-sizing": "border-box",
},
expected_target_computed: "38px",
expected_target_border_box: 38,
expected_container: 41,
},
{
styles: {
"min-height": "calc-size(min-content, size * 2)",
},
expected_target_computed: "14px",
expected_target_border_box: 26,
expected_container: 29,
},
{
styles: {
"min-height": "calc-size(fit-content, size * 2)",
"box-sizing": "border-box",
},
expected_target_computed: "38px",
expected_target_border_box: 38,
expected_container: 41,
},
{
styles: {
"height": "200px",
"max-height": "calc-size(min-content, size * 2)",
},
expected_target_computed: "14px",
expected_target_border_box: 26,
expected_container: 29,
},
{
styles: {
"height": "200px",
"max-height": "calc-size(fit-content, size * 2)",
"box-sizing": "border-box",
},
expected_target_computed: "38px",
expected_target_border_box: 38,
expected_container: 41,
},
{
styles: {
"height": "calc-size(11px, size * 2)",
},
expected_target_computed: "22px",
expected_target_border_box: 34,
expected_container: 37,
},
{
styles: {
"height": "calc-size(11px, size * 2)",
"box-sizing": "border-box",
},
expected_target_computed: "22px",
expected_target_border_box: 22,
expected_container: 25,
},
];
const container = document.getElementById("container");
const container_cs = getComputedStyle(container);
const target = document.getElementById("target");
const target_cs = getComputedStyle(target);
for (const obj of tests) {
test((t) => {
for (const prop in obj.styles) {
target.style.setProperty(prop, obj.styles[prop]);
}
t.add_cleanup(() => {
for (const prop in obj.styles) {
target.style.removeProperty(prop);
}
});
assert_equals(target_cs.height, obj.expected_target_computed,
"getComputedStyle(target).height");
assert_equals(target.getBoundingClientRect().height, obj.expected_target_border_box,
"target.getBoundingClientRect().height");
assert_equals(container_cs.height, `${obj.expected_container}px`,
"getComputedStyle(container).height");
assert_equals(container.getBoundingClientRect().height, obj.expected_container,
"container.getBoundingClientRect().height");
}, `resolved height with styles ${JSON.stringify(obj.styles)}`);
}
</script>
Codebase Browser
chromium