1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
  
     | 
    
      <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Test:  font-variant descriptor in @font-face rule is overriden by equivalent style rules</title>
<link rel="author" title="Mike Bremford" href="mike@bfo.com" />
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-prop" />
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-rend-desc" />
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop" />
<link rel="match" href="font-variant-05-ref.xht" />
<meta name="assert" content="Setting ‘font-variant-ligatures’ properties will override the same properties set in the @font-face rule. But properties set there and not explicitly turned off or on later remain set." />
<style>
  @font-face {
    font-family: fwf;
    src: url(support/fonts/FontWithFancyFeatures.otf);
    font-variant: no-common-ligatures no-contextual discretionary-ligatures historical-ligatures;
  }
  .test {
    font-family: fwf;
    font-size: 2.4em;
    line-height: 0.5;
    color: purple;
  }
  .line1 { }
  .line2 { font-variant-ligatures: normal; }
  .line3 { font-variant-ligatures: common-ligatures contextual; }
  .line4 { font-variant-ligatures: common-ligatures contextual discretionary-ligatures historical-ligatures; }
  .line5 { font-feature-settings: "liga" on, "clig" on, "calt" on, "hlig" on, "dlig" on }
  /**
   * Some notes on this test case, which aims to explore the
   * font-variant precedence rules and the exact value of
   * "normal" for font-variant-ligatures.
   *
   * line1:
   *   font-variant is completely set in the @font-face rule.
   *
   * line2:
   *   font-variant-ligatures: normal will reset "common-ligatures"
   *   and "contextual" both to true. Discretionary and historical
   *   ligatures are off by default, but they are not explicitly
   *   disabled with a value of "normal". As stated in section 7.1,
   *   "Individual features are only disabled when explicitly
   *   overridden by the author". These features were turned on in
   *   the @font-face rule, so remain on.
   *
   * line3:
   *   identical to line2 except that instead of "normal" for
   *   font-variant-ligatures we use the expanded equivalent,
   *   explicitly turning on common-ligatures and contextual, and
   *   leaving discretionary and historical unchanged.
   *
   * line4:
   *   we explicitly reset all values of font-variant-ligatures
   *   properties to the same values as are set in the @font-face
   *   rule.
   */
</style>
</head>
<body>
<p>Test passes if the six lines below are identical, with five check marks.</p>
<section class="test">
  <p class="line1">AAAFE</p>
  <p class="line2">CDGFE</p>
  <p class="line3">CDGFE</p>
  <p class="line4">CDGFE</p>
  <p class="line5">CDGFE</p>
  <p>AAAAA</p>
</section>
</body>
</html> 
     |