text-underline-position-from-font-variable.html (1299B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Text Decoration Test: text-underline-position respects variable font properties</title> 6 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-underline-position-property"> 7 <meta name="assert" content="text-underline-position 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-underline-position-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 .close_underline { 23 text-decoration: underline; 24 font-family: underline-variable, sans-serif; 25 font-variation-settings: 'UNDO' 1; 26 } 27 28 .far_underline { 29 text-decoration: underline; 30 font-family: underline-variable, sans-serif; 31 font-variation-settings: 'UNDO' 1000; 32 } 33 </style> 34 </head> 35 <body> 36 <p>Test passes if the underline on the first line is close to the baseline and far from the baseline on the 37 second line.</p> 38 <div class="test"><span class="close_underline">aagaa</span></div> 39 <div class="test"><span class="far_underline">aagaa</span></div> 40 </body> 41 </html>