Feature #6708
Updated by Aiden cwc 3 days ago
### 測試目的 (Objective)
驗證首頁 9 款咖啡品項的杯身視覺元件（SVG/CSS 圖層）是否精確對應其成分配方，圖層順序、顏色區塊、配方文字標籤皆完整無破圖或對齊偏差。
### 前置條件 (Preconditions)
1. 開啟受測網站首頁：[Coffee cart](https://coffee-cart.app/)。
2. 確保瀏覽器縮放比例為 100%。
### 測試步驟 (Test Steps)
1. 檢視第 1 列品項（Espresso、Espresso Macchiato、Cappuccino）的杯中液體分層：
- 檢查 Espresso 是否僅包含底層橘色 `espresso`。
- 檢查 Espresso Macchiato 是否包含底層 `espresso` 與頂層淺綠 `milk foam`。
- 檢查 Cappuccino 是否包含 `espresso`、`steamed milk`、`milk foam` 三層。
2. 檢視第 2 列品項（Mocha、Flat White、Americano）：
- 檢查 Mocha 是否包含 `espresso`、`chocolate syrup`、`steamed milk`、`whipped cream` 四層。
- 檢查 Flat White 是否包含 `espresso` 與上層 `steamed milk`。
- 檢查 Americano 是否包含 `espresso` 與上層藍綠色 `water`。
3. 檢視第 3 列複雜配方品項（Cafe Latte、Espresso Con Panna、Cafe Breve）：
- 檢查 Cafe Latte 是否完整呈現 `espresso`、`steamed milk`、`milk foam` 三層。
- 檢查 Espresso Con Panna 是否完整呈現 `espresso`、`whipped cream` 兩層。
- 檢查 Cafe Breve 是否完整呈現 `espresso`、`steamed milk`、`steamed cream`、`milk foam` 四層。
4. 檢查各色塊文字標籤（Label）字體是否清晰且垂直居中，無文字被杯框截斷。
### 預期結果 (Expected Results)
1. 9 款咖啡之圖層配方層次與 [專案說明](https://coffee-cart.app/github) 規格完全吻合，杯身無空白透明斷層。
2. SVG/Canvas 渲染正常，色塊邊緣平滑無毛邊破圖。
3. 所有配方文字（如 `espresso`、`steamed milk` 等）正確居中顯示在各自色塊內，無溢位或圖文重疊情況。