| <!DOCTYPE html> |
| <html> |
| <style> |
| * { font-size: 16px; } |
| div { font-size: 8px; } |
| </style> |
| <body> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| description('Test that clip-path shapes accept different length units'); |
| |
| function computedStyle(property, value) { |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| div.style.setProperty(property, value); |
| var computedValue = getComputedStyle(div).getPropertyValue(property); |
| document.body.removeChild(div); |
| return computedValue; |
| } |
| |
| function innerStyle(property, value) { |
| var div = document.createElement("div"); |
| div.style.setProperty(property, value); |
| return div.style.getPropertyValue(property); |
| } |
| |
| function testComputed(property, value, expected) { |
| shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected); |
| } |
| |
| function testInner(property, value, expected) { |
| if (expected === null) |
| shouldBeNull('innerStyle("' + property + '", "' + value + '")'); |
| else |
| shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected); |
| } |
| |
| function negativeTest(property, value) { |
| testInner(property, value, null); |
| // FIXME: Computed style not yet implemented. |
| // testComputed(property, value, 'none'); |
| } |
| |
| // test mask-image |
| testInner("-webkit-mask", "none", "none"); |
| testInner("-webkit-mask", "none, none", "none, none"); |
| testInner("-webkit-mask", "none, none, none", "none, none, none"); |
| testInner("-webkit-mask", "url(file:///image.png), none", "url(file:///image.png), none"); |
| testInner("-webkit-mask", "none, url(file:///image.png)", "none, url(file:///image.png)"); |
| |
| |
| // test mask-position |
| testInner("-webkit-mask", "top left", "0% 0%"); |
| testInner("-webkit-mask", "bottom right", "100% 100%"); |
| testInner("-webkit-mask", "left bottom", "0% 100%"); |
| testInner("-webkit-mask", "right top", "100% 0%"); |
| testInner("-webkit-mask", "center", "50% 50%"); |
| testInner("-webkit-mask", "none top", "none 50% 0%"); |
| testInner("-webkit-mask", "none bottom", "none 50% 100%"); |
| testInner("-webkit-mask", "none right", "none 100% 50%"); |
| testInner("-webkit-mask", "none top right", "none 100% 0%"); |
| testInner("-webkit-mask", "none bottom left", "none 0% 100%"); |
| testInner("-webkit-mask", "none right", "none 100% 50%"); |
| testInner("-webkit-mask", "none left", "none 0% 50%"); |
| testInner("-webkit-mask", "center 50%", "50% 50%"); |
| testInner("-webkit-mask", "50px 50%", "50px 50%"); |
| testInner("-webkit-mask", "center left", "0% 50%"); |
| testInner("-webkit-mask", "top center", "50% 0%"); |
| testInner("-webkit-mask", "left 10px top 15px", "left 10px top 15px"); |
| testInner("-webkit-mask", "left 10% top 30%", "left 10% top 30%"); |
| testInner("-webkit-mask", "right top 15px", "right 0% top 15px"); |
| testInner("-webkit-mask", "left 10px center", "left 10px top 50%"); |
| testInner("-webkit-mask", "center top 20px", "left 50% top 20px"); |
| testInner("-webkit-mask", "center left 30px", "left 30px top 50%"); |
| testInner("-webkit-mask", "left 20% top", "left 20% top 0%"); |
| testInner("-webkit-mask", "center center", "50% 50%"); |
| |
| testInner("-webkit-mask-position", "left 10px top 15px", "left 10px top 15px"); |
| testInner("-webkit-mask-position", "left 10% top 30%", "left 10% top 30%"); |
| testInner("-webkit-mask-position", "right top 15px", "right 0% top 15px"); |
| testInner("-webkit-mask-position", "left 10px center", "left 10px top 50%"); |
| testInner("-webkit-mask-position", "center top 20px", "left 50% top 20px"); |
| testInner("-webkit-mask-position", "center left 30px", "left 30px top 50%"); |
| testInner("-webkit-mask-position", "left 20% top", "left 20% top 0%"); |
| |
| // test mask-source-type |
| testInner("-webkit-mask", "none alpha", "none alpha"); |
| testInner("-webkit-mask", "none luminance, none alpha", "none luminance, none alpha"); |
| testInner("-webkit-mask", "none auto, none, none luminance", "none auto, none, none luminance"); |
| testInner("-webkit-mask-source-type", "alpha", "alpha"); |
| testInner("-webkit-mask-source-type", "luminance", "luminance"); |
| testInner("-webkit-mask-source-type", "auto", "auto"); |
| testComputed("-webkit-mask-source-type", "alpha", "alpha"); |
| testComputed("-webkit-mask-source-type", "auto", "alpha"); |
| testComputed("-webkit-mask-source-type", "luminance", "luminance"); |
| testComputed("-webkit-mask-source-type", "", "alpha"); |
| |
| // test mask-repeat |
| testInner("-webkit-mask", "repeat-x", "repeat-x"); |
| testInner("-webkit-mask", "repeat-y", "repeat-y"); |
| testInner("-webkit-mask", "repeat", "repeat"); |
| testInner("-webkit-mask", "space", "space"); |
| testInner("-webkit-mask", "no-repeat", "no-repeat"); |
| testInner("-webkit-mask", "repeat space", "repeat space"); |
| testInner("-webkit-mask", "repeat round", "repeat round"); |
| testInner("-webkit-mask", "repeat no-repeat", "repeat no-repeat"); |
| testInner("-webkit-mask", "repeat space, repeat-x", "repeat space, repeat-x"); |
| testInner("-webkit-mask", "repeat none", "none repeat"); |
| testInner("-webkit-mask", "none repeat", "none repeat"); |
| |
| // test mask-origin / mask-clip |
| testInner("-webkit-mask", "padding-box", "padding-box padding-box"); |
| testInner("-webkit-mask", "border-box", "border-box border-box"); |
| testInner("-webkit-mask", "content-box", "content-box content-box"); |
| testInner("-webkit-mask", "padding-box none", "none padding-box padding-box"); |
| testInner("-webkit-mask", "none padding-box", "none padding-box padding-box"); |
| testInner("-webkit-mask", "padding-box content-box", "padding-box content-box"); |
| testInner("-webkit-mask", "content-box content-box", "content-box content-box"); |
| testInner("-webkit-mask", "padding-box border-box", "padding-box border-box"); |
| testInner("-webkit-mask", "padding-box border-box none", "none padding-box border-box"); |
| testInner("-webkit-mask", "none padding-box border-box", "none padding-box border-box"); |
| |
| // test mask-size |
| testInner("-webkit-mask", "none left top / auto", "none 0% 0% / auto"); |
| testInner("-webkit-mask", "none left top / auto auto", "none 0% 0% / auto"); |
| testInner("-webkit-mask", "none left top / 100%", "none 0% 0% / 100%"); |
| testInner("-webkit-mask", "none left top / 0%", "none 0% 0% / 0%"); |
| testInner("-webkit-mask", "none left top / auto 0%", "none 0% 0% / auto 0%"); |
| testInner("-webkit-mask", "none left top / cover", "none 0% 0% / cover"); |
| testInner("-webkit-mask", "none left top / contain", "none 0% 0% / contain"); |
| testInner("-webkit-mask", "none left 20px top 10px / contain", "none left 20px top 10px / contain"); |
| testInner("-webkit-mask", "none left 20px top / contain", "none left 20px top 0% / contain"); |
| |
| // combinations |
| testInner("-webkit-mask", "none padding-box content-box", "none padding-box content-box"); |
| testInner("-webkit-mask", "none padding-box", "none padding-box padding-box"); |
| testInner("-webkit-mask", "none top", "none 50% 0%"); |
| testInner("-webkit-mask", "none center right 20px", "none right 20px top 50%"); |
| testInner("-webkit-mask", "none border-box left top", "none 0% 0% border-box border-box"); |
| testInner("-webkit-mask", "none border-box left top 20px", "none left 0% top 20px border-box border-box"); |
| testInner("-webkit-mask", "none border-box content-box left top repeat-x", "none 0% 0% repeat-x border-box content-box"); |
| testInner("-webkit-mask", "none border-box content-box left top / auto repeat-x", "none 0% 0% / auto repeat-x border-box content-box"); |
| testInner("-webkit-mask", "none border-box content-box right 0px center / auto repeat-x", "none right 0px top 50% / auto repeat-x border-box content-box"); |
| |
| // FIXME: Computed style not yet implemented. |
| // testComputed("-webkit-mask", "", ""); |
| // https://bugs.webkit.org/show_bug.cgi?id=103021 |
| |
| // negative tests |
| negativeTest("-webkit-mask", "top none left"); |
| negativeTest("-webkit-mask", "right none bottom"); |
| negativeTest("-webkit-mask", "right right"); |
| negativeTest("-webkit-mask", "left left"); |
| negativeTest("-webkit-mask", "top top"); |
| negativeTest("-webkit-mask", "bottom bottom"); |
| negativeTest("-webkit-mask", "50% none 50%"); |
| negativeTest("-webkit-mask", "repeat-x repeat-x"); |
| negativeTest("-webkit-mask", "space repeat-y"); |
| negativeTest("-webkit-mask", "repeat space space"); |
| negativeTest("-webkit-mask", "padding-box border-box content-box"); |
| negativeTest("-webkit-mask", "none / auto"); |
| negativeTest("-webkit-mask", "none repeat-x / auto"); |
| negativeTest("-webkit-mask", "none border-box / auto"); |
| negativeTest("-webkit-mask", "none top left / cover 100%"); |
| negativeTest("-webkit-mask", "scroll"); |
| negativeTest("-webkit-mask", "fixed"); |
| negativeTest("-webkit-mask", "local"); |
| negativeTest("-webkit-mask", "space scroll"); |
| negativeTest("-webkit-mask", "none scroll"); |
| negativeTest("-webkit-mask", "none top left / auto repeat-x scroll border-box border-box"); |
| negativeTest("-webkit-mask", "right top left"); |
| negativeTest("-webkit-mask", "center left center"); |
| negativeTest("-webkit-mask", "center top center"); |
| negativeTest("-webkit-mask", "center right bottom"); |
| negativeTest("-webkit-mask", "top solid bottom"); |
| negativeTest("-webkit-mask", "none top left right center top / auto repeat-x scroll border-box border-box"); |
| negativeTest("-webkit-mask", "none center center 20px / auto repeat-x scroll border-box border-box"); |
| negativeTest("-webkit-mask", "none top 20px right 30px center / auto repeat-x scroll border-box border-box"); |
| negativeTest("-webkit-mask", "none top 20px top 30px / auto repeat-x scroll border-box border-box"); |
| negativeTest("-webkit-mask", "none top 20px bottom / auto repeat-x scroll border-box border-box"); |
| negativeTest("-webkit-mask", "none alpha, none auto alpha"); |
| negativeTest("-webkit-mask", "none alpha luminance"); |
| negativeTest("-webkit-mask-source-type", "rubbish"); |
| negativeTest("-webkit-mask-source-type", ""); |
| negativeTest("-webkit-mask-source-type", "center"); |
| negativeTest("-webkit-mask-source-type", "repeat"); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
