feat(grid): implicit grid track sizing fixes + Phase 4 tests

integration_tests/specs/css/css-grid/advanced-sizing/auto-fill.ts

@@ -0,0 +1,166 @@
+describe('CSS Grid auto-fill', () => {
+  it('creates tracks with auto-fill and fixed size', async () => {
+    const grid = document.createElement('div');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = 'repeat(auto-fill, 100px)';
+    grid.style.gridTemplateRows = '80px';
+    grid.style.width = '350px';
+    grid.style.gap = '0';
+    grid.style.backgroundColor = '#f5f5f5';
+
+    for (let i = 0; i < 5; i++) {
+      const item = document.createElement('div');
+      item.textContent = `${i + 1}`;
+      item.style.backgroundColor = ['#42A5F5', '#66BB6A', '#FFA726', '#BA68C8', '#9575CD'][i];
+      item.style.display = 'flex';
+      item.style.alignItems = 'center';
+      item.style.justifyContent = 'center';
+      item.style.color = 'white';
+      grid.appendChild(item);
+    }
+
+    document.body.appendChild(grid);
+    await waitForFrame();
+    await snapshot();
+
+    const items = Array.from(grid.children) as HTMLElement[];
+    // Should fit 3 columns (350/100 = 3), wrapping to rows
+    expect(items[0].getBoundingClientRect().width).toBe(100);
+    expect(items[1].getBoundingClientRect().width).toBe(100);
+    expect(items[2].getBoundingClientRect().width).toBe(100);
+
+    grid.remove();
+  });
+
+  it('creates empty tracks with auto-fill', async () => {
+    const grid = document.createElement('div');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = 'repeat(auto-fill, 80px)';
+    grid.style.gridTemplateRows = '70px';
+    grid.style.width = '300px';
+    grid.style.gap = '0';
+    grid.style.backgroundColor = '#e3f2fd';
+
+    for (let i = 0; i < 2; i++) {
+      const item = document.createElement('div');
+      item.textContent = `${i + 1}`;
+      item.style.backgroundColor = ['#2196F3', '#1E88E5'][i];
+      item.style.display = 'flex';
+      item.style.alignItems = 'center';
+      item.style.justifyContent = 'center';
+      item.style.color = 'white';
+      grid.appendChild(item);
+    }
+
+    document.body.appendChild(grid);
+    await waitForFrame();
+    await snapshot();
+
+    // Should create tracks even if not all filled
+    const items = Array.from(grid.children) as HTMLElement[];
+    items.forEach(item => {
+      expect(item.getBoundingClientRect().width).toBe(80);
+    });
+
+    grid.remove();
+  });
+
+  it('uses auto-fill with minmax', async () => {
+    const grid = document.createElement('div');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(100px, 1fr))';
+    grid.style.gridTemplateRows = '80px';
+    grid.style.width = '350px';
+    grid.style.gap = '0';
+    grid.style.backgroundColor = '#f3e5f5';
+
+    for (let i = 0; i < 5; i++) {
+      const item = document.createElement('div');
+      item.textContent = `${i + 1}`;
+      item.style.backgroundColor = ['#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2'][i];
+      item.style.display = 'flex';
+      item.style.alignItems = 'center';
+      item.style.justifyContent = 'center';
+      item.style.color = 'white';
+      grid.appendChild(item);
+    }
+
+    document.body.appendChild(grid);
+    await waitForFrame();
+    await snapshot();
+
+    const items = Array.from(grid.children) as HTMLElement[];
+    // Should fit 3 columns at minimum (350/100 = 3)
+    items.slice(0, 3).forEach(item => {
+      expect(item.getBoundingClientRect().width).toBeGreaterThanOrEqual(100);
+    });
+
+    grid.remove();
+  });
+
+  it('handles auto-fill with gaps', async () => {
+    const grid = document.createElement('div');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = 'repeat(auto-fill, 90px)';
+    grid.style.gridTemplateRows = '70px';
+    grid.style.width = '300px';
+    grid.style.columnGap = '10px';
+    grid.style.backgroundColor = '#fff3e0';
+
+    for (let i = 0; i < 4; i++) {
+      const item = document.createElement('div');
+      item.textContent = `${i + 1}`;
+      item.style.backgroundColor = ['#FFB74D', '#FFA726', '#FF9800', '#FB8C00'][i];
+      item.style.display = 'flex';
+      item.style.alignItems = 'center';
+      item.style.justifyContent = 'center';
+      item.style.color = 'white';
+      grid.appendChild(item);
+    }
+
+    document.body.appendChild(grid);
+    await waitForFrame();
+    await snapshot();
+
+    const items = Array.from(grid.children) as HTMLElement[];
+    // With gaps: 90 + 10 + 90 + 10 + 90 = 290px, fits 3 columns
+    items.forEach(item => {
+      expect(item.getBoundingClientRect().width).toBe(90);
+    });
+
+    grid.remove();
+  });
+
+  it('handles auto-fill with small items', async () => {
+    const grid = document.createElement('div');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(60px, 1fr))';
+    grid.style.gridTemplateRows = '60px';
+    grid.style.width = '250px';
+    grid.style.gap = '0';
+    grid.style.backgroundColor = '#e8f5e9';
+
+    for (let i = 0; i < 3; i++) {
+      const item = document.createElement('div');
+      item.textContent = `${i + 1}`;
+      item.style.backgroundColor = ['#66BB6A', '#4CAF50', '#43A047'][i];
+      item.style.display = 'flex';
+      item.style.alignItems = 'center';
+      item.style.justifyContent = 'center';
+      item.style.color = 'white';
+      grid.appendChild(item);
+    }
+
+    document.body.appendChild(grid);
+    await waitForFrame();
+    await snapshot();
+
+    const items = Array.from(grid.children) as HTMLElement[];
+    // Should fit 4 columns (250/60 = 4), but only 3 items
+    items.forEach(item => {
+      expect(item.getBoundingClientRect().width).toBeGreaterThanOrEqual(60);
+    });
+
+    grid.remove();
+  });
+});

integration_tests/specs/css/css-grid/advanced-sizing/auto-fit.ts

@@ -0,0 +1,187 @@
+describe('CSS Grid auto-fit', () => {
+  it('collapses empty tracks with auto-fit', async () => {
+    const grid = document.createElement('div');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = 'repeat(auto-fit, 100px)';
+    grid.style.gridTemplateRows = '80px';
+    grid.style.width = '350px';
+    grid.style.gap = '0';
+    grid.style.backgroundColor = '#f5f5f5';
+
+    for (let i = 0; i < 2; i++) {
+      const item = document.createElement('div');
+      item.textContent = `${i + 1}`;
+      item.style.backgroundColor = ['#42A5F5', '#66BB6A'][i];
+      item.style.display = 'flex';
+      item.style.alignItems = 'center';
+      item.style.justifyContent = 'center';
+      item.style.color = 'white';
+      grid.appendChild(item);
+    }
+
+    document.body.appendChild(grid);
+    await waitForFrame();
+    await snapshot();
+
+    const items = Array.from(grid.children) as HTMLElement[];
+    // auto-fit collapses empty tracks, items may stretch
+    items.forEach(item => {
+      expect(item.getBoundingClientRect().width).toBeGreaterThanOrEqual(100);
+    });
+
+    grid.remove();
+  });
+
+  it('uses auto-fit with minmax to stretch items', async () => {
+    const grid = document.createElement('div');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(100px, 1fr))';
+    grid.style.gridTemplateRows = '80px';
+    grid.style.width = '350px';
+    grid.style.gap = '0';
+    grid.style.backgroundColor = '#e3f2fd';
+
+    for (let i = 0; i < 2; i++) {
+      const item = document.createElement('div');
+      item.textContent = `Item ${i + 1}`;
+      item.style.backgroundColor = ['#2196F3', '#1E88E5'][i];
+      item.style.display = 'flex';
+      item.style.alignItems = 'center';
+      item.style.justifyContent = 'center';
+      item.style.color = 'white';
+      grid.appendChild(item);
+    }
+
+    document.body.appendChild(grid);
+    await waitForFrame();
+    await snapshot();
+
+    const items = Array.from(grid.children) as HTMLElement[];
+    // Items should stretch to fill available space
+    expect(items[0].getBoundingClientRect().width).toBeGreaterThan(100);
+    expect(items[1].getBoundingClientRect().width).toBeGreaterThan(100);
+
+    grid.remove();
+  });
+
+  it('handles auto-fit with gaps', async () => {
+    const grid = document.createElement('div');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(80px, 1fr))';
+    grid.style.gridTemplateRows = '70px';
+    grid.style.width = '300px';
+    grid.style.columnGap = '10px';
+    grid.style.backgroundColor = '#f3e5f5';
+
+    for (let i = 0; i < 3; i++) {
+      const item = document.createElement('div');
+      item.textContent = `${i + 1}`;
+      item.style.backgroundColor = ['#BA68C8', '#AB47BC', '#9C27B0'][i];
+      item.style.display = 'flex';
+      item.style.alignItems = 'center';
+      item.style.justifyContent = 'center';
+      item.style.color = 'white';
+      grid.appendChild(item);
+    }
+
+    document.body.appendChild(grid);
+    await waitForFrame();
+    await snapshot();
+
+    const items = Array.from(grid.children) as HTMLElement[];
+    items.forEach(item => {
+      expect(item.getBoundingClientRect().width).toBeGreaterThanOrEqual(80);
+    });
+
+    grid.remove();
+  });
+
+  it('compares auto-fit vs auto-fill behavior', async () => {
+    const grid1 = document.createElement('div');
+    grid1.style.display = 'grid';
+    grid1.style.gridTemplateColumns = 'repeat(auto-fill, 100px)';
+    grid1.style.gridTemplateRows = '70px';
+    grid1.style.width = '350px';
+    grid1.style.gap = '0';
+    grid1.style.backgroundColor = '#fff3e0';
+
+    for (let i = 0; i < 2; i++) {
+      const item = document.createElement('div');
+      item.textContent = `Fill ${i + 1}`;
+      item.style.backgroundColor = ['#FFB74D', '#FFA726'][i];
+      item.style.display = 'flex';
+      item.style.alignItems = 'center';
+      item.style.justifyContent = 'center';
+      item.style.color = 'white';
+      item.style.fontSize = '11px';
+      grid1.appendChild(item);
+    }
+
+    document.body.appendChild(grid1);
+    await waitForFrame();
+    await snapshot();
+
+    const fillItems = Array.from(grid1.children) as HTMLElement[];
+    expect(fillItems[0].getBoundingClientRect().width).toBe(100);
+
+    grid1.remove();
+
+    const grid2 = document.createElement('div');
+    grid2.style.display = 'grid';
+    grid2.style.gridTemplateColumns = 'repeat(auto-fit, minmax(100px, 1fr))';
+    grid2.style.gridTemplateRows = '70px';
+    grid2.style.width = '350px';
+    grid2.style.gap = '0';
+    grid2.style.backgroundColor = '#e8f5e9';
+
+    for (let i = 0; i < 2; i++) {
+      const item = document.createElement('div');
+      item.textContent = `Fit ${i + 1}`;
+      item.style.backgroundColor = ['#66BB6A', '#4CAF50'][i];
+      item.style.display = 'flex';
+      item.style.alignItems = 'center';
+      item.style.justifyContent = 'center';
+      item.style.color = 'white';
+      item.style.fontSize = '11px';
+      grid2.appendChild(item);
+    }
+
+    document.body.appendChild(grid2);
+    await waitForFrame();
+    await snapshot();
+
+    const fitItems = Array.from(grid2.children) as HTMLElement[];
+    // auto-fit items should be wider (stretched)
+    expect(fitItems[0].getBoundingClientRect().width).toBeGreaterThan(100);
+
+    grid2.remove();
+  });
+
+  it('handles auto-fit with single item', async () => {
+    const grid = document.createElement('div');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(100px, 1fr))';
+    grid.style.gridTemplateRows = '80px';
+    grid.style.width = '300px';
+    grid.style.gap = '0';
+    grid.style.backgroundColor = '#ede7f6';
+
+    const item = document.createElement('div');
+    item.textContent = 'Single item';
+    item.style.backgroundColor = '#9575CD';
+    item.style.display = 'flex';
+    item.style.alignItems = 'center';
+    item.style.justifyContent = 'center';
+    item.style.color = 'white';
+    grid.appendChild(item);
+
+    document.body.appendChild(grid);
+    await waitForFrame();
+    await snapshot();
+
+    // Single item should stretch to fill available space
+    expect(item.getBoundingClientRect().width).toBe(300);
+
+    grid.remove();
+  });
+});