border-antialiasing.html | Explore in Territory

<!DOCTYPE html>

<html>
<head>
  <style>
    div {
      -webkit-transform-origin: top left;
      margin: 10px;
    }
    table {
      margin: 20px;
    }
    table.collapsed {
      border-collapse: collapse;
    }
    td {
      height: 10px;
      width: 10px;
      border: 1px solid black;
    }
    
    .shrunk {
      transform: scale(0.35);
  }

    .columns {
      -webkit-column-width: 10px;
      -webkit-column-rule: 1px solid black;
      column-width: 10px;
      column-rule: 1px solid black;
      column-fill: auto;
      width: 600px;
      height: 100px;
    }
    
    .outlines span {
      outline: 1px solid black;
      margin: 4px;
      padding: 2px;
    }
  </style>
</head>
<body>

<!-- Both tables should render with antialiased borders. -->
<div class="shrunk">
  <table class="collapsed">
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  </table>
  <table>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  </table>

  <!-- Column rules should be antialiased -->
  <div class="columns">
   _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
  </div>
  
  <div class="outlines">
    <span>I am a span<br>I am</span> <span>I am<br>a span I am</span>
    <span>I am a span<br>I am</span> <span>I am<br>a span I am</span>
    <span>I am a span<br>I am</span> <span>I am<br>a span I am</span>
    <span>I am a span<br>I am</span> <span>I am<br>a span I am</span>
  </div>
</div>

</body>
</html>
chromium/third_party/blink/web_tests/fast/borders/border-antialiasing.html
