text-decoration-thickness-fixed.html (1634B)
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 fixed values match thick and thin values from font."> 8 <link rel="author" title="Dominik Röttsches" href="mailto:drott@chromium.org"> 9 <link rel="match" href="reference/text-decoration-thickness-fixed-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 font-family: underline-variable; 24 text-decoration: underline; 25 text-decoration-thickness: 0.2px; 26 } 27 28 .thick_underline { 29 font-family: underline-variable; 30 text-decoration: underline; 31 text-decoration-thickness: 6.4px; 32 } 33 34 .thin_underline_percent { 35 font-family: underline-variable; 36 text-decoration: underline; 37 text-decoration-thickness: 0.3152%; 38 } 39 40 .thick_underline_percent { 41 font-family: underline-variable; 42 text-decoration: underline; 43 text-decoration-thickness: 10%; 44 } 45 </style> 46 </head> 47 <body> 48 <p>Test passes if underlines are thin, thick, thin, thick in this order and match the reference rendering.</p> 49 <div class="test"><span class="thin_underline">aaGaa</span></div> 50 <div class="test"><span class="thick_underline">aaGaa</span></div> 51 <div class="test"><span class="thin_underline_percent">aaGaa</span></div> 52 <div class="test"><span class="thick_underline_percent">aaGaa</span></div> 53 </body> 54 </html>