LayoutTests/fast/text/text-letter-spacing.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>letter-spacing.html</title>
 <style type="text/css">
 p {
     text-indent: 10em;
     background-color: #eee;
 }
 p.desc {
     text-indent: 0em;
     background-color: white;
 }
 .opaque {
     opacity: 0.5;
     background-color: #ccf;
 }

 .ls0 {
     letter-spacing: 0em;
 }
 .ls05 {
     letter-spacing: 0.5em;
 }
 .ls200 {
     letter-spacing: 200em;
 }
 .ls10000 {
     letter-spacing: 100000em;
 }

 .ls-05 {
     letter-spacing: -0.5em;
 }
 .ls-200 {
     letter-spacing: -200em;
 }
 .ls-10000 {
     letter-spacing: -10000em;
 }

 .rtl {
     direction: rtl;
     unicode-bidi: bidi-override;
 }

 </style>
 </head>
 <body>
 <!-- these should render fine (tests regular, partially opaque text) -->
 <p class="desc">The following lines test various combinations of
 letter-spacing (especially negative values) and opacity. All of the lines
 should say "Hello, world" but the spacing and background shading will vary
 from test to test. The W3C specs are fairly silent on how user agents
 should handle unusual values of letter-spacing, especially negative ones,
 which are explicitly implementation-dependent. Different browsers will
 render these differently, but hopefully the WebKit ports will be consistent,
 at least.</p>

 <p class="desc">The first line should be normally spaced.</p>
 <p><span class="ls0">Hello, world</span></p>

 <p class="desc">The next line tests a slight positive letter spacing, and
 should be slightly spaced out (wider than normal).</p>
 <p><span class="ls05">Hello, world</span></p>

 <p class="desc">The next line tests a large positive letter spacing, and
 should be *very* spaced out. You may only see an 'H' and a 'w', perhaps
 on two different lines, unless you scroll way to the right.</p>
 <p><span class="ls200">Hello, world</span></p>

 <p class="desc">The next line tests a very large positive letter spacing,
 and should also be *very* spaced out. You may only see an 'H' and a 'w',
 perhaps on two different lines, unless you scroll way to the right.</p>
 <p><span class="ls10000">Hello, world</span></p>

 <p class="desc">The next line tests a small negative line spacing, and
 should be crammed backwards</p>
 <p><span class="ls-05">Hello, world</span></p>

 <p class="desc">The next line tests a large negative line spacing, and
 should be just display an 'H'</p>
 <p><span class="ls-200">Hello, world</span></p>

 <p class="desc">The next line tests a very large negative line spacing,
 and should just have an 'H'.</p>
 <p><span class="ls-10000">Hello, world</span></p>

 <p class="desc">The next few lines test the interaction with opacity.
 The first line should be normally spaced out, slightly opaque,
 and on a differently-colored background</p>
 <p><span class="ls0 opaque">Hello, world</span></p>

 <p class="desc">The next line tests a small positive line spacing, and
 should be slightly spaced out, opaque, and on a background.</p>
 <p><span class="ls05 opaque">Hello, world</span></p>

 <p class="desc">The next line tests a large positive line spacing, and
 should be very widely spaced, on a background.</p>
 <p><span class="ls200 opaque">Hello, world</span></p>

 <p class="desc">The next line tests a very large positive line spacing,
 and should be very widely spaced but blank, and on a background.</p>
 <p><span class="ls10000 opaque">Hello, world</span></p>

 <p class="desc">The next line tests a small negative line spacing, and should
 be blank.</p>
 <p><span class="ls-05 opaque">Hello, world</span></p>

 <p class="desc">The next line tests a large negative line spacing, and
 should be blank.</p>
 <p><span class="ls-200 opaque">Hello, world</span></p>

 <p class="desc">The next line tests a very large negative line spacing,
 and should be blank.</p>
 <p><span class="ls-10000 opaque">Hello, world</span></p>

 <p class="desc">Now we do a few basic right-to-left tests:</p>

 <p class="desc">The first line should be normally spaced.</p>
 <p><span class="ls0 rtl">Hello, world</span></p>

 <p class="desc">The next line should be slightly spaced out (wider than
 normal).</p>
 <p><span class="ls05 rtl">Hello, world</span></p>
 <p class="desc">The next line should be crammed backwards, just as if
 it wasn't right-to-left</p>
 <p><span class="ls-05 rtl">Hello, world</span></p>

 <p class="desc">The next line tests a large negative line spacing, and
 should just print a 'd'</p>
 <p><span class="ls-200 rtl">Hello, world</span></p>

 <p class="desc">Now, opacity as well -
 The next line should be printed right to left, slightly spaced out
 (wider than normal), and on a background.</p>
 <p><span class="ls05 rtl opaque">Hello, world</span></p>

 <p class="desc">The next line tests a small negative line spacing, and
 should be blank.</p>
 <p><span class="ls-05 rtl opaque">Hello, world</span></p>

 <p class="desc">The next line tests a large negative line spacing, and
 it should be blank.</p>
 <p><span class="ls-200 rtl opaque">Hello, world</span></p>

 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>letter-spacing.html</title>
	<style type="text/css">
	p {
	text-indent: 10em;
	background-color: #eee;
	}
	p.desc {
	text-indent: 0em;
	background-color: white;
	}
	.opaque {
	opacity: 0.5;
	background-color: #ccf;
	}

	.ls0 {
	letter-spacing: 0em;
	}
	.ls05 {
	letter-spacing: 0.5em;
	}
	.ls200 {
	letter-spacing: 200em;
	}
	.ls10000 {
	letter-spacing: 100000em;
	}

	.ls-05 {
	letter-spacing: -0.5em;
	}
	.ls-200 {
	letter-spacing: -200em;
	}
	.ls-10000 {
	letter-spacing: -10000em;
	}

	.rtl {
	direction: rtl;
	unicode-bidi: bidi-override;
	}

	</style>
	</head>
	<body>
	<!-- these should render fine (tests regular, partially opaque text) -->
	<p class="desc">The following lines test various combinations of
	letter-spacing (especially negative values) and opacity. All of the lines
	should say "Hello, world" but the spacing and background shading will vary
	from test to test. The W3C specs are fairly silent on how user agents
	should handle unusual values of letter-spacing, especially negative ones,
	which are explicitly implementation-dependent. Different browsers will
	render these differently, but hopefully the WebKit ports will be consistent,
	at least.</p>

	<p class="desc">The first line should be normally spaced.</p>
	<p><span class="ls0">Hello, world</span></p>

	<p class="desc">The next line tests a slight positive letter spacing, and
	should be slightly spaced out (wider than normal).</p>
	<p><span class="ls05">Hello, world</span></p>

	<p class="desc">The next line tests a large positive letter spacing, and
	should be very spaced out. You may only see an 'H' and a 'w', perhaps
	on two different lines, unless you scroll way to the right.</p>
	<p><span class="ls200">Hello, world</span></p>

	<p class="desc">The next line tests a very large positive letter spacing,
	and should also be very spaced out. You may only see an 'H' and a 'w',
	perhaps on two different lines, unless you scroll way to the right.</p>
	<p><span class="ls10000">Hello, world</span></p>

	<p class="desc">The next line tests a small negative line spacing, and
	should be crammed backwards</p>
	<p><span class="ls-05">Hello, world</span></p>

	<p class="desc">The next line tests a large negative line spacing, and
	should be just display an 'H'</p>
	<p><span class="ls-200">Hello, world</span></p>

	<p class="desc">The next line tests a very large negative line spacing,
	and should just have an 'H'.</p>
	<p><span class="ls-10000">Hello, world</span></p>

	<p class="desc">The next few lines test the interaction with opacity.
	The first line should be normally spaced out, slightly opaque,
	and on a differently-colored background</p>
	<p><span class="ls0 opaque">Hello, world</span></p>

	<p class="desc">The next line tests a small positive line spacing, and
	should be slightly spaced out, opaque, and on a background.</p>
	<p><span class="ls05 opaque">Hello, world</span></p>

	<p class="desc">The next line tests a large positive line spacing, and
	should be very widely spaced, on a background.</p>
	<p><span class="ls200 opaque">Hello, world</span></p>

	<p class="desc">The next line tests a very large positive line spacing,
	and should be very widely spaced but blank, and on a background.</p>
	<p><span class="ls10000 opaque">Hello, world</span></p>

	<p class="desc">The next line tests a small negative line spacing, and should
	be blank.</p>
	<p><span class="ls-05 opaque">Hello, world</span></p>

	<p class="desc">The next line tests a large negative line spacing, and
	should be blank.</p>
	<p><span class="ls-200 opaque">Hello, world</span></p>

	<p class="desc">The next line tests a very large negative line spacing,
	and should be blank.</p>
	<p><span class="ls-10000 opaque">Hello, world</span></p>

	<p class="desc">Now we do a few basic right-to-left tests:</p>

	<p class="desc">The first line should be normally spaced.</p>
	<p><span class="ls0 rtl">Hello, world</span></p>

	<p class="desc">The next line should be slightly spaced out (wider than
	normal).</p>
	<p><span class="ls05 rtl">Hello, world</span></p>
	<p class="desc">The next line should be crammed backwards, just as if
	it wasn't right-to-left</p>
	<p><span class="ls-05 rtl">Hello, world</span></p>

	<p class="desc">The next line tests a large negative line spacing, and
	should just print a 'd'</p>
	<p><span class="ls-200 rtl">Hello, world</span></p>

	<p class="desc">Now, opacity as well -
	The next line should be printed right to left, slightly spaced out
	(wider than normal), and on a background.</p>
	<p><span class="ls05 rtl opaque">Hello, world</span></p>

	<p class="desc">The next line tests a small negative line spacing, and
	should be blank.</p>
	<p><span class="ls-05 rtl opaque">Hello, world</span></p>

	<p class="desc">The next line tests a large negative line spacing, and
	it should be blank.</p>
	<p><span class="ls-200 rtl opaque">Hello, world</span></p>

	</body>
	</html>