135 lines
5.7 KiB
HTML
135 lines
5.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>This tests that outline corners around inlines align properly.</title>
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
color: white;
|
|
font: ahem;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.container {
|
|
margin-left: 8px;
|
|
margin-top: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
span {
|
|
outline-offset: 5px;
|
|
outline: 2px solid red;
|
|
}
|
|
|
|
.cornerBox {
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 2px;
|
|
background: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class=cornerBox style="left: 1px; top: 1px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 30px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 47px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 64px"></div>
|
|
<div class=cornerBox style="left: 33px; top: 1px"></div>
|
|
<div class=cornerBox style="left: 33px; top: 18px"></div>
|
|
<div class=cornerBox style="left: 52px; top: 18px"></div>
|
|
<div class=cornerBox style="left: 52px; top: 35px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 35px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 64px"></div>
|
|
|
|
<div class=cornerBox style="left: 1px; top: 72px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 101px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 118px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 135px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 72px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 101px"></div>
|
|
<div class=cornerBox style="left: 76px; top: 101px"></div>
|
|
<div class=cornerBox style="left: 76px; top: 118px"></div>
|
|
<div class=cornerBox style="left: 52px; top: 118px"></div>
|
|
<div class=cornerBox style="left: 52px; top: 135px"></div>
|
|
|
|
<div class=cornerBox style="left: 1px; top: 143px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 172px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 189px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 206px"></div>
|
|
<div class=cornerBox style="left: 52px; top: 143px"></div>
|
|
<div class=cornerBox style="left: 52px; top: 160px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 160px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 189px"></div>
|
|
<div class=cornerBox style="left: 52px; top: 189px"></div>
|
|
<div class=cornerBox style="left: 52px; top: 206px"></div>
|
|
|
|
<div class=cornerBox style="left: 1px; top: 214px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 243px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 260px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 277px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 214px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 243px"></div>
|
|
<div class=cornerBox style="left: 52px; top: 243px"></div>
|
|
<div class=cornerBox style="left: 52px; top: 248px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 248px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 277px"></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>
|
|
|
|
<div style="position: absolute; left: 8px; direction: RTL;">
|
|
<div class=cornerBox style="left: 95px; top: 1px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 30px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 47px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 64px"></div>
|
|
<div class=cornerBox style="left: 63px; top: 1px"></div>
|
|
<div class=cornerBox style="left: 63px; top: 18px"></div>
|
|
<div class=cornerBox style="left: 44px; top: 18px"></div>
|
|
<div class=cornerBox style="left: 44px; top: 35px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 35px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 64px"></div>
|
|
|
|
<div class=cornerBox style="left: 95px; top: 72px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 101px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 118px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 135px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 72px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 101px"></div>
|
|
<div class=cornerBox style="left: 20px; top: 101px"></div>
|
|
<div class=cornerBox style="left: 20px; top: 118px"></div>
|
|
<div class=cornerBox style="left: 44px; top: 118px"></div>
|
|
<div class=cornerBox style="left: 44px; top: 135px"></div>
|
|
|
|
<div class=cornerBox style="left: 95px; top: 143px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 172px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 189px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 206px"></div>
|
|
<div class=cornerBox style="left: 44px; top: 143px"></div>
|
|
<div class=cornerBox style="left: 44px; top: 160px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 160px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 189px"></div>
|
|
<div class=cornerBox style="left: 44px; top: 189px"></div>
|
|
<div class=cornerBox style="left: 44px; top: 206px"></div>
|
|
|
|
<div class=cornerBox style="left: 95px; top: 214px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 243px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 260px"></div>
|
|
<div class=cornerBox style="left: 95px; top: 277px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 214px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 243px"></div>
|
|
<div class=cornerBox style="left: 44px; top: 243px"></div>
|
|
<div class=cornerBox style="left: 44px; top: 248px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 248px"></div>
|
|
<div class=cornerBox style="left: 1px; top: 277px"></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>
|
|
</div>
|
|
</body>
|
|
</head>
|