css/css-text-decor/text-underline-position-074-manual.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>text-underline-position under left vertical-rl</title>
 <meta name="assert" content="text-decoration:underline; text-underline-position:under left; the line is to the left of the characters for all lines">
 <link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
 <link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
 <!-- cosmetic styling -->
 <style>
 #htmlsrc { margin: 2em; }
 #htmlsrc p {
 	font-size: 28px;
 	border-radius: 5px;
 	line-height: 1.5;
 	}
 .hint { color: brown; font-family: sans-serif; font-size: 90%; }
 .hint:before { content: '❗ '; }
 :lang(mn) { font-family: "Mongolian Baiti", "Noto sans Mongolian", serif; }
 </style>
 <!-- the test -->
 <style>
 div span {
 text-decoration:underline;
 text-underline-position:under left;
 }</style>
 </head>
 <body>
 <p class="instructions">Test passes if the line is to the LEFT of the characters for all lines.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
 <div id="htmlsrc" style="writing-mode:vertical-rl">

 <div>
 <p lang="zh"><span>引发网络的全部潜能</span><span>引發網絡的全部潛能</span></p>
 <p lang="ja"><span>可能性を最大限に</span><span>導き出すために</span></p>
 <p lang="mn"><span>ᠣᠯᠠᠨ ᠦᠨᠳᠦᠰ</span><span>ᠦᠲᠡᠨ ᠦ ᠪᠣᠯᠭᠠᠬᠤ ᠦᠢᠯᠡ ᠠᠵᠢᠯᠯᠠᠭ᠎ᠠ</span></p>
 <p lang="en"><span>The quick brown f</span><span>ox jumps over the lazy dog.</span></p>
 </div>  </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>text-underline-position under left vertical-rl</title>
	<meta name="assert" content="text-decoration:underline; text-underline-position:under left; the line is to the left of the characters for all lines">
	<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
	<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
	<!-- cosmetic styling -->
	<style>
	#htmlsrc { margin: 2em; }
	#htmlsrc p {
	font-size: 28px;
	border-radius: 5px;
	line-height: 1.5;
	}
	.hint { color: brown; font-family: sans-serif; font-size: 90%; }
	.hint:before { content: '❗ '; }
	:lang(mn) { font-family: "Mongolian Baiti", "Noto sans Mongolian", serif; }
	</style>
	<!-- the test -->
	<style>
	div span {
	text-decoration:underline;
	text-underline-position:under left;
	}</style>
	</head>
	<body>
	<p class="instructions">Test passes if the line is to the LEFT of the characters for all lines.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
	<div id="htmlsrc" style="writing-mode:vertical-rl">

	<div>
	<p lang="zh"><span>引发网络的全部潜能</span><span>引發網絡的全部潛能</span></p>
	<p lang="ja"><span>可能性を最大限に</span><span>導き出すために</span></p>
	<p lang="mn"><span>ᠣᠯᠠᠨ ᠦᠨᠳᠦᠰ</span><span>ᠦᠲᠡᠨ ᠦ ᠪᠣᠯᠭᠠᠬᠤ ᠦᠢᠯᠡ ᠠᠵᠢᠯᠯᠠᠭ᠎ᠠ</span></p>
	<p lang="en"><span>The quick brown f</span><span>ox jumps over the lazy dog.</span></p>
	</div> </div>
	</body>
	</html>