From 11cc55bfdc693e43435b500bb161150e6d42316f Mon Sep 17 00:00:00 2001 From: Evan Wallace Date: Sun, 10 Dec 2023 04:52:54 +0000 Subject: [PATCH] add gradient tests --- src/content/content-types.yml | 11 +- src/scripts/gradient-tests.css | 95 ++++++++++ src/scripts/gradient-tests.html | 320 ++++++++++++++++++++++++++++++++ src/scripts/render.js | 7 +- 4 files changed, 428 insertions(+), 5 deletions(-) create mode 100644 src/scripts/gradient-tests.css create mode 100644 src/scripts/gradient-tests.html diff --git a/src/content/content-types.yml b/src/content/content-types.yml index b3c8f66..26acd56 100644 --- 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)` 1 | + | [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)` 1 | + | [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)` 1 | + + - p: > + - 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 new file mode 100644 index 0000000..91c8f71 --- /dev/null +++ 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%); +} diff --git a/src/scripts/gradient-tests.html b/src/scripts/gradient-tests.html new file mode 100644 index 0000000..55cc658 --- /dev/null +++ b/src/scripts/gradient-tests.html @@ -0,0 +1,320 @@ + + + + + + esbuild - Gradient Transformation Tests + + + + + +

Gradient Transformation Tests

+

+ This page is a visual test of esbuild's transformation of modern CSS gradient syntax for older browsers. Each test + case compares the browser's native rendering of the modern syntax to esbuild's transformation (which uses the legacy + syntax instead). This makes it easy to visually verify that esbuild's transformation is correct as well as to + visually inspect a given browser's rendering of these gradient syntax features. +

+

+ At the time of writing, the latest versions of Chrome and Safari (Chrome 120 and Safari 17.1) can natively render + all of these test cases correctly, so you should expect these results to match in Chrome and Safari. However, the + latest version of Firefox (Firefox 120) contains multiple gradient rendering bugs, so esbuild's transformation is + currently necessary to get these test cases to render correctly in Firefox. +

+ +

1. Red to green in P3

+ 
gradient(
+  color(display-p3 1 0 0),
+  color(display-p3 0 0.6 0))
+
native
+
esbuild
+
+
native
+
esbuild
+
native
+
esbuild
+
+

Note: Interpolation should happen in the oklab color space.

+ +

2. Rainbow using shorter hue

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

3. Rainbow using longer hue

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

4. Rainbow using increasing hue

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

5. Rainbow using decreasing hue

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

6. Transition hint / midpoint

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

Note: The gradient should be "pulled" to one side.

+ +

7. Premultiplied alpha

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

Note: The transparent area should not have much blue color.

+ +

8. Mixed units

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

Note: Mixed units can be supported by emitting calc() expressions.

+ + + diff --git a/src/scripts/render.js b/src/scripts/render.js index fd3a8d2..f9dee47 100644 --- a/src/scripts/render.js +++ b/src/scripts/render.js @@ -27,8 +27,11 @@ function minifyCSS(css) { return esbuild.transformSync(css, { loader: 'css', target, minify: true }).code.trim() } -fs.mkdirSync(outDir, { recursive: true }) +fs.mkdirSync(path.join(outDir, 'gradient-tests'), { recursive: true }) fs.copyFileSync(path.join(scriptsDir, 'favicon.svg'), path.join(outDir, 'favicon.svg')) +fs.copyFileSync(path.join(scriptsDir, 'gradient-tests.html'), path.join(outDir, 'gradient-tests/index.html')) +fs.writeFileSync(path.join(outDir, 'gradient-tests/style.css'), + esbuild.transformSync(fs.readFileSync(path.join(scriptsDir, 'gradient-tests.css'), 'utf8'), { loader: 'css', target }).code) const minifiedCSS = minifyCSS(fs.readFileSync(path.join(scriptsDir, 'style.css'), 'utf8')) const minifiedJS = minifyJS(fs.readFileSync(path.join(scriptsDir, 'script.js'), 'utf8')) @@ -646,7 +649,7 @@ async function main() { const href = inline.attrGet('href') // Handle special cases - if (href === '/analyze/') continue + if (href === '/analyze/' || href === '/gradient-tests/') continue // Check cross-page links if (href.startsWith('/')) {