LayoutTests/fast/inline/hidpi-outline-auto-with-border-radius-horizontal-rtl.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <title>This tests hugging outlines for multiline horizontal rtl content.</title>
 <style>
 body {
     direction: rtl;
     font-size: 20px;
     font-family: ahem;
     color: rgba(0, 0, 0, 0);
 }

 .container {
     margin-bottom: 20px;
 }

 span {
     border-radius: 15px 10px 8px 5px;
     outline-offset: 0px;
     outline: auto;
 }

 .cover {
     position: absolute;
     border-radius: 15px 4px 8px 5px;
     border: 7px solid white;
 }
 </style>
 </head>
 <body>
 <div class=cover style="top: 3px; right: 3px; width: 56px; height: 56px; border-radius: 3px 16px 3px 0px;"></div>
 <div class=cover style="top: 23px; right: 66px; width: 53px; height: 36px; border-radius: 3px 0px 0px 0px;"></div>
 <div class=cover style="top: 43px; right: 126px; width: 133px; height: 16px; border-radius: 21px 0px 0px 11px;"></div>

 <div class=cover style="top: 83px; right: 3px; width: 256px; height: 16px; border-radius: 3px 16px 0px 3px;"></div>
 <div class=cover style="top: 106px; right: 3px; width: 196px; height: 13px; border-radius: 0px 0px 0px 3px;"></div>
 <div class=cover style="top: 126px; right: 3px; width: 116px; height: 13px; border-radius: 0px 0px 3px 12px;"></div>

 <div class=cover style="top: 163px; right: 3px; width: 116px; height: 13px; border-radius: 3px 16px 0px 0px;"></div>
 <div class=cover style="top: 183px; right: 3px; width: 256px; height: 16px; border-radius: 3px 0px 0px 3px;"></div>
 <div class=cover style="top: 206px; right: 3px; width: 116px; height: 13px; border-radius: 0px 0px 3px 12px;"></div>

 <div class=cover style="top: 243px; right: 3px; width: 256px; height: 15px; border-radius: 3px 16px 0px 3px;"></div>
 <div class=cover style="top: 265px; right: 3px; width: 116px; height: 13px; border-radius: 0px 0px 0px 0px;"></div>
 <div class=cover style="top: 284px; right: 3px; width: 256px; height: 14px; border-radius: 21px 0px 3px 11px;"></div>

 <div class=container><span>foo<br>foobar<br>foobar foobar</span></div>
 <div class=container><span>foobar foobar<br>foobar foo<br>foobar</span></div>
 <div class=container><span>foobar<br>foobar foobar<br>foobar</span></div>
 <div class=container><span>foobar foobar<br>foobar<br>foobar foobar</span></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>This tests hugging outlines for multiline horizontal rtl content.</title>
	<style>
	body {
	direction: rtl;
	font-size: 20px;
	font-family: ahem;
	color: rgba(0, 0, 0, 0);
	}

	.container {
	margin-bottom: 20px;
	}

	span {
	border-radius: 15px 10px 8px 5px;
	outline-offset: 0px;
	outline: auto;
	}

	.cover {
	position: absolute;
	border-radius: 15px 4px 8px 5px;
	border: 7px solid white;
	}
	</style>
	</head>
	<body>
	<div class=cover style="top: 3px; right: 3px; width: 56px; height: 56px; border-radius: 3px 16px 3px 0px;"></div>
	<div class=cover style="top: 23px; right: 66px; width: 53px; height: 36px; border-radius: 3px 0px 0px 0px;"></div>
	<div class=cover style="top: 43px; right: 126px; width: 133px; height: 16px; border-radius: 21px 0px 0px 11px;"></div>

	<div class=cover style="top: 83px; right: 3px; width: 256px; height: 16px; border-radius: 3px 16px 0px 3px;"></div>
	<div class=cover style="top: 106px; right: 3px; width: 196px; height: 13px; border-radius: 0px 0px 0px 3px;"></div>
	<div class=cover style="top: 126px; right: 3px; width: 116px; height: 13px; border-radius: 0px 0px 3px 12px;"></div>

	<div class=cover style="top: 163px; right: 3px; width: 116px; height: 13px; border-radius: 3px 16px 0px 0px;"></div>
	<div class=cover style="top: 183px; right: 3px; width: 256px; height: 16px; border-radius: 3px 0px 0px 3px;"></div>
	<div class=cover style="top: 206px; right: 3px; width: 116px; height: 13px; border-radius: 0px 0px 3px 12px;"></div>

	<div class=cover style="top: 243px; right: 3px; width: 256px; height: 15px; border-radius: 3px 16px 0px 3px;"></div>
	<div class=cover style="top: 265px; right: 3px; width: 116px; height: 13px; border-radius: 0px 0px 0px 0px;"></div>
	<div class=cover style="top: 284px; right: 3px; width: 256px; height: 14px; border-radius: 21px 0px 3px 11px;"></div>

	<div class=container><span>foo<br>foobar<br>foobar foobar</span></div>
	<div class=container><span>foobar foobar<br>foobar foo<br>foobar</span></div>
	<div class=container><span>foobar<br>foobar foobar<br>foobar</span></div>
	<div class=container><span>foobar foobar<br>foobar<br>foobar foobar</span></div>
	</body>
	</html>