text-decoration-thickness-ink-skip-dilation.html (1411B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Text Decoration Test: Ink skipping extends only a small distance away from glyph</title> 6 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-ink-property"> 7 <meta name="assert" content="Ink skipping gap is capped at a small distance and does not continuously grow with text-decoration-thickness."> 8 <link rel="author" title="Dominik Röttsches" href="mailto:drott@chromium.org"> 9 <link rel="match" href="reference/text-decoration-thickness-ink-skip-dilation-ref.html"> 10 <style> 11 @font-face { 12 font-family: underline-variable; 13 src: url(resources/UnderlineTest-VF.ttf); 14 } 15 16 .test_red { 17 font-family: underline-variable; 18 font-size: 64px; 19 } 20 21 .underline { 22 text-decoration: underline; 23 text-underline-position: from-font; 24 text-decoration-thickness: 13px; 25 text-decoration-color: red; 26 } 27 28 .test_green { 29 text-decoration: underline; 30 font-family: underline-variable; 31 text-underline-position: from-font; 32 text-decoration-thickness: 25px;; 33 font-size: 64px; 34 text-decoration-color: green; 35 } 36 37 .overlap { 38 position: absolute; 39 left: 20px; 40 top: 25px; 41 } 42 </style> 43 </head> 44 <body> 45 <p>Test passes if no blips of red underline show near the descender of the g glyph.</p> 46 <div class="test"> 47 <div class="test_red overlap">a<span class="underline">aaaagaaaa</span>a</div> 48 <div class="test_green overlap">aaaaagaaaaa</div> 49 </div> 50 </div> 51 </body> 52 </html>