third_party/WebKit/LayoutTests/fast/backgrounds/mask-box-image-width.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <script src="../../resources/js-test.js"></script>
   5     <style>
   6     .test * {
   7         -webkit-mask-box-image-source: url(resources/dot.png);
   8         -webkit-mask-box-image-slice: 3 fill;
   9         width: 100px;
  10         height: 100px;
  11         background-color: blue;
  12         visibility: hidden;
  13     }
  14     </style>
  15   </head>
  16   <body>
  17     <div>
  18       <div class="test"></div>
  19     </div>
  20     <script>
  21       description("This test checks that webkitMaskBoxImageWidth" +
  22                   " is correctly parsed and returned from getComputedStyle().");
  23       var tests = [
  24           ["auto", "auto"],
  25           ["1", "1"],
  26           ["0px", "0px"],
  27           ["97%", "97%"],
  28           ["inherit", "auto"],
  29           ["initial", "auto"]
  30       ];
  31       var testElm = document.querySelector('.test');
  32       shouldBeEqualToString("getComputedStyle(testElm).webkitMaskBoxImageWidth", "auto");
  33       for (var i in tests) {
  34           testElm.style["webkitMaskBoxImageWidth"] = tests[i][0];
  35           shouldBeEqualToString("getComputedStyle(testElm).webkitMaskBoxImageWidth", tests[i][1]);
  36       }
  37     </script>
  38   </body>
  39 </html>