diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html')
-rw-r--r-- | testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html new file mode 100644 index 0000000000..146956c295 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html @@ -0,0 +1,87 @@ +<!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> |