1 files changed, 74 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html
new file mode 100644
index 0000000000..d697af4743
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Change fit-content() argument</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
+<meta name="assert" content="This test checks that grid-template-{rows|columns} with fit-content() tracks recomputes the tracks when the fit-content() argument is modified.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  width: fit-content;
+  position: relative;
+  justify-content: start;
+  align-content: start;
+  font: 25px/1 Ahem;
+}
+
+.verticalLR {
+  writing-mode: vertical-lr;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+setup({ explicit_done: true });
+function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
+{
+  var gridElement = document.getElementById(id);
+  gridElement.style.gridTemplateRows = gridTemplateRows;
+  gridElement.style.gridTemplateColumns = gridTemplateColumns;
+}
+
+function testGridItemDefinitions(gridItemData)
+{
+  var item = document.getElementById(gridItemData.id);
+  item.setAttribute("data-expected-width", gridItemData.width);
+  item.setAttribute("data-expected-height", gridItemData.height);
+  item.setAttribute("data-offset-x", gridItemData.x);
+  item.setAttribute("data-offset-y", gridItemData.y);
+
+  checkLayout(".grid", false);
+}
+
+function testChangingGridDefinitions()
+{
+  // Test changing the argument of fit-content() tracks.
+  setGridTemplate("grid1", "none", "fit-content(100px)");
+  testGridItemDefinitions({"id": "item1", "width": "100", "height": "100", "x": "0", "y": "0" });
+
+  setGridTemplate("grid1", "none", "fit-content(150px)");
+  testGridItemDefinitions({"id": "item1", "width": "150", "height": "75", "x": "0", "y": "0" });
+
+  setGridTemplate("grid2", "fit-content(100px)", "none");
+  testGridItemDefinitions({"id": "item2", "width": "100", "height": "100", "x": "0", "y": "0" });
+
+  setGridTemplate("grid2", "fit-content(150px)", "none");
+  testGridItemDefinitions({"id": "item2", "width": "75", "height": "150", "x": "0", "y": "0" });
+
+  done();
+}
+</script>
+
+<body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })">
+<div id="grid1" class="grid">
+  <div id="item1" class="autoRowAutoColumn">XXXX XXX XX X X</div>
+</div>
+
+<div id="grid2" class="grid">
+  <div id="item2" class="autoRowAutoColumn verticalLR">XXXX XXX XX X X</div>
+</div>
+</body>