chore: fill CSS contain test gaps + unskip clippedBy e2e test

- Add 4 unit tests in predicates.test.ts for new contain metrics: inside hasClippedOverflow (with/without clipping) clippedBy clipKind (contain:paint=1, overflow=2) - Unskip and implement clippedBy e2e test with overflow:hidden container in e2e-edge.test.ts (was stale skipped with 'not yet implemented')
2026-05-21 14:44:26 -07:00
parent 4ff56d61c2
commit de12e93cf8
2 changed files with 165 additions and 5 deletions
@@ -185,11 +185,50 @@ test.describe('Edge Feature Tests', () => {
    expect(result.diagnostics.some(d => (d.code as string) === 'IMH_CARDINALITY_ATMOSTN_FAILED')).toBe(true)
  })

-  // ───────────────────────────────────────────────
-  // Topology: clippedBy
-  // ───────────────────────────────────────────────
-  test.skip('clippedBy - documented but not yet implemented', async () => {
-    // TODO: implement clippedBy topology predicate
+  // Add clippedBy to dense DSL test page with overflow:hidden container
+  async function loadClippingTestPage(page: Page) {
+    await page.setContent(`
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <style>
+          body { margin: 0; padding: 20px; }
+          .clip-container {
+            width: 200px; height: 200px;
+            overflow: hidden;
+            background: #eee;
+            position: relative;
+          }
+          .clipped-child {
+            width: 300px; height: 50px;
+            background: blue;
+            position: absolute; left: -50px; top: 0;
+          }
+        </style>
+      </head>
+      <body>
+        <div class="clip-container" data-testid="clip-container">
+          <div class="clipped-child" data-testid="clipped-child"></div>
+        </div>
+      </body>
+      </html>
+    `)
+    await page.waitForTimeout(50)
+  }
+
+  test('clippedBy - child is clipped by overflow:hidden container', async ({ page }) => {
+    await loadClippingTestPage(page)
+    const ui = await imhotep(page)
+
+    ui.spec(`in viewport:
+  '[data-testid="clipped-child"]' clippedBy '[data-testid="clip-container"]'`)
+
+    const result = await ui.checkAll()
+    expect(result.passed).toBe(true)
+    expect(result.clauseResults.length).toBe(1)
+    expect(result.clauseResults[0].status).toBe('pass')
+    // clipKind: 1=contain:paint, 2=overflow — container has overflow:hidden
+    expect(result.clauseResults[0].metrics?.clipKind).toBe(2)
  })

  // ───────────────────────────────────────────────