tor-browser

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

layer-font-face-override.html (3205B)

      1 <!DOCTYPE html>
      2 <title>Resolving @keyframe name conflicts with cascade layers</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering">
      4 <link rel="author" href="mailto:xiaochengh@chromium.org">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <style>
      8 #target {
      9  font-size: 20px;
     10  width: min-content;
     11 }
     12 </style>
     13 
     14 <div id="target">Test</div>
     15 
     16 <script>
     17 // In all tests, width of #target should be 80px.
     18 
     19 const testCases = [
     20  {
     21    title: '@font-face unlayered overrides layered',
     22    style: `
     23      #target {
     24        font-family: custom-font;
     25      }
     26 
     27      @font-face {
     28        font-family: custom-font;
     29        src: url('/fonts/Ahem.ttf');
     30      }
     31 
     32      @layer {
     33        @font-face {
     34          font-family: custom-font;
     35          src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
     36        }
     37      }
     38    `
     39  },
     40 
     41  {
     42    title: '@font-face override between layers',
     43    style: `
     44      @layer base, override;
     45 
     46      #target {
     47        font-family: custom-font;
     48      }
     49 
     50      @layer override {
     51        @font-face {
     52          font-family: custom-font;
     53          src: url('/fonts/Ahem.ttf');
     54        }
     55      }
     56 
     57      @layer base {
     58        @font-face {
     59          font-family: custom-font;
     60          src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
     61        }
     62      }
     63    `
     64  },
     65 
     66  {
     67    title: '@font-face override update with appended sheet 1',
     68    style: `
     69      @layer base, override;
     70 
     71      #target {
     72        font-family: custom-font;
     73      }
     74 
     75      @layer override {
     76        @font-face {
     77          font-family: custom-font;
     78          src: url('/fonts/Ahem.ttf');
     79        }
     80      }
     81    `,
     82    append: `
     83      @layer base {
     84        @font-face {
     85          font-family: custom-font;
     86          src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
     87        }
     88      }
     89    `
     90  },
     91 
     92  {
     93    title: '@font-face override update with appended sheet 2',
     94    style: `
     95      @layer base, override;
     96 
     97      #target {
     98        font-family: custom-font;
     99      }
    100 
    101      @layer base {
    102        @font-face {
    103          font-family: custom-font;
    104          src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
    105        }
    106      }
    107    `,
    108    append: `
    109      @layer override {
    110        @font-face {
    111          font-family: custom-font;
    112          src: url('/fonts/Ahem.ttf');
    113        }
    114      }
    115    `
    116  },
    117 ];
    118 
    119 for (let testCase of testCases) {
    120  promise_test(async () => {
    121    var documentStyle = document.createElement('style');
    122    documentStyle.appendChild(document.createTextNode(testCase['style']));
    123    document.head.appendChild(documentStyle);
    124 
    125    var appendedStyle;
    126    if (testCase['append']) {
    127      document.body.offsetLeft;  // Force style update
    128      appendedStyle = document.createElement('style');
    129      appendedStyle.appendChild(document.createTextNode(testCase['append']));
    130      document.head.appendChild(appendedStyle);
    131    }
    132 
    133    await document.fonts.load('20px/1 custom-font');
    134    assert_equals(getComputedStyle(target).width, '80px');
    135 
    136    if (appendedStyle)
    137      appendedStyle.remove();
    138    documentStyle.remove();
    139  }, testCase['title']);
    140 }
    141 </script>