<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: minimum contribution with percentages</title>
<link rel="author" title="Oriol Brufau" href="mailto:[email protected]" />
<link rel="help" href="https://drafts.csswg.org/css-grid/#minimum-contribution">
<meta name="assert" content="Checks that the minimum contribution is the minimum size when the preferred size is 'auto' or contains a percentage.">
<style>
#grid {
display: grid;
height: 50px;
width: 50px;
grid: auto / auto;
}
#item {
background: cyan;
}
#content {
height: 100px;
width: 100px;
}
.min {
min-height: calc(100% + 50px);
min-width: calc(100% + 50px);
}
.max {
max-height: calc(100% - 50px);
max-width: calc(100% - 50px);
}
.size {
height: calc(100% + 10px);
width: calc(100% + 10px);
}
</style>
<div id="log"></div>
<div id="grid">
<div id="item">
<div id="content"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
"use strict";
const cs = getComputedStyle(document.getElementById("grid"));
const item = document.getElementById("item");
function check(name, size) {
item.className = name;
test(function() {
assert_equals(cs.gridTemplateColumns, size + "px", "grid-template-columns");
}, name + " - columns");
test(function() {
assert_equals(cs.gridTemplateRows, size + "px", "grid-template-rows");
}, name + " - rows");
}
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size is 'auto'.
check("auto", 100);
// The minimum contribution is the minimum size (50px)
// because the preferred size is 'auto'.
check("min", 50);
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size is 'auto'.
check("max", 100);
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size depends on the containing block.
check("size", 100);
// The minimum contribution is the minimum size (50px)
// because the preferred size is 'auto'.
check("min max", 50);
// The minimum contribution is the minimum size (50px)
// because the preferred size depends on the containing block.
check("min size", 50);
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size depends on the containing block.
check("max size", 100);
// The minimum contribution is the minimum size (50px)
// because the preferred size depends on the containing block.
check("min max size", 50);
</script>
Codebase Browser
chromium