tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

gradient-increasing-hue-lch.html (1766B)

      1 <!doctype html>
      2 <html lang="en">
      3 
      4 <head>
      5    <meta charset="utf-8">
      6    <title>Gradient in LCH space</title>
      7    <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
      8    <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
      9    <meta name="assert" content="Tests that 'increasing' hue renders the expected gradient">
     10    <meta name="fuzzy" content="maxDifference=0-18;totalPixels=0-24900">
     11    <link rel="match" href="gradient-increasing-hue-lch-ref.html">
     12    <style>
     13        body {
     14            background: #fff;
     15        }
     16 
     17        div {
     18            width: 200px;
     19            height: 100px;
     20            margin: 10px;
     21        }
     22 
     23        div.a {
     24            background-image: linear-gradient(to right in lch increasing hue,
     25                                              lch(50% 100% 0deg),
     26                                              lch(50% 100% 80deg));
     27        }
     28 
     29        div.b {
     30            background-image: linear-gradient(to right in lch increasing hue,
     31                                              lch(50% 100% 80deg),
     32                                              lch(50% 100% 0deg));
     33        }
     34 
     35        div.c {
     36            background-image: linear-gradient(to right in lch increasing hue,
     37                                              lch(50% 100% 0deg),
     38                                              lch(50% 100% 270deg));
     39        }
     40 
     41        div.d {
     42            background-image: linear-gradient(to right in lch increasing hue,
     43                                              lch(50% 100% 270deg),
     44                                              lch(50% 100% 0deg));
     45        }
     46    </style>
     47 </head>
     48 
     49 <body>
     50    <div class=a></div>
     51    <div class=b></div>
     52    <div class=c></div>
     53    <div class=d></div>
     54 </body>
     55 </html>