text-underline-offset-variable.html (1168B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Text Decoration Test: text-underline-offset matches offsets for variable font underline metrics</title> 6 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#underline-offset"> 7 <meta name="assert" content="text-underline-offset in pixels matches variable metrics"> 8 <link rel="author" title="Dominik Röttsches" href="mailto:drott@chromium.org"> 9 <link rel="match" href="reference/text-underline-offset-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 text-underline-offset: -2.5px; 26 } 27 28 .far_underline { 29 text-decoration: underline; 30 font-family: underline-variable, sans-serif; 31 text-underline-offset: 4.6px; 32 } 33 </style> 34 </head> 35 <body> 36 <p>Test passes if the underlines match the reference.</p> 37 <div class="test"><span class="close_underline">aagaa</span></div> 38 <div class="test"><span class="far_underline">aagaa</span></div> 39 </body> 40 </html>