# M14-04G：Chromium responsive layout no-overlap/no-overflow matrix

- `task`: `M14-04G`
- `parent`: `M14-04F`
- `status`: `done`

## 目标

在 Chromium 主线程 WebGL 和 OffscreenCanvas Worker 两种生产视口下，验证桌面、平板和手机
尺寸不会产生横向溢出、关键区域重叠、文字裁切或不可操作的触控目标；布局失败必须能被
机器 checker 稳定报告。Firefox/WebKit 不在本项目范围内。

## 输入

- 上一个 manifest：`tests/golden/M14-04F/manifest.json`
- 生产布局入口：`web/app/src/app/App.tsx`、`web/app/src/app/app-shell.css`
- 视口入口：`web/app/src/three-adapter/viewport.ts`、`web/app/src/three-adapter/offscreen-viewport.ts`
- 既有 e2e 参考：`web/tests/e2e/responsive-layout.spec.ts`

## 范围

做：

- 固定 `1440x900`、`1280x720`、`834x1112`、`390x844` 四个 Chromium viewport。
- 分别验证 `offscreen=0` 和 `offscreen=1`，记录实际 renderer backend。
- 检查 document 横向滚动、topbar、sidebar、viewport、timeline、status bar 的 bounding box。
- 检查长项目名、错误提示、打开进度、面板展开和 DPR 2 下文字与按钮仍在容器内。
- 记录失败元素、测量值、viewport、DPR、backend 和报告 hash。

不做：

- Firefox/WebKit 兼容性证据。
- 完整 UI 重设计或新增 Blender 功能。
- 只用截图非空作为布局通过条件。

## 验收

```text
npm --prefix web run test:chromium-layout
```

必要的补充门：

```text
npm --prefix web run typecheck
npm --prefix web run build
git diff --check
```

## 产物和交接

- 报告：`tests/golden/M14-04G/chromium-layout-report.json`
- manifest：`tests/golden/M14-04G/manifest.json`
- 状态页：`docs/status/M14-04G.md`
- 下一任务：由 manifest 的 `nextTask` 决定

## 回滚

删除布局 checker、测试、报告、manifest、package 命令和本任务状态页；恢复 `M14-04F` 作为队列尾，
不得修改 M14-04F 的成功证据。