| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Test rendering of sub-pixel borders</title> |
| <style> |
| .test { |
| box-sizing: content-box; |
| display: inline-block; |
| margin: 5px; |
| width: 80px; |
| height: 80px; |
| border: 1px solid green; |
| background: lightgreen; |
| vertical-align: top; |
| text-align: center; |
| line-height: 80px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="test" style="width: 78.5px; height: 78.5px"> </div> |
| <div class="test" style="width: 79px; height: 79px"> </div> |
| <div class="test" style="width: 79.5px; height: 79.5px"> </div> |
| <div class="test"> </div> |
| <div class="test" style="width: 80.5px; height: 80.5px"> </div> |
| <br> |
| <div class="test" style="border-width: 2px; width: 79px; height: 79px"> </div> |
| <div class="test" style="border-width: 2px; width: 79.5px; height: 79.5px"> </div> |
| <div class="test" style="border-width: 2px"> </div> |
| <div class="test" style="border-width: 2px; width: 80.5px; height: 80.5px"> </div> |
| <br> |
| <div class="test" style="border-width: 3px; width: 79px; height: 79px"> </div> |
| <div class="test" style="border-width: 3px; width: 79.5px; height: 79.5px"> </div> |
| <div class="test" style="border-width: 3px"> </div> |
| <div class="test" style="border-width: 3px; width: 80.5px; height: 80.5px"> </div> |
| <p> |
| Border thickness should be rounded, not floored, with the exception of |
| values below 1px where it should always round up. |
| </p> |
| </body> |
| </html> |
