sub-pixel-border.html | Explore in Territory

<!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;
        text-align: center;
        line-height: 80px;
      }
    </style>

    <script src="../../resources/testharness.js"></script>
    <script src="../../resources/testharnessreport.js"></script>
  </head>

  <body>
    <div class="test" style="border-width: 0px">0px</div>
    <div class="test" style="border-width: 0.25px">0.25px</div>
    <div class="test" style="border-width: 0.5px">0.5px</div>
    <div class="test" style="border-width: 0.75px">0.75px</div>
    <div class="test" style="border-width: 1px">1px</div>
    <div class="test" style="border-width: 1.25px">1.25px</div>
    <div class="test" style="border-width: 1.5px">1.5px</div>
    <div class="test" style="border-width: 1.75px">1.75px</div>
    <div class="test" style="border-width: 3px">3px</div>
    <div class="test" style="border-width: 3.3px">3.3px</div>
    <div class="test" style="border-width: 3.9px">3.9px</div>

    <p>
      Border thickness should be rounded up
      when it is grater than 0px but less than 1px,
      and floored when it is greater than 1px.
    </p>

    <script>
      var testElements = {};
      var elements = document.getElementsByClassName('test');
      for (var element, i = 0; element = elements[i]; i++) {
        testElements[element.firstChild.nodeValue] = element;
      }

      function borderAsString(element) {
        var style = window.getComputedStyle(element);
        return style.borderTopWidth + ' ' + style.borderRightWidth + ' ' +
            style.borderBottomWidth + ' ' + style.borderLeftWidth;
      }

      test(function() {
        function checkSize(actual, expected) {
          var actualSize = testElements[actual].getBoundingClientRect();
          var expectedSize = testElements[expected].getBoundingClientRect();

          assert_equals(actualSize.width, expectedSize.width,
            `Width of ${actual} box should be equal to ${expected} box.`);

          assert_equals(actualSize.height, expectedSize.height,
            `Height of ${actual} box should be equal to ${expected} box.`);
        }

        checkSize('0.25px', '1px');
        checkSize('0.5px', '1px');
        checkSize('0.75px', '1px');
        checkSize('1.25px', '1px');
        checkSize('1.5px', '1px');
        checkSize('1.75px', '1px');
        checkSize('3.3px', '3px');
        checkSize('3.9px', '3px');

      }, 'Size of all elements are correct.');

      test(function() {
        function checkThickness(actual, expected) {
          assert_equals(borderAsString(testElements[actual]),
            `${expected} ${expected} ${expected} ${expected}`,
            `Border thickness of ${actual} box should be ${expected}.`);
        }

        checkThickness('0px', '0px');
        checkThickness('0.25px', '1px');
        checkThickness('0.5px', '1px');
        checkThickness('0.75px', '1px');
        checkThickness('1px', '1px');
        checkThickness('1.25px', '1px');
        checkThickness('1.5px', '1px');
        checkThickness('1.75px', '1px');
        checkThickness('3px', '3px');
        checkThickness('3.3px', '3px');
        checkThickness('3.9px', '3px');

      }, 'All elements should have correctly sized borders.');

    </script>
  </body>
</html>
chromium/third_party/blink/web_tests/fast/sub-pixel/sub-pixel-border.html
