Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/paint/inline/outline-offset.html 

<!DOCTYPE html>
<style>
.outer-wrapper {
  display: inline-block;
}
.wrapper {
  width: 140px;
  margin: 50px 20px;
  font-family: sans-serif;
}
.out1 {
  outline: 5px solid blue;
  outline-offset: 5px;
}
.out2 {
  outline: 5px solid green;
  outline-offset: -5px;
}
</style>
<div class="outer-wrapper" style="line-height: 24px">
<div class="wrapper">
Lorem <span class="out1">ipsum dolor sit amet</span>, consectetur adipiscing elit. Quisque <span class="out1">fringilla libero vel</span> ligula viverra tincidunt. Quisque lacinia tincidunt tristique.
</div>
<div class="wrapper">
Lorem <span class="out2">ipsum dolor sit amet</span>, consectetur adipiscing elit. Quisque <span class="out2">fringilla libero vel</span> ligula viverra tincidunt. Quisque lacinia tincidunt tristique.
</div>
</div>
<div class="outer-wrapper">
<div class="wrapper">
Lorem <span class="out1">ipsum dolor sit amet</span>, consectetur adipiscing elit. Quisque <span class="out1">fringilla libero vel</span> ligula viverra tincidunt. Quisque lacinia tincidunt tristique.
</div>
<div class="wrapper">
Lorem <span class="out2">ipsum dolor sit amet</span>, consectetur adipiscing elit. Quisque <span class="out2">fringilla libero vel</span> ligula viverra tincidunt. Quisque lacinia tincidunt tristique.
</div>
</div>
<div class="outer-wrapper" style="line-height: 18px">
<div class="wrapper">
Lorem <span class="out1">ipsum dolor sit amet</span>, consectetur adipiscing elit. Quisque <span class="out1">fringilla libero vel</span> ligula viverra tincidunt. Quisque lacinia tincidunt tristique.
</div>
<div class="wrapper">
Lorem <span class="out2">ipsum dolor sit amet</span>, consectetur adipiscing elit. Quisque <span class="out2">fringilla libero vel</span> ligula viverra tincidunt. Quisque lacinia tincidunt tristique.
</div>
</div>
<div class="outer-wrapper" style="line-height: 15px">
<div class="wrapper">
Lorem <span class="out1">ipsum dolor sit amet</span>, consectetur adipiscing elit. Quisque <span class="out1">fringilla libero vel</span> ligula viverra tincidunt. Quisque lacinia tincidunt tristique.
</div>
<div class="wrapper">
Lorem <span class="out2">ipsum dolor sit amet</span>, consectetur adipiscing elit. Quisque <span class="out2">fringilla libero vel</span> ligula viverra tincidunt. Quisque lacinia tincidunt tristique.
</div>