54 lines
2.2 KiB
HTML
54 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>This tests hugging outlines for multiline vertical ltr content.</title>
|
|
<style>
|
|
body {
|
|
font-size: 20px;
|
|
font-family: ahem;
|
|
color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.container {
|
|
-webkit-writing-mode: vertical-lr;
|
|
margin-left: 20px;
|
|
display: inline-block;
|
|
}
|
|
|
|
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: 4px; left: 24px; width: 12px; height: 54px; border-radius: 15px 0px 0px 3px;"></div>
|
|
<div class=cover style="top: 4px; left: 43px; width: 13px; height: 114px; border-radius: 0px 0px 0px 3px;"></div>
|
|
<div class=cover style="top: 4px; left: 63px; width: 16px; height: 255px; border-radius: 0px 3px 12px 12px;"></div>
|
|
|
|
<div class=cover style="top: 4px; left: 124px; width: 15px; height: 255px; border-radius: 15px 0px 3px 3px;"></div>
|
|
<div class=cover style="top: 4px; left: 147px; width: 12px; height: 195px; border-radius: 0px 0px 3px 0px;"></div>
|
|
<div class=cover style="top: 4px; left: 166px; width: 13px; height: 114px; border-radius: 0px 3px 11px 0px;"></div>
|
|
|
|
<div class=cover style="top: 4px; left: 223px; width: 13px; height: 114px; border-radius: 15px 0px 0px 3px;"></div>
|
|
<div class=cover style="top: 4px; left: 243px; width: 16px; height: 255px; border-radius: 0px 0px 3px 3px;"></div>
|
|
<div class=cover style="top: 4px; left: 266px; width: 13px; height: 114px; border-radius: 0px 3px 11px 0px;"></div>
|
|
|
|
<div class=cover style="top: 4px; left: 323px; width: 16px; height: 255px; border-radius: 15px 0px 3px 3px;"></div>
|
|
<div class=cover style="top: 4px; left: 346px; width: 10px; height: 114px; border-radius: 0px 0px 0px 0px;"></div>
|
|
<div class=cover style="top: 4px; left: 363px; width: 16px; height: 255px; border-radius: 0px 3px 12px 12px;"></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>
|