esbuild/scripts/gradient-tests.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf8">
  <link rel="stylesheet" href="out.css">
  <style>
    body {
      margin: 30px;
      font: 16px/20px sans-serif;
      color: black;
      background: white;
    }

    @media (prefers-color-scheme: dark) {
      body {
        color: white;
        background: black;
      }
    }

    a {
      color: inherit;
    }

    p {
      margin: 20px 0;
    }

    pre {
      margin: 20px 0 10px 0;
      font: 14px/20px Monaco, monospace;
      white-space: pre-wrap;
    }

    h2 {
      margin: 50px 0 0 0;
    }

    .linear {
      max-width: 400px;
      height: 20px;
      text-indent: 4px;
      font-size: 14px;
      color: white;
      text-shadow: 0 0 3px black;
      background: repeating-linear-gradient(-45deg,
          rgba(191, 191, 191, 0.4) 0 7px,
          transparent 7px 14px);
    }

    section {
      margin-top: 12px;
      display: flex;
    }

    .radial+.radial {
      margin-right: 12px;
    }

    .radial,
    .conic {
      width: 97px;
      height: 97px;
      text-align: center;
      line-height: 97px;
      font-size: 14px;
      color: white;
      text-shadow: 0 0 3px black;
      background: repeating-linear-gradient(-45deg,
          transparent 0 6.86px,
          rgba(191, 191, 191, 0.4) 6.86px 13.72px);
    }

    .checkerboard {
      position: relative;
    }

    .checkerboard:after {
      content: ' ';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      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>');
    }

    .linear.red_to_green-native {
      background: linear-gradient(to right, color(display-p3 1 0 0), color(display-p3 0 0.6 0));
    }

    .radial.red_to_green-native {
      background: radial-gradient(color(display-p3 1 0 0), color(display-p3 0 0.6 0));
    }

    .conic.red_to_green-native {
      background: conic-gradient(color(display-p3 1 0 0), color(display-p3 0 0.6 0));
    }

    .linear.rainbow_shorter-native {
      background: linear-gradient(to right in hwb shorter hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
    }

    .radial.rainbow_shorter-native {
      background: radial-gradient(in hwb shorter hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
    }

    .conic.rainbow_shorter-native {
      background: conic-gradient(in hwb shorter hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
    }

    .linear.rainbow_longer-native {
      background: linear-gradient(to right in hsl longer hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
    }

    .radial.rainbow_longer-native {
      background: radial-gradient(in hsl longer hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
    }

    .conic.rainbow_longer-native {
      background: conic-gradient(in hsl longer hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
    }

    .linear.rainbow_increasing-native {
      background: linear-gradient(to right in lch increasing hue, hsl(240deg 100% 75%) 10%, hsl(180deg 100% 75%) 90%);
    }

    .radial.rainbow_increasing-native {
      background: radial-gradient(in lch increasing hue, hsl(240deg 100% 75%) 10%, hsl(180deg 100% 75%) 90%);
    }

    .conic.rainbow_increasing-native {
      background: conic-gradient(in lch increasing hue, hsl(240deg 100% 75%) 10%, hsl(180deg 100% 75%) 90%);
    }

    .linear.rainbow_decreasing-native {
      background: linear-gradient(to right in oklch decreasing hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
    }

    .radial.rainbow_decreasing-native {
      background: radial-gradient(in oklch decreasing hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
    }

    .conic.rainbow_decreasing-native {
      background: conic-gradient(in oklch decreasing hue, hsl(180deg 100% 75%) 10%, hsl(240deg 100% 75%) 90%);
    }

    .linear.midpoint_hint-native {
      background: linear-gradient(to right, #f00, #ff0, 75%, #0ff, #00f);
    }

    .radial.midpoint_hint-native {
      background: radial-gradient(#f00, #ff0, 75%, #0ff, #00f);
    }

    .conic.midpoint_hint-native {
      background: conic-gradient(#f00, #ff0, 75%, #0ff, #00f);
    }

    .linear.premultiplied_alpha-native {
      background: linear-gradient(to right, #f00f, 10%, #00f1, 90%, #0f0f);
    }

    .radial.premultiplied_alpha-native {
      background: radial-gradient(#f00f, 10%, #00f1, 90%, #0f0f);
    }

    .conic.premultiplied_alpha-native {
      background: conic-gradient(#f00f, 10%, #00f1, 90%, #0f0f);
    }

    .linear.mixed_units-native {
      background: linear-gradient(to right, color(display-p3 0.4 0 1) 30px, color(display-p3 1 0.75 0.4) 60%);
    }

    .radial.mixed_units-native {
      background: radial-gradient(color(display-p3 0.4 0 1) 30px, color(display-p3 1 0.75 0.4) 60%);
    }

    .conic.mixed_units-native {
      background: conic-gradient(color(display-p3 0.4 0 1) 30deg, color(display-p3 1 0.75 0.4) 60%);
    }

  </style>
</head>

<body>
  <p>This page is a visual test of esbuild's CSS gradient transformation. Run it like this:</p>
  <pre>./esbuild --servedir=scripts --outfile=scripts/out.css scripts/gradient-tests.css --target=firefox30</pre>
  <p>Then open this page as <a
      href="http://localhost:8000/gradient-tests.html">http://localhost:8000/gradient-tests.html</a>.</p>

  <h2>1. Red to green in P3</h2>
  <pre>gradient(
  color(display-p3 1 0 0),
  color(display-p3 0 0.6 0))</pre>
  <div class="linear red_to_green-native">native</div>
  <div class="linear red_to_green-esbuild">esbuild</div>
  <section>
    <div class="radial red_to_green-native">native</div>
    <div class="radial red_to_green-esbuild">esbuild</div>
    <div class="conic red_to_green-native">native</div>
    <div class="conic red_to_green-esbuild">esbuild</div>
  </section>

  <h2>2. Rainbow using shorter hue</h2>
  <pre>gradient(
  in hwb shorter hue,
  hsl(180deg 100% 75%) 10%,
  hsl(240deg 100% 75%) 90%)</pre>
  <div class="linear rainbow_shorter-native">native</div>
  <div class="linear rainbow_shorter-esbuild">esbuild</div>
  <section>
    <div class="radial rainbow_shorter-native">native</div>
    <div class="radial rainbow_shorter-esbuild">esbuild</div>
    <div class="conic rainbow_shorter-native">native</div>
    <div class="conic rainbow_shorter-esbuild">esbuild</div>
  </section>

  <h2>3. Rainbow using longer hue</h2>
  <pre>gradient(
  in hsl longer hue,
  hsl(180deg 100% 75%) 10%,
  hsl(240deg 100% 75%) 90%)</pre>
  <div class="linear rainbow_longer-native">native</div>
  <div class="linear rainbow_longer-esbuild">esbuild</div>
  <section>
    <div class="radial rainbow_longer-native">native</div>
    <div class="radial rainbow_longer-esbuild">esbuild</div>
    <div class="conic rainbow_longer-native">native</div>
    <div class="conic rainbow_longer-esbuild">esbuild</div>
  </section>

  <h2>4. Rainbow using increasing hue</h2>
  <pre>gradient(
  in lch increasing hue,
  hsl(240deg 100% 75%) 10%,
  hsl(180deg 100% 75%) 90%)</pre>
  <div class="linear rainbow_increasing-native">native</div>
  <div class="linear rainbow_increasing-esbuild">esbuild</div>
  <section>
    <div class="radial rainbow_increasing-native">native</div>
    <div class="radial rainbow_increasing-esbuild">esbuild</div>
    <div class="conic rainbow_increasing-native">native</div>
    <div class="conic rainbow_increasing-esbuild">esbuild</div>
  </section>

  <h2>5. Rainbow using decreasing hue</h2>
  <pre>gradient(
  in oklch decreasing hue,
  hsl(180deg 100% 75%) 10%,
  hsl(240deg 100% 75%) 90%)</pre>
  <div class="linear rainbow_decreasing-native">native</div>
  <div class="linear rainbow_decreasing-esbuild">esbuild</div>
  <section>
    <div class="radial rainbow_decreasing-native">native</div>
    <div class="radial rainbow_decreasing-esbuild">esbuild</div>
    <div class="conic rainbow_decreasing-native">native</div>
    <div class="conic rainbow_decreasing-esbuild">esbuild</div>
  </section>

  <h2>6. Transition hint / midpoint</h2>
  <pre>gradient(#f00, #ff0, 75%, #0ff, #00f)</pre>
  <div class="linear midpoint_hint-native">native</div>
  <div class="linear midpoint_hint-esbuild">esbuild</div>
  <section>
    <div class="radial midpoint_hint-native">native</div>
    <div class="radial midpoint_hint-esbuild">esbuild</div>
    <div class="conic midpoint_hint-native">native</div>
    <div class="conic midpoint_hint-esbuild">esbuild</div>
  </section>

  <h2>7. Premultiplied alpha</h2>
  <pre>gradient(#f00f, 10%, #00f1, 90%, #0f0f)</pre>
  <div class="checkerboard linear premultiplied_alpha-native">native</div>
  <div class="checkerboard linear premultiplied_alpha-esbuild">esbuild</div>
  <section>
    <div class="checkerboard radial premultiplied_alpha-native">native</div>
    <div class="checkerboard radial premultiplied_alpha-esbuild">esbuild</div>
    <div class="checkerboard conic premultiplied_alpha-native">native</div>
    <div class="checkerboard conic premultiplied_alpha-esbuild">esbuild</div>
  </section>

  <h2>8. Mixed units</h2>
  <pre>gradient(
  color(display-p3 0.4 0 1) 30px,
  color(display-p3 1 0.75 0.4) 60%)</pre>
  <div class="linear mixed_units-native">native</div>
  <div class="linear mixed_units-esbuild">esbuild</div>
  <section>
    <div class="radial mixed_units-native">native</div>
    <div class="radial mixed_units-esbuild">esbuild</div>
    <div class="conic mixed_units-native">native</div>
    <div class="conic mixed_units-esbuild">esbuild</div>
  </section>
</body>

</html>