| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Test computed style on the -webkit-mask-box-image property</title> |
| <link rel="author" title="Oriol Brufau" href="mailto:[email protected]"> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <div id="target"></div> |
| <script> |
| const target = document.getElementById('target'); |
| const computedStyle = getComputedStyle(target); |
| |
| const initialValues = { |
| '-webkit-mask-box-image': 'none', |
| '-webkit-mask-box-image-slice': '0', |
| '-webkit-mask-box-image-width': 'auto', |
| '-webkit-mask-box-image-outset': '0', |
| '-webkit-mask-box-image-repeat': 'stretch', |
| }; |
| |
| const testCases = [ |
| // value, expected |
| [ '', initialValues ], |
| [ '-webkit-mask-box-image: initial', initialValues ], |
| [ '-webkit-mask-box-image: none', { |
| ...initialValues, |
| '-webkit-mask-box-image-slice': '0 fill', |
| }], |
| [ |
| '-webkit-mask-box-image-source: initial; -webkit-mask-box-image-slice: initial; -webkit-mask-box-image-width: initial; -webkit-mask-box-image-outset: initial; -webkit-mask-box-image-repeat: initial;', |
| initialValues |
| ], |
| [ '-webkit-mask-box-image: url(#)', { |
| ...initialValues, |
| '-webkit-mask-box-image': 'url("#") 0 fill / auto / 0 stretch', |
| '-webkit-mask-box-image-slice': '0 fill', |
| '-webkit-mask-box-image-source': 'url("#")', |
| }], |
| [ '-webkit-mask-box-image: 1', { |
| ...initialValues, |
| '-webkit-mask-box-image-slice': '1 fill', |
| }], |
| [ '-webkit-mask-box-image: 1% / 2', { |
| ...initialValues, |
| '-webkit-mask-box-image-slice': '1% fill', |
| '-webkit-mask-box-image-width': '2', |
| }], |
| [ '-webkit-mask-box-image: 1% // 2', { |
| ...initialValues, |
| '-webkit-mask-box-image-slice': '1% fill', |
| '-webkit-mask-box-image-outset': '2', |
| }], |
| [ '-webkit-mask-box-image: 1% / 2px / 3', { |
| ...initialValues, |
| '-webkit-mask-box-image-slice': '1% fill', |
| '-webkit-mask-box-image-width': '2px', |
| '-webkit-mask-box-image-outset': '3', |
| }], |
| [ '-webkit-mask-box-image: round', { |
| ...initialValues, |
| '-webkit-mask-box-image-slice': '0 fill', |
| '-webkit-mask-box-image-repeat': 'round', |
| }], |
| ]; |
| |
| for (let testCase of testCases) { |
| target.style.cssText = testCase[0]; |
| test(function() { |
| for (let [prop, expected] of Object.entries(testCase[1])) { |
| assert_equals(computedStyle.getPropertyValue(prop), expected, prop); |
| } |
| }, JSON.stringify(testCase[0])); |
| } |
| </script> |
| </body> |
| </html> |
