グラデーション変換テスト

このページは、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. プレマルチプライドアルファ

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() 式を出力することで混合ユニットをサポートできます。