tor-browser

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

2d.text.measure.fillTextCluster-drawing-styles-change.tentative.w.html (6217B)

      1 <!DOCTYPE html>
      2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
      3 <meta charset="UTF-8">
      4 <html class="reftest-wait">
      5 <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
      6 <link rel="match" href="2d.text.measure.fillTextCluster-drawing-styles-change.tentative-expected.html">
      7 <title>Canvas test: 2d.text.measure.fillTextCluster-drawing-styles-change.tentative</title>
      8 <h1>2d.text.measure.fillTextCluster-drawing-styles-change.tentative</h1>
      9 <p class="desc">Test that fillTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.</p>
     10 <script>pending_tests = 4;</script>
     11 
     12 <div class="grid-container" style="--grid-width: 2">
     13 <span>
     14  <div>letter_spacing</div>
     15  <canvas class="grid-cell-content" id="canvas0" width="250" height="80">
     16    <p class="fallback">FAIL (fallback content)</p>
     17  </canvas>
     18  <script id="myWorker0" type="text/worker">
     19    self.onmessage = function(e) {
     20      const canvas = new OffscreenCanvas(250, 80);
     21      const ctx = canvas.getContext('2d');
     22 
     23      ctx.font = '20px serif';
     24      const text = 'Test ♦️ find';
     25 
     26      ctx.letterSpacing = '2px';
     27 
     28      let tm = ctx.measureText(text);
     29      const clusters = tm.getTextClusters();
     30 
     31      ctx.letterSpacing = '6px';
     32 
     33      for (const cluster of clusters) {
     34          ctx.fillTextCluster(cluster, 10, 25);
     35      }
     36 
     37      ctx.fillText(text, 10, 50);
     38 
     39      const bitmap = canvas.transferToImageBitmap();
     40      self.postMessage(bitmap, bitmap);
     41    };
     42  </script>
     43  <script type="module">
     44    const blob = new Blob([document.getElementById('myWorker0').textContent]);
     45    const worker = new Worker(URL.createObjectURL(blob));
     46    worker.addEventListener('message', msg => {
     47      const outputCanvas = document.getElementById('canvas0');
     48      const outputCtx = outputCanvas.getContext('2d');
     49      outputCtx.drawImage(msg.data, 0, 0);
     50      if (--pending_tests == 0) {
     51        document.documentElement.classList.remove('reftest-wait');
     52      }
     53    });
     54    worker.postMessage(null);
     55  </script>
     56 </span>
     57 
     58 <span>
     59  <div>word_spacing</div>
     60  <canvas class="grid-cell-content" id="canvas1" width="250" height="80">
     61    <p class="fallback">FAIL (fallback content)</p>
     62  </canvas>
     63  <script id="myWorker1" type="text/worker">
     64    self.onmessage = function(e) {
     65      const canvas = new OffscreenCanvas(250, 80);
     66      const ctx = canvas.getContext('2d');
     67 
     68      ctx.font = '20px serif';
     69      const text = 'Test ♦️ find';
     70 
     71      ctx.wordSpacing = '2px';
     72 
     73      let tm = ctx.measureText(text);
     74      const clusters = tm.getTextClusters();
     75 
     76      ctx.wordSpacing = '10px';
     77 
     78      for (const cluster of clusters) {
     79          ctx.fillTextCluster(cluster, 10, 25);
     80      }
     81 
     82      ctx.fillText(text, 10, 50);
     83 
     84      const bitmap = canvas.transferToImageBitmap();
     85      self.postMessage(bitmap, bitmap);
     86    };
     87  </script>
     88  <script type="module">
     89    const blob = new Blob([document.getElementById('myWorker1').textContent]);
     90    const worker = new Worker(URL.createObjectURL(blob));
     91    worker.addEventListener('message', msg => {
     92      const outputCanvas = document.getElementById('canvas1');
     93      const outputCtx = outputCanvas.getContext('2d');
     94      outputCtx.drawImage(msg.data, 0, 0);
     95      if (--pending_tests == 0) {
     96        document.documentElement.classList.remove('reftest-wait');
     97      }
     98    });
     99    worker.postMessage(null);
    100  </script>
    101 </span>
    102 
    103 <span>
    104  <div>font_kerning</div>
    105  <canvas class="grid-cell-content" id="canvas2" width="250" height="80">
    106    <p class="fallback">FAIL (fallback content)</p>
    107  </canvas>
    108  <script id="myWorker2" type="text/worker">
    109    self.onmessage = function(e) {
    110      const canvas = new OffscreenCanvas(250, 80);
    111      const ctx = canvas.getContext('2d');
    112 
    113      ctx.font = '20px serif';
    114      const text = 'Test ♦️ find';
    115 
    116      ctx.fontKerning = 'none';
    117 
    118      let tm = ctx.measureText(text);
    119      const clusters = tm.getTextClusters();
    120 
    121      ctx.fontKerning = 'normal';
    122 
    123      for (const cluster of clusters) {
    124          ctx.fillTextCluster(cluster, 10, 25);
    125      }
    126 
    127      ctx.fillText(text, 10, 50);
    128 
    129      const bitmap = canvas.transferToImageBitmap();
    130      self.postMessage(bitmap, bitmap);
    131    };
    132  </script>
    133  <script type="module">
    134    const blob = new Blob([document.getElementById('myWorker2').textContent]);
    135    const worker = new Worker(URL.createObjectURL(blob));
    136    worker.addEventListener('message', msg => {
    137      const outputCanvas = document.getElementById('canvas2');
    138      const outputCtx = outputCanvas.getContext('2d');
    139      outputCtx.drawImage(msg.data, 0, 0);
    140      if (--pending_tests == 0) {
    141        document.documentElement.classList.remove('reftest-wait');
    142      }
    143    });
    144    worker.postMessage(null);
    145  </script>
    146 </span>
    147 
    148 <span>
    149  <div>font_variant_caps</div>
    150  <canvas class="grid-cell-content" id="canvas3" width="250" height="80">
    151    <p class="fallback">FAIL (fallback content)</p>
    152  </canvas>
    153  <script id="myWorker3" type="text/worker">
    154    self.onmessage = function(e) {
    155      const canvas = new OffscreenCanvas(250, 80);
    156      const ctx = canvas.getContext('2d');
    157 
    158      ctx.font = '20px serif';
    159      const text = 'Test ♦️ find';
    160 
    161      ctx.fontVariantCaps = 'small-caps';
    162 
    163      let tm = ctx.measureText(text);
    164      const clusters = tm.getTextClusters();
    165 
    166      ctx.fontVariantCaps = 'all-small-caps';
    167 
    168      for (const cluster of clusters) {
    169          ctx.fillTextCluster(cluster, 10, 25);
    170      }
    171 
    172      ctx.fillText(text, 10, 50);
    173 
    174      const bitmap = canvas.transferToImageBitmap();
    175      self.postMessage(bitmap, bitmap);
    176    };
    177  </script>
    178  <script type="module">
    179    const blob = new Blob([document.getElementById('myWorker3').textContent]);
    180    const worker = new Worker(URL.createObjectURL(blob));
    181    worker.addEventListener('message', msg => {
    182      const outputCanvas = document.getElementById('canvas3');
    183      const outputCtx = outputCanvas.getContext('2d');
    184      outputCtx.drawImage(msg.data, 0, 0);
    185      if (--pending_tests == 0) {
    186        document.documentElement.classList.remove('reftest-wait');
    187      }
    188    });
    189    worker.postMessage(null);
    190  </script>
    191 </span>
    192 
    193 </div>
    194 </html>