From f8aac61c0b83dd74003e7a18b04e5f00df3c5d01 Mon Sep 17 00:00:00 2001
From: SGavrl <277843151+SGavrl@users.noreply.github.com>
Date: Thu, 23 Jul 2026 12:53:23 +0000
Subject: [PATCH] test: gate contextual CSS math geometry

---
 render-repros/checks.json              |  7 +++++++
 render-repros/contextual-css-math.html | 24 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 render-repros/contextual-css-math.html

diff --git a/render-repros/checks.json b/render-repros/checks.json
index a45d6d4..e3e1b1d 100644
--- a/render-repros/checks.json
+++ b/render-repros/checks.json
@@ -35,6 +35,13 @@
     {"name": "float", "color": "#88bbdd", "width": 120, "height": 80},
     {"name": "cleared block", "color": "#ffcc66", "width": 500, "height": 40}
   ],
+  "contextual-css-math": [
+    {"name": "min width uses actual viewport", "color": "#087f5b", "x": 0, "y": 0, "width": 225, "height": 40},
+    {"name": "min margin uses actual viewport", "color": "#1971c2", "x": 225, "y": 60, "width": 100, "height": 40},
+    {"name": "clamp width uses actual viewport", "color": "#e8590c", "x": 0, "y": 120, "width": 270, "height": 40},
+    {"name": "calc combines viewport and root font units", "color": "#7048e8", "x": 122, "y": 180, "width": 100, "height": 40},
+    {"name": "max padding uses actual viewport", "color": "#c2255c", "x": 60, "y": 240, "width": 20, "height": 40}
+  ],
   "grid-auto-repeat": [
     {"name": "auto-fill creates all fitting tracks", "color": "#087f5b", "width": 210, "height": 60, "count": 4},
     {"name": "auto-fit collapses empty tracks", "color": "#1971c2", "width": 287, "height": 60, "count": 3}
diff --git a/render-repros/contextual-css-math.html b/render-repros/contextual-css-math.html
new file mode 100644
index 0000000..e00a0b5
--- /dev/null
+++ b/render-repros/contextual-css-math.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>contextual css math</title>
+  <style>
+    html, body { margin: 0; font-size: 16px; }
+    .row { width: 900px; height: 60px; overflow: hidden; }
+    .min-width { width: min(25vw, 350px); height: 40px; background: #087f5b; }
+    .min-margin { width: 100px; height: 40px; margin-left: min(25vw, 350px); background: #1971c2; }
+    .clamped { width: clamp(200px, 30vw, 320px); height: 40px; background: #e8590c; }
+    .calculated { width: 100px; height: 40px; margin-left: calc(10vw + 2rem); background: #7048e8; }
+    .padded { box-sizing: border-box; width: 200px; height: 40px; padding-left: max(5vw, 60px); background: #f08c00; }
+    .inner { width: 20px; height: 40px; background: #c2255c; }
+  </style>
+</head>
+<body>
+  <div class="row"><div class="min-width"></div></div>
+  <div class="row"><div class="min-margin"></div></div>
+  <div class="row"><div class="clamped"></div></div>
+  <div class="row"><div class="calculated"></div></div>
+  <div class="row"><div class="padded"><div class="inner"></div></div></div>
+</body>
+</html>