add gradient tests

esbuild · Dec 10, 2023 · 11cc55b · 11cc55b
1 parent a4219bf
commit 11cc55b
Show file tree

Hide file tree

Showing 4 changed files with 428 additions and 5 deletions.
diff --git a/src/content/content-types.yml b/src/content/content-types.yml
@@ -994,9 +994,14 @@ body:
       | [`oklab()` and `oklch()`](https://www.w3.org/TR/css-color-4/#specifying-oklab-oklch) | `oklab(0.5 -0.1 0.1)`              |
       | [`color()`](https://www.w3.org/TR/css-color-4/#color-function)                       | `color(display-p3 1 0 0)`          |
       | [Color stops with two positions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients#creating_color_bands_stripes) | `linear-gradient(red 2% 4%, blue)` |
-      | [Gradient transition hints](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients#gradient_hints) | `linear-gradient(red, 20%, blue)` |
-      | [Gradient color spaces](https://developer.mozilla.org/en-US/blog/css-color-module-level-4/#comparing_gradients_in_different_color_spaces) | `linear-gradient(in hsl, red, blue)` |
-      | [Gradient hue mode](https://developer.mozilla.org/en-US/blog/css-color-module-level-4/#using_hue_interpolation_modes_in_gradients) | `linear-gradient(in hsl longer hue, red, blue)` |
+      | [Gradient transition hints](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients#gradient_hints) | `linear-gradient(red, 20%, blue)` <sup>1</sup> |
+      | [Gradient color spaces](https://developer.mozilla.org/en-US/blog/css-color-module-level-4/#comparing_gradients_in_different_color_spaces) | `linear-gradient(in hsl, red, blue)` <sup>1</sup> |
+      | [Gradient hue mode](https://developer.mozilla.org/en-US/blog/css-color-module-level-4/#using_hue_interpolation_modes_in_gradients) | `linear-gradient(in hsl longer hue, red, blue)` <sup>1</sup> |
+
+  - p: >
+      <footer>
+      <sup>1</sup> This is demonstrated visually by esbuild's [gradient transformation tests](/gradient-tests/).
+      </footer>
 
   - p: >
       Note that by default, esbuild's output will take advantage of modern

diff --git a/src/scripts/gradient-tests.css b/src/scripts/gradient-tests.css
@@ -0,0 +1,95 @@
+.linear.red_to_green-esbuild {
+  background: linear-gradient(to right, color(display-p3 1 0 0), color(display-p3 0 0.6 0));
+}
+
+.radial.red_to_green-esbuild {
+  background: radial-gradient(color(display-p3 1 0 0), color(display-p3 0 0.6 0));
+}
+
+.conic.red_to_green-esbuild {
+  background: conic-gradient(color(display-p3 1 0 0), color(display-p3 0 0.6 0));
+}
+
+.linear.rainbow_shorter-esbuild {
+  background: linear-gradient(to right in hwb shorter hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
+}
+
+.radial.rainbow_shorter-esbuild {
+  background: radial-gradient(in hwb shorter hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
+}
+
+.conic.rainbow_shorter-esbuild {
+  background: conic-gradient(in hwb shorter hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
+}
+
+.linear.rainbow_longer-esbuild {
+  background: linear-gradient(to right in hsl longer hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
+}
+
+.radial.rainbow_longer-esbuild {
+  background: radial-gradient(in hsl longer hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
+}
+
+.conic.rainbow_longer-esbuild {
+  background: conic-gradient(in hsl longer hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
+}
+
+.linear.rainbow_increasing-esbuild {
+  background: linear-gradient(to right in lch increasing hue, hsl(240deg 100% 75%) 10%, hsl(180deg 100% 75%) 90%);
+}
+
+.radial.rainbow_increasing-esbuild {
+  background: radial-gradient(in lch increasing hue, hsl(240deg 100% 75%) 10%, hsl(180deg 100% 75%) 90%);
+}
+
+.conic.rainbow_increasing-esbuild {
+  background: conic-gradient(in lch increasing hue, hsl(240deg 100% 75%) 10%, hsl(180deg 100% 75%) 90%);
+}
+
+.linear.rainbow_decreasing-esbuild {
+  background: linear-gradient(to right in oklch decreasing hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
+}
+
+.radial.rainbow_decreasing-esbuild {
+  background: radial-gradient(in oklch decreasing hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
+}
+
+.conic.rainbow_decreasing-esbuild {
+  background: conic-gradient(in oklch decreasing hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
+}
+
+.linear.midpoint_hint-esbuild {
+  background: linear-gradient(to right, #f00, #ff0, 75%, #0ff, #00f);
+}
+
+.radial.midpoint_hint-esbuild {
+  background: radial-gradient(#f00, #ff0, 75%, #0ff, #00f);
+}
+
+.conic.midpoint_hint-esbuild {
+  background: conic-gradient(#f00, #ff0, 75%, #0ff, #00f);
+}
+
+.linear.premultiplied_alpha-esbuild {
+  background: linear-gradient(to right, #f00f, 10%, #00f1, 90%, #0f0f);
+}
+
+.radial.premultiplied_alpha-esbuild {
+  background: radial-gradient(#f00f, 10%, #00f1, 90%, #0f0f);
+}
+
+.conic.premultiplied_alpha-esbuild {
+  background: conic-gradient(#f00f, 10%, #00f1, 90%, #0f0f);
+}
+
+.linear.mixed_units-esbuild {
+  background: linear-gradient(to right, color(display-p3 0.4 0 1) 30px, color(display-p3 0.96 0.75 0.4) 60%);
+}
+
+.radial.mixed_units-esbuild {
+  background: radial-gradient(color(display-p3 0.4 0 1) 30px, color(display-p3 1 0.75 0.4) 60%);
+}
+
+.conic.mixed_units-esbuild {
+  background: conic-gradient(color(display-p3 0.4 0 1) 30deg, color(display-p3 1 0.75 0.4) 60%);
+}