test: spacing-utilities regression for issue #61

package.json

@@ -18,7 +18,7 @@
     "postcss": "postcss ./src/chota.css -d dist/",
     "watch": "cross-env NODE_ENV=development postcss ./src/chota.css -d dist/ -w",
     "test": "stylelint src/*.css",
-    "test:vrt": "npx playwright test test/vrt/index.spec.js test/vrt/components.spec.js test/vrt/validations/nav-logo-full-height.spec.js --project=chromium",
+    "test:vrt": "npx playwright test test/vrt/index.spec.js test/vrt/components.spec.js test/vrt/validations/nav-logo-full-height.spec.js test/vrt/validations/spacing-utilities.spec.js --project=chromium",
     "test:a11y": "npx playwright test test/vrt/a11y.spec.js test/vrt/a11y-keyboard.spec.js --project=chromium",
     "test:api": "npx playwright test test/vrt/api.spec.js --project=chromium",
     "baselines": "node scripts/baselines.js"

test/spacing-utilities.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Spacing Utilities — Issue #61 Regression</title>
+  <link rel="stylesheet" href="/dist/chota.css">
+</head>
+<body>
+
+<!-- Container baseline and utilities -->
+<div class="container" data-test-id="container-baseline">Baseline .container</div>
+<div class="container is-marginless" data-test-id="container-marginless">.is-marginless on .container</div>
+<div class="container is-paddingless" data-test-id="container-paddingless">.is-paddingless on .container</div>
+
+<!-- Row baseline and utilities -->
+<div class="container">
+  <div class="row" data-test-id="row-baseline">Baseline .row</div>
+  <div class="row is-marginless" data-test-id="row-marginless">.is-marginless on .row</div>
+  <div class="row is-paddingless" data-test-id="row-paddingless">.is-paddingless on .row</div>
+</div>
+
+<!-- Col variants with utilities -->
+<div class="container">
+  <div class="row">
+    <div class="col" data-test-id="col-baseline">Baseline .col</div>
+    <div class="col is-marginless" data-test-id="col-marginless">.is-marginless on .col</div>
+    <div class="col is-paddingless" data-test-id="col-paddingless">.is-paddingless on .col</div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-6 is-marginless" data-test-id="col6-marginless">.col-6.is-marginless</div>
+  </div>
+</div>
+
+<!-- Full nesting: .container > .row > .col -->
+<div class="container">
+  <div class="row" data-test-id="nested-row">
+    <div class="col" data-test-id="nested-col">Full nesting baseline</div>
+  </div>
+</div>
+
+</body>
+</html>

test/vrt/validations/spacing-utilities.spec.js

@@ -0,0 +1,133 @@
+/**
+ * Issue #136 — Spacing Utilities Regression (Candidate: Issue #61)
+ *
+ * Validates that .is-marginless and .is-paddingless properly override
+ * baked-in spacing on .container, .row, and .col variants.
+ *
+ * Base SHA: 32e0c7ef4c4f2a2d72feb43cebdb37dd9591bc02
+ * Built from: npm run build (from base SHA)
+ */
+const { test, expect } = require('@playwright/test');
+const { startFixtureServer, loadFixture } = require('../vrt-helpers');
+
+const HALF_GUTTER = '10px'; // --grid-gutter / 2 = 1rem
+const NEG_HALF_GUTTER = '-10px'; // --grid-gutter / -2 = -1rem
+
+async function getComputedSpacing(page, selector) {
+  return page.evaluate((sel) => {
+    const el = document.querySelector(sel);
+    if (!el) return null;
+    const cs = window.getComputedStyle(el);
+    return {
+      marginTop: cs.marginTop,
+      marginRight: cs.marginRight,
+      marginBottom: cs.marginBottom,
+      marginLeft: cs.marginLeft,
+      paddingTop: cs.paddingTop,
+      paddingRight: cs.paddingRight,
+      paddingBottom: cs.paddingBottom,
+      paddingLeft: cs.paddingLeft,
+    };
+  }, selector);
+}
+
+test.describe('Spacing Utilities — Issue #61 Regression', () => {
+  let server;
+  let PORT;
+
+  test.beforeAll(async () => {
+    server = await startFixtureServer(3700);
+    PORT = server.port;
+  });
+
+  test.afterAll(async () => {
+    if (server) await server.stop();
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await loadFixture(page, server, 'spacing-utilities.html');
+  });
+
+  // ─── .container ───────────────────────────────────────────────────
+
+  test('baseline .container has 10px horizontal padding', async ({ page }) => {
+    const spacing = await getComputedSpacing(page, '[data-test-id="container-baseline"]');
+    expect(spacing).not.toBeNull();
+    expect(spacing.paddingTop).toBe('0px');
+    expect(spacing.paddingRight).toBe(HALF_GUTTER);
+    expect(spacing.paddingBottom).toBe('0px');
+    expect(spacing.paddingLeft).toBe(HALF_GUTTER);
+  });
+
+  test('.container.is-marginless has all margins 0px', async ({ page }) => {
+    const spacing = await getComputedSpacing(page, '[data-test-id="container-marginless"]');
+    expect(spacing).not.toBeNull();
+    expect(spacing.marginTop).toBe('0px');
+    expect(spacing.marginRight).toBe('0px');
+    expect(spacing.marginBottom).toBe('0px');
+    expect(spacing.marginLeft).toBe('0px');
+  });
+
+  test('.container.is-paddingless has all padding 0px', async ({ page }) => {
+    const spacing = await getComputedSpacing(page, '[data-test-id="container-paddingless"]');
+    expect(spacing).not.toBeNull();
+    expect(spacing.paddingTop).toBe('0px');
+    expect(spacing.paddingRight).toBe('0px');
+    expect(spacing.paddingBottom).toBe('0px');
+    expect(spacing.paddingLeft).toBe('0px');
+  });
+
+  // ─── .row ─────────────────────────────────────────────────────────
+
+  test('baseline .row has horizontal margins -10px', async ({ page }) => {
+    const spacing = await getComputedSpacing(page, '[data-test-id="row-baseline"]');
+    expect(spacing).not.toBeNull();
+    expect(spacing.marginLeft).toBe(NEG_HALF_GUTTER);
+    expect(spacing.marginRight).toBe(NEG_HALF_GUTTER);
+  });
+
+  test('.row.is-marginless has horizontal margins 0px', async ({ page }) => {
+    const spacing = await getComputedSpacing(page, '[data-test-id="row-marginless"]');
+    expect(spacing).not.toBeNull();
+    expect(spacing.marginLeft).toBe('0px');
+    expect(spacing.marginRight).toBe('0px');
+  });
+
+  // ─── .col ─────────────────────────────────────────────────────────
+
+  test('baseline .col has side and bottom margins 10px', async ({ page }) => {
+    const spacing = await getComputedSpacing(page, '[data-test-id="col-baseline"]');
+    expect(spacing).not.toBeNull();
+    expect(spacing.marginTop).toBe('0px');
+    expect(spacing.marginRight).toBe(HALF_GUTTER);
+    expect(spacing.marginBottom).toBe(HALF_GUTTER);
+    expect(spacing.marginLeft).toBe(HALF_GUTTER);
+  });
+
+  test('.col.is-marginless has all margins 0px', async ({ page }) => {
+    const spacing = await getComputedSpacing(page, '[data-test-id="col-marginless"]');
+    expect(spacing).not.toBeNull();
+    expect(spacing.marginTop).toBe('0px');
+    expect(spacing.marginRight).toBe('0px');
+    expect(spacing.marginBottom).toBe('0px');
+    expect(spacing.marginLeft).toBe('0px');
+  });
+
+  // ─── Numbered column utility override ──────────────────────────────
+
+  test('.col-6.is-marginless receives utility override', async ({ page }) => {
+    const spacing = await getComputedSpacing(page, '[data-test-id="col6-marginless"]');
+    expect(spacing).not.toBeNull();
+    expect(spacing.marginRight).toBe('0px');
+    expect(spacing.marginLeft).toBe('0px');
+  });
+
+  // ─── Full nesting ─────────────────────────────────────────────────
+
+  test('nested .container > .row > .col remains correct', async ({ page }) => {
+    const spacing = await getComputedSpacing(page, '[data-test-id="nested-col"]');
+    expect(spacing).not.toBeNull();
+    expect(spacing.marginRight).toBe(HALF_GUTTER);
+    expect(spacing.marginLeft).toBe(HALF_GUTTER);
+  });
+});