漸層轉換測試

此頁面是 esbuild 將現代 CSS 漸層語法轉換為舊版瀏覽器的視覺測試。每個測試案例都將瀏覽器對現代語法的原生呈現與 esbuild 的轉換（改用舊版語法）進行比較。這使得視覺上驗證 esbuild 的轉換是否正確，以及視覺上檢查給定瀏覽器對這些漸層語法功能的呈現變得容易。

在撰寫本文時，最新版本的 Chrome 和 Safari（Chrome 120 和 Safari 17.1）可以原生正確呈現所有這些測試案例，因此您應該預期這些結果在 Chrome 和 Safari 中會相符。然而，最新版本的 Firefox（Firefox 120）包含多個漸層呈現錯誤，因此目前需要 esbuild 的轉換才能讓這些測試案例在 Firefox 中正確呈現。

1. 在 P3 中從紅色到綠色

gradient(
  color(display-p3 1 0 0),
  color(display-p3 0 0.6 0))

注意：插值應在 oklab 色彩空間中進行。

2. 使用較短色相的彩虹

gradient(
  in hwb shorter hue,
  hsl(180deg 100% 75%) 10%,
  hsl(240deg 100% 75%) 90%)

3. 使用較長色相的彩虹

gradient(
  in hsl longer hue,
  hsl(180deg 100% 75%) 10%,
  hsl(240deg 100% 75%) 90%)

4. 使用增加色相的彩虹

gradient(
  in lch increasing hue,
  hsl(240deg 100% 75%) 10%,
  hsl(180deg 100% 75%) 90%)

5. 使用減少色相的彩虹

gradient(
  in oklch decreasing hue,
  hsl(180deg 100% 75%) 10%,
  hsl(240deg 100% 75%) 90%)

6. 過渡提示 / 中點

gradient(#f00, #ff0, 75%, #0ff, #00f)

注意：漸層應「拉」到一側。

7. 預乘 alpha

gradient(#f00f, 10%, #00f1, 90%, #0f0f)

注意：透明區域不應有太多藍色。

8. 混合單位

gradient(
  color(display-p3 0.4 0 1) 30px,
  color(display-p3 1 0.75 0.4) 60%)

注意：混合單位可透過發射 calc() 表達式來支援。