1 files changed, 25 insertions, 21 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
index ab55502487..892dbe40b4 100644
--- 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
@@ -36,26 +36,30 @@ function clamp(value, min, max) {
 }
 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}%)`);
+for (const use_calc of [false, true]) {
+  for (const percentage of [0, 50, 75, 100, 150]) {
+    const value = use_calc ? `fit-content(calc(0px + ${percentage}%))`
+                           : `fit-content(${percentage}%)`;
+    const container = document.createElement("div");
+    container.className = "container";
+    document.body.appendChild(container);
+    const grid = document.createElement("div");
+    grid.className = "grid";
+    grid.style.gridTemplateColumns = value;
+    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");
+    }, value);
+  }
 }
 </script>