tor-browser

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

mix-blend-mode-plus-lighter-svg.html (1080B)

      1 <!DOCTYPE html>
      2 <title>mix-blend-mode: plus-lighter SVG test</title>
      3 <link rel="author" title="Jake Archibald" href="mailto:jakearchibald@chromium.org">
      4 <link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode">
      5 <link rel="match" href="reference/mix-blend-mode-plus-lighter-svg-ref.html">
      6 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-4294967295">
      7 <style>
      8  .blend-group {
      9    isolation: isolate;
     10  }
     11  .layer {
     12    mix-blend-mode: plus-lighter;
     13  }
     14 </style>
     15 <script type="module">
     16  import { tests } from '../support/plus-lighter.js';
     17  import { toCSSColor } from '../support/utils.js';
     18 
     19  function createRects(colors) {
     20    let html = '';
     21 
     22    for (const color of colors) {
     23      html += `<rect class="layer" x="0" y="0" width="100%" height="100%" fill="${toCSSColor(color)}" />`;
     24    }
     25 
     26    return html;
     27  }
     28 
     29  for (const colors of tests) {
     30    document.body.insertAdjacentHTML('beforeend', `
     31      <svg width="100" height="100">
     32        <g class="blend-group">
     33          ${createRects(colors)}
     34        </g>
     35      </svg>
     36    `);
     37  }
     38 </script>