From 011f5eb5e4a6c6467c4f10cff263e524c535b844 Mon Sep 17 00:00:00 2001
From: Selam Waktola <selamw@google.com>
Date: Tue, 24 Feb 2026 13:32:59 -0800
Subject: [PATCH] remove overflow hidden from border radius utility classes to
 prevent text clipping

add visual regression test for border radius clipping

remove overflow hidden from border radius utility classes to prevent text clipping

add visual regression test for border radius clipping

add web_core tests to github

Stick with this version:"@types/node": "^24.10.1"

regenerate package-lock.json correctly
---
 .github/workflows/web_build_and_test.yml       |  4 ++++
 renderers/web_core/package.json                |  9 ++++++++-
 .../web_core/src/v0_8/styles/border.test.ts    | 18 ++++++++++++++++++
 renderers/web_core/src/v0_8/styles/border.ts   |  2 +-
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 renderers/web_core/src/v0_8/styles/border.test.ts

diff --git a/.github/workflows/web_build_and_test.yml b/.github/workflows/web_build_and_test.yml
index d97f21340..c0b4b2a72 100644
--- a/.github/workflows/web_build_and_test.yml
+++ b/.github/workflows/web_build_and_test.yml
@@ -47,6 +47,10 @@ jobs:
         working-directory: ./renderers/web_core
         run: npm run build
 
+      - name: Run web_core tests
+        working-directory: ./renderers/web_core
+        run: npm test
+
       - name: Install Lit renderer dependencies
         working-directory: ./renderers/lit
         run: npm i
diff --git a/renderers/web_core/package.json b/renderers/web_core/package.json
index 1f3ed83da..59221002a 100644
--- a/renderers/web_core/package.json
+++ b/renderers/web_core/package.json
@@ -35,9 +35,16 @@
     "prepack": "npm run build",
     "build": "wireit",
     "build:tsc": "wireit",
-    "copy-spec": "wireit"
+    "copy-spec": "wireit",
+    "test": "wireit"
   },
   "wireit": {
+    "test": {
+      "command": "node --test --enable-source-maps --test-reporter spec dist/src/v0_8/**/*.test.js",
+      "dependencies": [
+        "build"
+      ]
+    },
     "copy-spec": {
       "command": "node scripts/copy-spec.js",
       "files": [
diff --git a/renderers/web_core/src/v0_8/styles/border.test.ts b/renderers/web_core/src/v0_8/styles/border.test.ts
new file mode 100644
index 000000000..3762be280
--- /dev/null
+++ b/renderers/web_core/src/v0_8/styles/border.test.ts
@@ -0,0 +1,18 @@
+import test from 'node:test';
+import assert from 'node:assert';
+import { border } from './border.js';
+
+test('Border Styles', async (t) => {
+  await t.test('border-radius classes should not apply overflow: hidden to avoid text clipping', () => {
+    // The issue reported clipping of text when using rounded corners because
+    // .border-br-* generated classes also blindly applied overflow: hidden.
+    
+    // Check if the generated CSS contains overflow: hidden for border-br classes
+    const match = border.match(/\.border-br-\w+ \{[^}]*overflow:\s*hidden/);
+    assert.strictEqual(match, null, 'Found overflow: hidden applied within a border-br-* class');
+    
+    // Check that we DO have the expected border-radius applied
+    const hasBorderRadius = border.match(/\.border-br-1 \{ border-radius: [^;]+; \}/);
+    assert.notStrictEqual(hasBorderRadius, null, 'Missing border-radius in border-br-* class');
+  });
+});
diff --git a/renderers/web_core/src/v0_8/styles/border.ts b/renderers/web_core/src/v0_8/styles/border.ts
index c4e74100d..c44de3daa 100644
--- a/renderers/web_core/src/v0_8/styles/border.ts
+++ b/renderers/web_core/src/v0_8/styles/border.ts
@@ -28,7 +28,7 @@ export const border = `
         .border-brw-${idx} { border-right-width: ${idx}px; }
 
         .border-ow-${idx} { outline-width: ${idx}px; }
-        .border-br-${idx} { border-radius: ${idx * grid}px; overflow: hidden;}`;
+        .border-br-${idx} { border-radius: ${idx * grid}px; }`;
     })
     .join("\n")}