tor-browser

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

gradient-longer-hue-lch-003.html (1105B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <meta charset="utf-8">
      4 <title>Gradient using "longer hue"</title>
      5 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
      6 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
      7 <link rel="match" href="gradient-longer-hue-lch-003-ref.html">
      8 <meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
      9 <meta name="fuzzy" content="maxDifference=0-19;totalPixels=0-2120">
     10 
     11 <style>
     12 div {
     13  margin: 20px 0px 20px 50px;
     14  height: 40px;
     15  width: 100px;
     16  position: relative;
     17  background: linear-gradient(to right in lch longer hue,
     18                              red var(--from),
     19                              blue var(--to));
     20 }
     21 
     22 .swatch {
     23  --from: 20px;
     24  --to: 80px;
     25 }
     26 
     27 .swatch::before {
     28  content: '\feff';
     29  position: absolute;
     30  bottom: 40px;
     31  height: 10px;
     32  left: calc(var(--from) - 0.5px);
     33  border: 0.5px solid red;
     34 }
     35 
     36 .swatch::after {
     37  content: '\feff';
     38  position: absolute;
     39  top: 40px;
     40  height: 10px;
     41  left: calc(var(--to) - 0.5px);
     42  border: 0.5px solid blue;
     43 }
     44 </style>
     45 
     46 <div class="swatch"></div>