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>