| <!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> |
