tor-browser

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

conic-gradient-001.html (2137B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com">
      4 <link rel="author" title="一丝" href="mailto:yiorsi@gmail.com">
      5 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
      6 <link rel="match" href="conic-gradient-001-ref.html">
      7 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-40000">
      8 <title>Tests the maximum value of color stops in conic-gradient().</title>
      9 <style>
     10    body {
     11        background-color: lightblue;
     12    }
     13 
     14    .test {
     15        display: flex;
     16        flex-wrap: wrap;
     17    }
     18 
     19    li {
     20        width: 100px;
     21        height: 100px;
     22        margin-right: 30px;
     23        margin-bottom: 30px;
     24        outline: 1px solid black;
     25        font-size: 14px;
     26        text-align: center;
     27        background: red;
     28    }
     29 
     30    li:nth-child(1) {
     31        background: conic-gradient(lime 0 999999999%);
     32    }
     33 
     34    li:nth-child(2) {
     35        background: conic-gradient(in hsl, lime 0 calc(Infinity * 0%));
     36    }
     37 
     38    li:nth-child(3) {
     39        background: conic-gradient(in lch, lime 0 calc(Infinity * 1%));
     40    }
     41 
     42    li:nth-child(4) {
     43        background: conic-gradient(in oklab, lime calc(Infinity * 0%) 100%);
     44    }
     45 
     46    li:nth-child(5) {
     47        background: conic-gradient(in srgb, lime calc(Infinity * 1%) 100%);
     48    }
     49 
     50    li:nth-child(6) {
     51        background: conic-gradient(in srgb, lime calc(Infinity * -1%) 100%);
     52    }
     53 
     54    li:nth-child(7) {
     55        background: conic-gradient(in srgb, lime 0 calc(Infinity * 1%));
     56    }
     57 
     58    li:nth-child(8) {
     59        background: conic-gradient(from calc(Infinity * 1deg), lime 0 100%);
     60    }
     61 
     62    li:nth-child(9) {
     63        background: conic-gradient(from calc(Infinity * 0deg), lime 0 100%);
     64    }
     65 </style>
     66 
     67 <p>Should be lime in the background of all boxes.</p>
     68 <ol class="test">
     69    <li>0 999999999%</li>
     70    <li>0 calc(Infinity * 0%)</li>
     71    <li>0 calc(Infinity * 1%)</li>
     72    <li>calc(Infinity * 0%) 100%</li>
     73    <li>calc(Infinity * 1%) 100%</li>
     74    <li>calc(Infinity * -1%) 100%</li>
     75    <li>0% calc(Infinity * 1%)</li>
     76    <li>from calc(Infinity * 1deg)</li>
     77    <li>from calc(Infinity * 0deg)</li>
     78 </ol>