text-underline-offset-001-notref.html (922B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Non-reference case for text-underline-offset</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 #main { 9 margin: 2em; 10 display:flex 11 } 12 div span { 13 text-decoration: green underline; 14 text-decoration-skip-ink: none; 15 font: 20px/1 Ahem; 16 color: transparent; 17 padding-bottom: 20px; 18 border: 1px dotted transparent; 19 border-bottom-color: cyan; 20 } 21 </style> 22 </head> 23 <body> 24 <p class="instructions">Test passes if the box on the right has a lower underline than the box on the left</p> 25 <div id="main"> 26 <div> 27 <p>left<span>XXXX</span></p> 28 </div> 29 <div> 30 <p><span id="rightbox">XXXX</span>right</p> 31 </div> 32 </div> 33 </body> 34 </html>