chromium/src/third_party/blink/web_tests/virtual/text-antialias/letter-spacing-leading-and-trailing.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <meta charset='utf-8'>
 <style>
 span { background-color: red;}
 .inline-block { background-color: red; display: inline-block;}
 .single-width { letter-spacing: 1em; }
 .double-width { letter-spacing: 2em; }
 .rtl { direction: rtl; border: 1px solid black;}
 .ltr { direction: ltr; border: 1px solid black;}
 .section { break-inside: avoid; }
 </style>
 <p>crbug.com/267056: Handle leading and trailing letter-spacing correctly. Mixed flow text below is not yet correct.</p>
 <div style="columns:2; -moz-columns: 2; height: 900px;">
   <div style="width: 150px">
     <div class="section">
       <p>LTR Flow - LTR text</p>
       <div class="ltr">
         <div class="single-width inline-block">aaa</div>
         <p class="single-width">a<span class="double-width">bb</span>c</p>
         <p class="single-width">a<span class="double-width">b</span>c</p>
         <p class="single-width">a<span>bb</span>c</p>
       </div>
     </div>
     <div class="section">
       <p>LTR Flow - RTL text</p>
       <div class="ltr">
         <div class="single-width inline-block">אבג</div>
         <p class="single-width">א<span class="double-width">בב</span>ג</p>
         <p class="single-width">א<span class="double-width">ב</span>ג</p>
         <p class="single-width">א<span>בב</span>ג</p>
       </div>
     </div>
     <div class="section">
       <p>RTL Flow - RTL text</p>
       <div class="rtl">
         <div class="single-width inline-block">אבג</div>
         <p class="single-width">א<span class="double-width">בב</span>ג</p>
         <p class="single-width">א<span class="double-width">ב</span>ג</p>
         <p class="single-width">א<span>בב</span>ג</p>
       </div>
     </div>
     <div class="section">
       <p>RTL Flow - LTR text</p>
       <div class="rtl">
         <div class="single-width inline-block">aaa</div>
         <p class="single-width">a<span class="double-width">bb</span>c</p>
         <p class="single-width">a<span class="double-width">b</span>c</p>
         <p class="single-width">a<span>bb</span>c</p>
       </div>
       <p>LTR Flow - LTR/RTL Text</p>
       <div class="ltr">
         <div class="single-width inline-block">אcא</div>
         <p class="single-width">ab<span class="double-width">cא</span>בג</p>
         <p class="single-width">ab<span class="double-width">c</span>בג</p>
         <p class="single-width">ab<span>cא</span>בג</p>
       </div>
       <p>RTL Flow - LTR/RTL Text</p>
       <div class="rtl">
         <div class="single-width inline-block">אcא</div>
         <p class="single-width">ab<span class="double-width">cא</span>בג</p>
         <p class="single-width">ab<span class="double-width">c</span>בג</p>
         <p class="single-width">ab<span>cא</span>בג</p>
       </div>
     </div>
   </div>
 </div>
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<style>
	span { background-color: red;}
	.inline-block { background-color: red; display: inline-block;}
	.single-width { letter-spacing: 1em; }
	.double-width { letter-spacing: 2em; }
	.rtl { direction: rtl; border: 1px solid black;}
	.ltr { direction: ltr; border: 1px solid black;}
	.section { break-inside: avoid; }
	</style>
	<p>crbug.com/267056: Handle leading and trailing letter-spacing correctly. Mixed flow text below is not yet correct.</p>
	<div style="columns:2; -moz-columns: 2; height: 900px;">
	<div style="width: 150px">
	<div class="section">
	<p>LTR Flow - LTR text</p>
	<div class="ltr">
	<div class="single-width inline-block">aaa</div>
	<p class="single-width">a<span class="double-width">bb</span>c</p>
	<p class="single-width">a<span class="double-width">b</span>c</p>
	<p class="single-width">a<span>bb</span>c</p>
	</div>
	</div>
	<div class="section">
	<p>LTR Flow - RTL text</p>
	<div class="ltr">
	<div class="single-width inline-block">אבג</div>
	<p class="single-width">א<span class="double-width">בב</span>ג</p>
	<p class="single-width">א<span class="double-width">ב</span>ג</p>
	<p class="single-width">א<span>בב</span>ג</p>
	</div>
	</div>
	<div class="section">
	<p>RTL Flow - RTL text</p>
	<div class="rtl">
	<div class="single-width inline-block">אבג</div>
	<p class="single-width">א<span class="double-width">בב</span>ג</p>
	<p class="single-width">א<span class="double-width">ב</span>ג</p>
	<p class="single-width">א<span>בב</span>ג</p>
	</div>
	</div>
	<div class="section">
	<p>RTL Flow - LTR text</p>
	<div class="rtl">
	<div class="single-width inline-block">aaa</div>
	<p class="single-width">a<span class="double-width">bb</span>c</p>
	<p class="single-width">a<span class="double-width">b</span>c</p>
	<p class="single-width">a<span>bb</span>c</p>
	</div>
	<p>LTR Flow - LTR/RTL Text</p>
	<div class="ltr">
	<div class="single-width inline-block">אcא</div>
	<p class="single-width">ab<span class="double-width">cא</span>בג</p>
	<p class="single-width">ab<span class="double-width">c</span>בג</p>
	<p class="single-width">ab<span>cא</span>בג</p>
	</div>
	<p>RTL Flow - LTR/RTL Text</p>
	<div class="rtl">
	<div class="single-width inline-block">אcא</div>
	<p class="single-width">ab<span class="double-width">cא</span>בג</p>
	<p class="single-width">ab<span class="double-width">c</span>בג</p>
	<p class="single-width">ab<span>cא</span>בג</p>
	</div>
	</div>
	</div>
	</div>