<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Text Decoration Test: text-underline-position - alphabetic</title> <link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" /> <link rel="help" title="2.6. Text Underline Position" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" /> <meta name="flags" content="ahem" /> <meta name="assert" content="This tests checks that there is underline in a position to cross the descenders." /> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style type="text/css"><![CDATA[ span#ahem_text { position: absolute; left: 0; border: 1px dashed silver; font-family: ahem; font-size: 6.25em; /* equivalent to 100px */ line-height: 1.0; color: orange; } span#sample_text_underline { position: absolute; left: 0; text-decoration: underline; text-underline-position: alphabetic; color:blue; } span#sample_text { color: silver; font-size: 6.25em; /* equivalent to 100px */ line-height: 1.0; } ]]></style> </head> <body> <p>Test passes if there is a blue line inside the orange region.</p> <span id="ahem_text">ppp</span> <span id="sample_text_underline"> <span id="sample_text">sample</span> </span> </body> </html>