chromium/src/third_party/blink/web_tests/fast/css3-text/css3-text-decoration/text-underline-position/text-underline-position-under.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE HTML>
 <html>
 <head>
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
     <p>Test 'text-underline-position: under' with vertical-align. The
     horizontal lines should not cross the 'p' letter in word 'ipsum'. None of
     the numbered texts are vertically aligned, yet the three horizontal lines
     for each of the two rows should align perfectly, that is, it should appear
     as if there are two long horizontal lines. Bugzilla link:
     http://webkit.org/b/102795.</p>

     <div class="under">
         <p>&nbsp;1 lorem ipsum&nbsp;&nbsp;
             <span style="vertical-align: 3em;">&nbsp;2 lorem ipsum&nbsp;&nbsp;</span><span style="vertical-align: -2em;">&nbsp;3 lorem ipsum&nbsp;&nbsp;</span><br>
             &nbsp;4 lorem ipsum&nbsp;&nbsp;
             <span style="vertical-align: middle">&nbsp;5 lorem ipsum&nbsp;&nbsp;<span style="vertical-align: middle">&nbsp;6 lorem ipsum&nbsp;&nbsp;</span></span>
         </p>
     </div>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<p>Test 'text-underline-position: under' with vertical-align. The
	horizontal lines should not cross the 'p' letter in word 'ipsum'. None of
	the numbered texts are vertically aligned, yet the three horizontal lines
	for each of the two rows should align perfectly, that is, it should appear
	as if there are two long horizontal lines. Bugzilla link:
	http://webkit.org/b/102795.</p>

	<div class="under">
	<p> 1 lorem ipsum
	<span style="vertical-align: 3em;"> 2 lorem ipsum  </span><span style="vertical-align: -2em;"> 3 lorem ipsum  </span><br>
	4 lorem ipsum
	<span style="vertical-align: middle"> 5 lorem ipsum  <span style="vertical-align: middle"> 6 lorem ipsum  </span></span>
	</p>
	</div>
	</body>
	</html>