text-decoration-thickness-from-font-variable.html (1344B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Text Decoration Test: text-decoration-thickness respects variable font properties</title> 6 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property"> 7 <meta name="assert" content="text-decoration-thickness from-font respects MVAR table of variable fonts for variable metrics"> 8 <link rel="author" title="Dominik Röttsches" href="mailto:drott@chromium.org"> 9 <link rel="match" href="reference/text-decoration-thickness-from-font-variable-ref.html"> 10 <style> 11 @font-face { 12 font-family: underline-variable; 13 src: url(resources/UnderlineTest-VF.ttf); 14 } 15 16 .test { 17 text-underline-position: from-font; 18 font-size: 64px; 19 line-height: 1.8; 20 } 21 22 .thin_underline { 23 text-decoration: underline; 24 text-decoration-thickness: from-font; 25 font-family: underline-variable, sans-serif; 26 font-variation-settings: 'UNDS' 1; 27 } 28 29 .thick_underline { 30 text-decoration: underline; 31 text-decoration-thickness: from-font; 32 font-family: underline-variable, sans-serif; 33 font-variation-settings: 'UNDS' 1000; 34 } 35 </style> 36 </head> 37 <body> 38 <p>Test passes if the underline on the first line is thin and thick on the second line.</p> 39 <div class="test"><span class="thin_underline">aagaa</span></div> 40 <div class="test"><span class="thick_underline">aagaa</span></div> 41 </body> 42 </html>