渐变转换测试

本页面是对 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() 表达式来支持。