| <!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> |
