Blitz - WPT: grid-minimum-contribution-with-percentages.html

wpt / css / css-grid / grid-definition / grid-minimum-contribution-with-percentages.html

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

Subtest	Status	Message
auto - columns	PASS
auto - rows	PASS
min - columns	FAIL	assert_equals: grid-template-columns expected "50px" but got "100px"
min - rows	FAIL	assert_equals: grid-template-rows expected "50px" but got "100px"
max - columns	PASS
max - rows	PASS
size - columns	PASS
size - rows	PASS
min max - columns	FAIL	assert_equals: grid-template-columns expected "50px" but got "100px"
min max - rows	FAIL	assert_equals: grid-template-rows expected "50px" but got "100px"
min size - columns	FAIL	assert_equals: grid-template-columns expected "50px" but got "100px"
min size - rows	FAIL	assert_equals: grid-template-rows expected "50px" but got "100px"
max size - columns	PASS
max size - rows	PASS
min max size - columns	FAIL	assert_equals: grid-template-columns expected "50px" but got "100px"
min max size - rows	FAIL	assert_equals: grid-template-rows expected "50px" but got "100px"

Enable JavaScript in test iframe

/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: minimum contribution with percentages</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<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>