github.com/evanw/esbuild@v0.21.4/scripts/gradient-tests.html (about) 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf8"> 6 <link rel="stylesheet" href="out.css"> 7 <style> 8 body { 9 margin: 30px; 10 font: 16px/20px sans-serif; 11 color: black; 12 background: white; 13 } 14 15 @media (prefers-color-scheme: dark) { 16 body { 17 color: white; 18 background: black; 19 } 20 } 21 22 a { 23 color: inherit; 24 } 25 26 p { 27 margin: 20px 0; 28 } 29 30 pre { 31 margin: 20px 0 10px 0; 32 font: 14px/20px Monaco, monospace; 33 white-space: pre-wrap; 34 } 35 36 h2 { 37 margin: 50px 0 0 0; 38 } 39 40 .linear { 41 max-width: 400px; 42 height: 20px; 43 text-indent: 4px; 44 font-size: 14px; 45 color: white; 46 text-shadow: 0 0 3px black; 47 background: repeating-linear-gradient(-45deg, 48 rgba(191, 191, 191, 0.4) 0 7px, 49 transparent 7px 14px); 50 } 51 52 section { 53 margin-top: 12px; 54 display: flex; 55 } 56 57 .radial+.radial { 58 margin-right: 12px; 59 } 60 61 .radial, 62 .conic { 63 width: 97px; 64 height: 97px; 65 text-align: center; 66 line-height: 97px; 67 font-size: 14px; 68 color: white; 69 text-shadow: 0 0 3px black; 70 background: repeating-linear-gradient(-45deg, 71 transparent 0 6.86px, 72 rgba(191, 191, 191, 0.4) 6.86px 13.72px); 73 } 74 75 .checkerboard { 76 position: relative; 77 } 78 79 .checkerboard:after { 80 content: ' '; 81 display: block; 82 position: absolute; 83 left: 0; 84 top: 0; 85 right: 0; 86 bottom: 0; 87 z-index: -1; 88 background: url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="20" fill="white"/><path d="M0 10V0H10V10H20V20H10V10H0Z" fill="%23EEEEEE"/></svg>'); 89 } 90 91 .linear.red_to_green-native { 92 background: linear-gradient(to right, color(display-p3 1 0 0), color(display-p3 0 0.6 0)); 93 } 94 95 .radial.red_to_green-native { 96 background: radial-gradient(color(display-p3 1 0 0), color(display-p3 0 0.6 0)); 97 } 98 99 .conic.red_to_green-native { 100 background: conic-gradient(color(display-p3 1 0 0), color(display-p3 0 0.6 0)); 101 } 102 103 .linear.rainbow_shorter-native { 104 background: linear-gradient(to right in hwb shorter hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%); 105 } 106 107 .radial.rainbow_shorter-native { 108 background: radial-gradient(in hwb shorter hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%); 109 } 110 111 .conic.rainbow_shorter-native { 112 background: conic-gradient(in hwb shorter hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%); 113 } 114 115 .linear.rainbow_longer-native { 116 background: linear-gradient(to right in hsl longer hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%); 117 } 118 119 .radial.rainbow_longer-native { 120 background: radial-gradient(in hsl longer hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%); 121 } 122 123 .conic.rainbow_longer-native { 124 background: conic-gradient(in hsl longer hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%); 125 } 126 127 .linear.rainbow_increasing-native { 128 background: linear-gradient(to right in lch increasing hue, hsl(240deg 100% 75%) 10%, hsl(180deg 100% 75%) 90%); 129 } 130 131 .radial.rainbow_increasing-native { 132 background: radial-gradient(in lch increasing hue, hsl(240deg 100% 75%) 10%, hsl(180deg 100% 75%) 90%); 133 } 134 135 .conic.rainbow_increasing-native { 136 background: conic-gradient(in lch increasing hue, hsl(240deg 100% 75%) 10%, hsl(180deg 100% 75%) 90%); 137 } 138 139 .linear.rainbow_decreasing-native { 140 background: linear-gradient(to right in oklch decreasing hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%); 141 } 142 143 .radial.rainbow_decreasing-native { 144 background: radial-gradient(in oklch decreasing hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%); 145 } 146 147 .conic.rainbow_decreasing-native { 148 background: conic-gradient(in oklch decreasing hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%); 149 } 150 151 .linear.midpoint_hint-native { 152 background: linear-gradient(to right, #f00, #ff0, 75%, #0ff, #00f); 153 } 154 155 .radial.midpoint_hint-native { 156 background: radial-gradient(#f00, #ff0, 75%, #0ff, #00f); 157 } 158 159 .conic.midpoint_hint-native { 160 background: conic-gradient(#f00, #ff0, 75%, #0ff, #00f); 161 } 162 163 .linear.premultiplied_alpha-native { 164 background: linear-gradient(to right, #f00f, 10%, #00f1, 90%, #0f0f); 165 } 166 167 .radial.premultiplied_alpha-native { 168 background: radial-gradient(#f00f, 10%, #00f1, 90%, #0f0f); 169 } 170 171 .conic.premultiplied_alpha-native { 172 background: conic-gradient(#f00f, 10%, #00f1, 90%, #0f0f); 173 } 174 175 .linear.mixed_units-native { 176 background: linear-gradient(to right, color(display-p3 0.4 0 1) 30px, color(display-p3 1 0.75 0.4) 60%); 177 } 178 179 .radial.mixed_units-native { 180 background: radial-gradient(color(display-p3 0.4 0 1) 30px, color(display-p3 1 0.75 0.4) 60%); 181 } 182 183 .conic.mixed_units-native { 184 background: conic-gradient(color(display-p3 0.4 0 1) 30deg, color(display-p3 1 0.75 0.4) 60%); 185 } 186 187 </style> 188 </head> 189 190 <body> 191 <p>This page is a visual test of esbuild's CSS gradient transformation. Run it like this:</p> 192 <pre>./esbuild --servedir=scripts --outfile=scripts/out.css scripts/gradient-tests.css --target=firefox30</pre> 193 <p>Then open this page as <a 194 href="http://localhost:8000/gradient-tests.html">http://localhost:8000/gradient-tests.html</a>.</p> 195 196 <h2>1. Red to green in P3</h2> 197 <pre>gradient( 198 color(display-p3 1 0 0), 199 color(display-p3 0 0.6 0))</pre> 200 <div class="linear red_to_green-native">native</div> 201 <div class="linear red_to_green-esbuild">esbuild</div> 202 <section> 203 <div class="radial red_to_green-native">native</div> 204 <div class="radial red_to_green-esbuild">esbuild</div> 205 <div class="conic red_to_green-native">native</div> 206 <div class="conic red_to_green-esbuild">esbuild</div> 207 </section> 208 209 <h2>2. Rainbow using shorter hue</h2> 210 <pre>gradient( 211 in hwb shorter hue, 212 hsl(180deg 100% 75%) 10%, 213 hsl(240deg 100% 75%) 90%)</pre> 214 <div class="linear rainbow_shorter-native">native</div> 215 <div class="linear rainbow_shorter-esbuild">esbuild</div> 216 <section> 217 <div class="radial rainbow_shorter-native">native</div> 218 <div class="radial rainbow_shorter-esbuild">esbuild</div> 219 <div class="conic rainbow_shorter-native">native</div> 220 <div class="conic rainbow_shorter-esbuild">esbuild</div> 221 </section> 222 223 <h2>3. Rainbow using longer hue</h2> 224 <pre>gradient( 225 in hsl longer hue, 226 hsl(180deg 100% 75%) 10%, 227 hsl(240deg 100% 75%) 90%)</pre> 228 <div class="linear rainbow_longer-native">native</div> 229 <div class="linear rainbow_longer-esbuild">esbuild</div> 230 <section> 231 <div class="radial rainbow_longer-native">native</div> 232 <div class="radial rainbow_longer-esbuild">esbuild</div> 233 <div class="conic rainbow_longer-native">native</div> 234 <div class="conic rainbow_longer-esbuild">esbuild</div> 235 </section> 236 237 <h2>4. Rainbow using increasing hue</h2> 238 <pre>gradient( 239 in lch increasing hue, 240 hsl(240deg 100% 75%) 10%, 241 hsl(180deg 100% 75%) 90%)</pre> 242 <div class="linear rainbow_increasing-native">native</div> 243 <div class="linear rainbow_increasing-esbuild">esbuild</div> 244 <section> 245 <div class="radial rainbow_increasing-native">native</div> 246 <div class="radial rainbow_increasing-esbuild">esbuild</div> 247 <div class="conic rainbow_increasing-native">native</div> 248 <div class="conic rainbow_increasing-esbuild">esbuild</div> 249 </section> 250 251 <h2>5. Rainbow using decreasing hue</h2> 252 <pre>gradient( 253 in oklch decreasing hue, 254 hsl(180deg 100% 75%) 10%, 255 hsl(240deg 100% 75%) 90%)</pre> 256 <div class="linear rainbow_decreasing-native">native</div> 257 <div class="linear rainbow_decreasing-esbuild">esbuild</div> 258 <section> 259 <div class="radial rainbow_decreasing-native">native</div> 260 <div class="radial rainbow_decreasing-esbuild">esbuild</div> 261 <div class="conic rainbow_decreasing-native">native</div> 262 <div class="conic rainbow_decreasing-esbuild">esbuild</div> 263 </section> 264 265 <h2>6. Transition hint / midpoint</h2> 266 <pre>gradient(#f00, #ff0, 75%, #0ff, #00f)</pre> 267 <div class="linear midpoint_hint-native">native</div> 268 <div class="linear midpoint_hint-esbuild">esbuild</div> 269 <section> 270 <div class="radial midpoint_hint-native">native</div> 271 <div class="radial midpoint_hint-esbuild">esbuild</div> 272 <div class="conic midpoint_hint-native">native</div> 273 <div class="conic midpoint_hint-esbuild">esbuild</div> 274 </section> 275 276 <h2>7. Premultiplied alpha</h2> 277 <pre>gradient(#f00f, 10%, #00f1, 90%, #0f0f)</pre> 278 <div class="checkerboard linear premultiplied_alpha-native">native</div> 279 <div class="checkerboard linear premultiplied_alpha-esbuild">esbuild</div> 280 <section> 281 <div class="checkerboard radial premultiplied_alpha-native">native</div> 282 <div class="checkerboard radial premultiplied_alpha-esbuild">esbuild</div> 283 <div class="checkerboard conic premultiplied_alpha-native">native</div> 284 <div class="checkerboard conic premultiplied_alpha-esbuild">esbuild</div> 285 </section> 286 287 <h2>8. Mixed units</h2> 288 <pre>gradient( 289 color(display-p3 0.4 0 1) 30px, 290 color(display-p3 1 0.75 0.4) 60%)</pre> 291 <div class="linear mixed_units-native">native</div> 292 <div class="linear mixed_units-esbuild">esbuild</div> 293 <section> 294 <div class="radial mixed_units-native">native</div> 295 <div class="radial mixed_units-esbuild">esbuild</div> 296 <div class="conic mixed_units-native">native</div> 297 <div class="conic mixed_units-esbuild">esbuild</div> 298 </section> 299 </body> 300 301 </html>