Chrome 149: Scroll Promises, CSS Gaps, WebMCP

Chrome 149 goes stable today, and for once the headline features are things developers actually asked for — some for years. Scroll methods now return Promises. CSS grid and flex gaps are finally stylable. And the WebMCP origin trial opens, giving developers their first crack at making sites natively callable by AI agents. It is a quieter release than Chrome 147’s Temporal API debut, but the day-to-day impact lands harder.

Scroll Promises: The setTimeout Hack is Dead

Every developer who has tried to sequence an animation after a smooth scroll has written some version of this:

element.scrollTo({ top: 500, behavior: 'smooth' });
setTimeout(triggerRevealAnimation, 600); // fingers crossed

The timeout is a guess. Too short and the animation fires mid-scroll. Too long and there is an awkward pause. The web platform simply had no way to say “tell me when the scroll is done.”

Chrome 149 fixes that. scrollTo(), scrollBy(), and scrollIntoView() now return Promises that resolve when the scroll animation completes. The resolved value is a boolean: true if the target was reached, false if another scroll or user action interrupted it.

// Clean async
await element.scrollTo({ top: 500, behavior: 'smooth' });
triggerRevealAnimation(); // runs exactly when scroll lands

This is useful well beyond animation. Router libraries can await scroll-to-anchor before marking navigation complete. Automated E2E tests can scroll and assert in sequence without arbitrary waits. Infinite scroll loaders know precisely when the scroll lands before fetching the next page. It is a small API surface with wide implications for anyone building scroll-dependent interactions. The chromestatus entry has the full spec details.

CSS Gap Decorations: Style the Space Between

The gap property has been in grid and flex since 2020. It sets spacing. What it never let you do was style that spacing — add a dividing line, change its color, vary it per row versus per column.

The workaround graveyard includes borders on child elements (which double at shared edges), pseudo-elements with absolute positioning, extra divider elements in the HTML, and elaborate negative margin tricks. None of them are clean.

Chrome 149 ships gap decorations as stable. The column-rule property — previously only valid in multi-column layouts — now works in grid and flex. A new companion property, row-rule, handles horizontal gaps. The approach is intentionally familiar:

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  column-rule: 1px solid #e5e7eb;
  row-rule: 1px solid #e5e7eb;
}

The decorations are purely visual — they do not affect layout or spacing, so you can add them to existing grids without breaking anything. The rule-inset property lets you pull the rule back from grid edges for a floating separator look. You can even use repeat() syntax to cycle colors across gaps for striped layouts.

Edge 149 ships this alongside Chrome today. Firefox and Safari have not committed yet — use progressive enhancement and treat it as an enhancement layer for now. The State of CSS survey has listed gap styling as a top-requested feature for three consecutive years; it will land everywhere eventually.

WebMCP Origin Trial: Declare Your Site as an Agent Tool

WebMCP is a proposed browser standard that lets websites explicitly declare what AI agents can do on them — rather than leaving agents to scrape, click, and guess. Instead of fragile DOM interactions, your site exposes named tools with typed schemas. Agents call the tools; the site executes them cleanly.

The standard has two APIs. The declarative approach lets you annotate existing HTML forms with mcp-* attributes — zero JavaScript. The imperative API lets you register JavaScript functions as callable tools:

navigator.tools.register({
  name: 'searchProducts',
  description: 'Search the product catalog',
  inputSchema: { type: 'object', properties: { query: { type: 'string' } } },
  handler: async ({ query }) => fetch(`/api/search?q=${query}`).then(r => r.json())
});

Microsoft co-authored the spec and Edge 147 shipped support in March. The Chrome 149 origin trial means you can enroll your production domain and real Chrome 149 users will see WebMCP support on your site. Register at the Chrome Origin Trials page to get a token, add the Origin-Trial response header, and you are live. Google released a Model Context Tool Inspector extension for testing tools against Gemini Flash without a full MCP client setup.

Firefox and Safari have made no commitments. Chrome and Edge together cover roughly 70 percent of desktop users — enough to justify experimentation, but full web-standard status depends on broader buy-in.

Also in Chrome 149

Pages with open WebSocket connections can now enter back/forward cache. Previously an active WebSocket made a page BFCache-ineligible, forcing a full reload on back navigation. Chrome 149 closes the socket on bfcache entry instead. For apps like Notion, Linear, or Slack Web, back navigation should feel noticeably faster. Make sure your app handles the WebSocket close event and reconnects — most already do.

Upgrading

Chrome auto-updates; most desktop users will land on 149 within a day or two. You can verify at chrome://settings/help. For the full release notes see the Chrome 149 developer changelog. To test WebMCP locally before enrolling in the origin trial, enable the flag at chrome://flags/#webmcp.