mask-box-image-width.html | Explore in Territory

<!doctype html>
<html>
  <head>
    <script src="../../resources/js-test.js"></script>
    <style>
    .test * {
        -webkit-mask-box-image-source: url(resources/dot.png);
        -webkit-mask-box-image-slice: 3 fill;
        width: 100px;
        height: 100px;
        background-color: blue;
        visibility: hidden;
    }
    </style>
  </head>
  <body>
    <div>
      <div class="test"></div>
    </div>
    <script>
      description("This test checks that webkitMaskBoxImageWidth" +
                  " is correctly parsed and returned from getComputedStyle().");
      var tests = [
          ["auto", "auto"],
          ["1", "1"],
          ["0px", "0px"],
          ["97%", "97%"],
          ["inherit", "auto"],
          ["initial", "auto"]
      ];
      var testElm = document.querySelector('.test');
      shouldBeEqualToString("getComputedStyle(testElm).webkitMaskBoxImageWidth", "auto");
      for (var i in tests) {
          testElm.style["webkitMaskBoxImageWidth"] = tests[i][0];
          shouldBeEqualToString("getComputedStyle(testElm).webkitMaskBoxImageWidth", tests[i][1]);
      }
    </script>
  </body>
</html>
chromium/third_party/blink/web_tests/fast/backgrounds/mask-box-image-width.html
