diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html')
-rw-r--r-- | testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html new file mode 100644 index 0000000000..ab55502487 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: indefinite percentage in fit-content()</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizes" title="7.2.1. Track Sizes"> +<meta name="assert" content="Checks that an indefinite percentage in fit-content lets the grid container grow enough to contain the max-content contribution of its grid items."> +<style> +.container { + width: 200px; + margin-top: 10px; +} +.grid { + display: inline-grid; + background: blue; +} +.item { + background: orange; +} +.item::before, .item::after { + content: ''; + float: left; + width: 50px; + height: 50px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script> +"use strict"; +function clamp(value, min, max) { + return Math.max(min, Math.min(max, value)); +} +const minContent = 50; +const maxContent = 100; +for (const percentage of [0, 50, 75, 100, 150]) { + const container = document.createElement("div"); + container.className = "container"; + document.body.appendChild(container); + const grid = document.createElement("div"); + grid.className = "grid"; + grid.style.gridTemplateColumns = `fit-content(${percentage}%)`; + container.appendChild(grid); + const item = document.createElement("div"); + item.className = "item"; + grid.appendChild(item); + test(function() { + const colSize = clamp(percentage * maxContent / 100, minContent, maxContent); + const height = colSize < maxContent ? maxContent : minContent; + assert_equals(item.offsetWidth, colSize, "Grid item width"); + assert_equals(item.offsetHeight, height, "Grid item height"); + assert_equals(grid.offsetWidth, maxContent, "Grid container width"); + assert_equals(grid.offsetHeight, height, "Grid container height"); + assert_equals(getComputedStyle(grid).gridTemplateColumns, colSize + "px", + "Grid column size"); + }, `fit-content(${percentage}%)`); +} +</script> |