font-variant-alternates-19.html (1848B)
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-19-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="If multiple @font-feature-values rules are defined for a given family, the 11 resulting values definitions are the union of the definitions contained within these rules."> 12 <style> 13 @font-face { 14 font-family: fwf; 15 src: url(support/fonts/FontWithFancyFeatures.otf); 16 } 17 @font-feature-values fwf { 18 @styleset { 19 foo: 4; 20 bar: 2; 21 } 22 } 23 @font-feature-values fwf { 24 @styleset { 25 baz: 3; 26 } 27 } 28 @font-feature-values fwf { 29 @styleset { 30 foo: 1; /* Overrides foo from first rule. */ 31 } 32 @ornaments { 33 baz: 3; 34 } 35 } 36 .test { 37 font-family: fwf; 38 font-size: 2em; 39 line-height: 1.1; 40 } 41 .high { 42 font-variant-alternates: styleset(foo,bar,baz) ornaments(baz); 43 } 44 .low { 45 font-feature-settings: "hist" off, "salt" 00, "ss01" on, "ss02" on, "ss03" on, 46 "cv01" off, "cv02" off, "cv03" off, "swsh" 00, "cswh" 00, "ornm" 03, "nalt" 00; 47 } 48 </style> 49 <body> 50 51 <p>Test passes if the three lines below are identical, with 4 crosses (✗), then 52 three check marks (✓), then 11 crosses (✗), then 1 checkmark (✓).</p> 53 <section class="test"> 54 <p class="high">Xnophijklmqrstuvwxyz</p> 55 <p class="low">Xnophijklmqrstuvwxyz</p> 56 <p class="ref">BBBBAAABBBBBBBBBBBAB</p> 57 </section>