| <!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> |
