tor-browser

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

font-variant-alternates-layers.html (2002B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      4 <title>CSS Test:  font-variant-alternates: multiple @font-feature-values rules</title>
      5 <link rel="author" title="Dominik Röttsches" href="drott@chromium.org">
      6 <link rel="match" href="font-variant-alternates-layers-ref.html">
      7 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
      8 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
      9 <link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
     10 <meta name="assert" content="Aliases @font-feature-values are joined correctly across cascade layers.">
     11 <style>
     12  @font-face {
     13    font-family: fwf;
     14    src: url(support/fonts/FontWithFancyFeatures.otf);
     15  }
     16 
     17  @layer one, two, three;
     18 
     19  @layer three {
     20    #test {
     21      background-color: orange;
     22    }
     23    @font-feature-values fwf {
     24      @styleset {
     25        foo: 1;
     26        bar: 1;
     27      }
     28    }
     29  }
     30 
     31  @layer one {
     32    #test {
     33      background-color: silver;
     34    }
     35    @font-feature-values fwf {
     36      @styleset {
     37        foo: 2;
     38        bar: 2;
     39        baz: 2;
     40      }
     41    }
     42  }
     43 
     44  @layer two {
     45    #test {
     46      background-color: lightblue;
     47    }
     48    @font-feature-values fwf {
     49      @styleset {
     50          baz: 3;
     51      }
     52    }
     53  }
     54 
     55  .test {
     56   font-family: fwf;
     57   font-size: 2em;
     58   line-height: 1.1;
     59  }
     60 
     61  .high {
     62  font-variant-alternates: styleset(foo,bar,baz);
     63  }
     64  .low {
     65   font-feature-settings: "hist" off, "salt" 00, "ss01" on, "ss02" off, "ss03" on,
     66    "cv01" off, "cv02" off, "cv03" off,  "swsh" 00, "cswh" 00, "ornm" 00, "nalt" 00;
     67  }
     68 </style>
     69 <body>
     70 
     71 <p>Test passes if the three lines below are identical, with 4 crosses (✗), then
     72 one check mark (✓), then one cross (✗), then one check mark (✓), then 13 crosses
     73 (✗).</p>
     74 <section class="test">
     75  <p class="high">Xnophijklmqrstuvwxyz</p>
     76  <p class="low">Xnophijklmqrstuvwxyz</p>
     77  <p class="ref">BBBBABABBBBBBBBBBBBB</p>
     78 </section>