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>