# HTML Rendering - Delta Spec

本 spec 是对 `openspec/specs/html-rendering/spec.md` 的增量修改。

## MODIFIED Requirements

### Requirement: 系统必须渲染图片元素

系统 SHALL 将 YAML 中的图片元素转换为 HTML `<img>` 标签，支持 `fit` 和 `background` 参数，使用 CSS object-fit 实现适配模式。

#### Scenario: 渲染本地图片

- **WHEN** 元素定义为 `{type: image, src: "images/logo.png", box: [2, 3, 4, 3]}`
- **THEN** 系统生成 `<img>` 标签，src 为图片的文件路径，位置为 (192px, 288px)，尺寸为 384x288 像素
- **AND** 使用默认的 CSS 样式 `object-fit: fill`（等同于 stretch 模式）

#### Scenario: 使用 fit 模式渲染图片

- **WHEN** 元素定义为 `{type: image, src: "photo.jpg", box: [1, 1, 4, 3], fit: contain}`
- **THEN** 系统应用 CSS `object-fit: contain`
- **AND** 保持图片宽高比，完整显示在 box 内

#### Scenario: fit 模式与 CSS object-fit 映射

- **WHEN** `fit` 参数为 `stretch`
- **THEN** 系统应用 CSS `object-fit: fill`

- **WHEN** `fit` 参数为 `contain`
- **THEN** 系统应用 CSS `object-fit: contain`

- **WHEN** `fit` 参数为 `cover`
- **THEN** 系统应用 CSS `object-fit: cover`

- **WHEN** `fit` 参数为 `center`
- **THEN** 系统应用 CSS `object-fit: none` 和 `object-position: center`

#### Scenario: 使用背景色渲染图片

- **WHEN** 元素定义为 `{type: image, src: "photo.png", box: [1, 1, 4, 3], fit: contain, background: "#f0f0f0"}`
- **THEN** 系统为图片容器添加 CSS `background-color: #f0f0f0`
- **AND** 应用 CSS `object-fit: contain`

#### Scenario: 图片容器支持背景色

- **WHEN** 图片指定了 `background` 参数
- **THEN** 系统创建包装容器，应用背景色到容器
- **AND** 图片在容器内使用 object-fit 定位

#### Scenario: 处理相对路径

- **WHEN** 图片 src 使用相对路径 `"assets/logo.png"`
- **THEN** 系统基于 YAML 文件所在目录解析相对路径

#### Scenario: 图片不存在时显示占位符

- **WHEN** 图片文件不存在
- **THEN** 系统显示占位符或错误提示，而不是崩溃

#### Scenario: 使用 DPI 配置渲染图片

- **WHEN** metadata 定义了 `dpi: 120`
- **THEN** 系统使用该 DPI 值进行英寸到像素的转换
- **AND** box: [1, 1, 4, 3] 转换为 CSS: left: 120px; top: 120px; width: 480px; height: 360px

#### Scenario: HTML 渲染与 PPTX 渲染效果一致

- **WHEN** 同一图片元素使用相同的 fit 和 background 参数
- **THEN** HTML 预览和 PPTX 输出的视觉效果应保持一致
- **AND** 图片位置、尺寸、适配方式相同

### Requirement: 图片元素的 box 参数必须存在

系统 SHALL 要求图片元素必须包含 `box` 参数，否则验证失败。

#### Scenario: 缺少 box 参数时报错

- **WHEN** 图片元素未定义 `box` 参数
- **THEN** 系统抛出 ERROR，提示 box 参数为必需

#### Scenario: box 参数转换为像素

- **WHEN** 图片元素定义了 `box: [1, 2, 4, 3]` 且 DPI 为 96
- **THEN** 系统转换为 CSS：left: 96px; top: 192px; width: 384px; height: 288px