| <!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) |
| expected = ""; |
| shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected); |
| } |
| |
| function negativeTest(property, value) { |
| testInner(property, value, null); |
| // testComputed(property, value, 'none'); |
| } |
| |
| // test mask-image |
| testInner("mask", "none", "none"); |
| testInner("mask", "none, none", "none, none"); |
| testInner("mask", "none, none, none", "none, none, none"); |
| testInner("mask", "url(file:///image.png), none", "url(\"file:///image.png\"), none"); |
| testInner("mask", "none, url(file:///image.png)", "none, url(\"file:///image.png\")"); |
| |
| |
| // test mask-position |
| testInner("mask", "top left", "left top"); |
| testInner("mask", "bottom right", "right bottom"); |
| testInner("mask", "left bottom", "left bottom"); |
| testInner("mask", "right top", "right top"); |
| testInner("mask", "center", "center center"); |
| testInner("mask", "none top", "none center top"); |
| testInner("mask", "none bottom", "none center bottom"); |
| testInner("mask", "none right", "none right center"); |
| testInner("mask", "none top right", "none right top"); |
| testInner("mask", "none bottom left", "none left bottom"); |
| testInner("mask", "none right", "none right center"); |
| testInner("mask", "none left", "none left center"); |
| testInner("mask", "center 50%", "center 50%"); |
| testInner("mask", "50px 50%", "50px 50%"); |
| testInner("mask", "center left", "left center"); |
| testInner("mask", "top center", "center top"); |
| testInner("mask", "left 10px top 15px", "left 10px top 15px"); |
| testInner("mask", "left 10% top 30%", "left 10% top 30%"); |
| testInner("mask", "right top 15px", "right top 15px"); |
| testInner("mask", "left 10px center", "left 10px center"); |
| testInner("mask", "center top 20px", "center top 20px"); |
| testInner("mask", "center left 30px", "left 30px center"); |
| testInner("mask", "left 20% top", "left 20% top"); |
| testInner("mask", "center center", "center center"); |
| |
| testInner("mask-position", "left 10px top 15px", "left 10px top 15px"); |
| testInner("mask-position", "left 10% top 30%", "left 10% top 30%"); |
| negativeTest("mask-position", "right top 15px", "right top 15px"); |
| negativeTest("mask-position", "left 10px center", "left 10px center"); |
| negativeTest("mask-position", "center top 20px", "center top 20px"); |
| negativeTest("mask-position", "center left 30px", "left 30px center"); |
| negativeTest("mask-position", "left 20% top", "left 20% top"); |
| |
| // test mask-mode |
| testInner("mask", "none alpha", "none alpha"); |
| testInner("mask", "none luminance, none alpha", "none luminance, none alpha"); |
| testInner("mask", "none match-source, none, none luminance", "none match-source, none, none luminance"); |
| testInner("mask-mode", "alpha", "alpha"); |
| testInner("mask-mode", "luminance", "luminance"); |
| testInner("mask-mode", "match-source", "match-source"); |
| testComputed("mask-mode", "alpha", "alpha"); |
| testComputed("mask-mode", "match-source", "match-source"); |
| testComputed("mask-mode", "luminance", "luminance"); |
| testComputed("mask-mode", "", "match-source"); |
| |
| // test mask-repeat |
| testInner("mask", "repeat-x", "repeat-x"); |
| testInner("mask", "repeat-y", "repeat-y"); |
| testInner("mask", "repeat", "repeat"); |
| testInner("mask", "space", "space"); |
| testInner("mask", "no-repeat", "no-repeat"); |
| testInner("mask", "repeat space", "repeat space"); |
| testInner("mask", "repeat round", "repeat round"); |
| testInner("mask", "repeat no-repeat", "repeat no-repeat"); |
| testInner("mask", "repeat space, repeat-x", "repeat space, repeat-x"); |
| testInner("mask", "repeat none", "none repeat"); |
| testInner("mask", "none repeat", "none repeat"); |
| |
| // test mask-origin / mask-clip |
| testInner("mask", "padding-box", "padding-box"); |
| testInner("mask", "border-box", "border-box"); |
| testInner("mask", "content-box", "content-box"); |
| testInner("mask", "padding-box none", "none padding-box"); |
| testInner("mask", "none padding-box", "none padding-box"); |
| testInner("mask", "padding-box content-box", "padding-box content-box"); |
| testInner("mask", "content-box content-box", "content-box"); |
| testInner("mask", "padding-box border-box", "padding-box border-box"); |
| testInner("mask", "padding-box border-box none", "none padding-box border-box"); |
| testInner("mask", "none padding-box border-box", "none padding-box border-box"); |
| |
| // test mask-size |
| testInner("mask", "none left top / auto", "none left top / auto"); |
| testInner("mask", "none left top / auto auto", "none left top / auto"); |
| testInner("mask", "none left top / 100%", "none left top / 100%"); |
| testInner("mask", "none left top / 100% 100%", "none left top / 100% 100%"); |
| testInner("mask", "none left top / 0%", "none left top / 0%"); |
| testInner("mask", "none left top / auto 0%", "none left top / auto 0%"); |
| testInner("mask", "none left top / cover", "none left top / cover"); |
| testInner("mask", "none left top / contain", "none left top / contain"); |
| testInner("mask", "none left 20px top 10px / contain", "none left 20px top 10px / contain"); |
| testInner("mask", "none left 20px top / contain", "none left 20px top / contain"); |
| |
| // combinations |
| testInner("mask", "none padding-box content-box", "none padding-box content-box"); |
| testInner("mask", "none padding-box", "none padding-box"); |
| testInner("mask", "none top", "none center top"); |
| testInner("mask", "none center right 20px", "none right 20px center"); |
| testInner("mask", "none border-box left top", "none left top border-box"); |
| testInner("mask", "none border-box left top 20px", "none left top 20px border-box"); |
| testInner("mask", "none border-box content-box left top repeat-x", "none left top repeat-x border-box content-box"); |
| testInner("mask", "none border-box content-box left top / auto repeat-x", "none left top / auto repeat-x border-box content-box"); |
| testInner("mask", "none border-box content-box right 0px center / auto repeat-x", "none right 0px center / auto repeat-x border-box content-box"); |
| |
| // test mask-position |
| testComputed("mask", "top left", "none 0% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "bottom right", "none 100% 100% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "left bottom", "none 0% 100% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "right top", "none 100% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "center", "none 50% 50% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none top", "none 50% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none bottom", "none 50% 100% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none right", "none 100% 50% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none top right", "none 100% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none bottom left", "none 0% 100% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none right", "none 100% 50% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none left", "none 0% 50% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "center 50%", "none 50% 50% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "50px 50%", "none 50px 50% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "center left", "none 0% 50% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "top center", "none 50% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "left 10px top 15px", "none 10px 15px / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "left 10% top 30%", "none 10% 30% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "right top 15px", "none 100% 15px / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "left 10px center", "none 10px 50% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "center top 20px", "none 50% 20px / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "center left 30px", "none 30px 50% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "left 20% top", "none 20% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "center center", "none 50% 50% / auto repeat border-box border-box add match-source"); |
| |
| // test mask-repeat |
| testComputed("mask", "repeat-x", "none 0% 0% / auto repeat-x border-box border-box add match-source"); |
| testComputed("mask", "repeat-y", "none 0% 0% / auto repeat-y border-box border-box add match-source"); |
| testComputed("mask", "repeat", "none 0% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "space", "none 0% 0% / auto space border-box border-box add match-source"); |
| testComputed("mask", "no-repeat", "none 0% 0% / auto no-repeat border-box border-box add match-source"); |
| testComputed("mask", "repeat space", "none 0% 0% / auto repeat space border-box border-box add match-source"); |
| testComputed("mask", "repeat round", "none 0% 0% / auto repeat round border-box border-box add match-source"); |
| testComputed("mask", "repeat no-repeat", "none 0% 0% / auto repeat-x border-box border-box add match-source"); |
| testComputed("mask", "repeat none", "none 0% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none repeat", "none 0% 0% / auto repeat border-box border-box add match-source"); |
| |
| // test mask-origin / mask-clip |
| testComputed("mask", "padding-box", "none 0% 0% / auto repeat padding-box padding-box add match-source"); |
| testComputed("mask", "border-box", "none 0% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "content-box", "none 0% 0% / auto repeat content-box content-box add match-source"); |
| testComputed("mask", "padding-box none", "none 0% 0% / auto repeat padding-box padding-box add match-source"); |
| testComputed("mask", "none padding-box", "none 0% 0% / auto repeat padding-box padding-box add match-source"); |
| testComputed("mask", "padding-box content-box", "none 0% 0% / auto repeat padding-box content-box add match-source"); |
| testComputed("mask", "content-box content-box", "none 0% 0% / auto repeat content-box content-box add match-source"); |
| testComputed("mask", "padding-box border-box", "none 0% 0% / auto repeat padding-box border-box add match-source"); |
| testComputed("mask", "padding-box border-box none", "none 0% 0% / auto repeat padding-box border-box add match-source"); |
| testComputed("mask", "none padding-box border-box", "none 0% 0% / auto repeat padding-box border-box add match-source"); |
| |
| // test mask-size |
| testComputed("mask", "none left top / auto", "none 0% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none left top / auto auto", "none 0% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none left top / 100%", "none 0% 0% / 100% repeat border-box border-box add match-source"); |
| testComputed("mask", "none left top / 0%", "none 0% 0% / 0% repeat border-box border-box add match-source"); |
| testComputed("mask", "none left top / auto 0%", "none 0% 0% / auto 0% repeat border-box border-box add match-source"); |
| testComputed("mask", "none left top / cover", "none 0% 0% / cover repeat border-box border-box add match-source"); |
| testComputed("mask", "none left top / contain", "none 0% 0% / contain repeat border-box border-box add match-source"); |
| testComputed("mask", "none left 20px top 10px / contain", "none 20px 10px / contain repeat border-box border-box add match-source"); |
| testComputed("mask", "none left 20px top / contain", "none 20px 0% / contain repeat border-box border-box add match-source"); |
| |
| // combinations |
| testComputed("mask", "none padding-box content-box", "none 0% 0% / auto repeat padding-box content-box add match-source"); |
| testComputed("mask", "none padding-box", "none 0% 0% / auto repeat padding-box padding-box add match-source"); |
| testComputed("mask", "none top", "none 50% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none center right 20px", "none right 20px 50% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none border-box left top", "none 0% 0% / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none border-box left top 20px", "none 0% 20px / auto repeat border-box border-box add match-source"); |
| testComputed("mask", "none border-box content-box left top repeat-x", "none 0% 0% / auto repeat-x border-box content-box add match-source"); |
| testComputed("mask", "none border-box content-box left top / auto repeat-x", "none 0% 0% / auto repeat-x border-box content-box add match-source"); |
| testComputed("mask", "none border-box content-box right 0px center / auto repeat-x", "none right 0px 50% / auto repeat-x border-box content-box add match-source"); |
| |
| // negative tests |
| negativeTest("mask", "top none left"); |
| negativeTest("mask", "right none bottom"); |
| negativeTest("mask", "right right"); |
| negativeTest("mask", "left left"); |
| negativeTest("mask", "top top"); |
| negativeTest("mask", "bottom bottom"); |
| negativeTest("mask", "50% none 50%"); |
| negativeTest("mask", "repeat-x repeat-x"); |
| negativeTest("mask", "space repeat-y"); |
| negativeTest("mask", "repeat space space"); |
| negativeTest("mask", "padding-box border-box content-box"); |
| negativeTest("mask", "none / auto"); |
| negativeTest("mask", "none repeat-x / auto"); |
| negativeTest("mask", "none border-box / auto"); |
| negativeTest("mask", "none top left / cover 100%"); |
| negativeTest("mask", "scroll"); |
| negativeTest("mask", "fixed"); |
| negativeTest("mask", "local"); |
| negativeTest("mask", "space scroll"); |
| negativeTest("mask", "none scroll"); |
| negativeTest("mask", "none top left / auto repeat-x scroll border-box border-box"); |
| negativeTest("mask", "right top left"); |
| negativeTest("mask", "center left center"); |
| negativeTest("mask", "center top center"); |
| negativeTest("mask", "center right bottom"); |
| negativeTest("mask", "top solid bottom"); |
| negativeTest("mask", "none top left right center top / auto repeat-x scroll border-box border-box"); |
| negativeTest("mask", "none center center 20px / auto repeat-x scroll border-box border-box"); |
| negativeTest("mask", "none top 20px right 30px center / auto repeat-x scroll border-box border-box"); |
| negativeTest("mask", "none top 20px top 30px / auto repeat-x scroll border-box border-box"); |
| negativeTest("mask", "none top 20px bottom / auto repeat-x scroll border-box border-box"); |
| negativeTest("mask", "none alpha, none match-source alpha"); |
| negativeTest("mask", "none alpha luminance"); |
| negativeTest("mask-mode", "auto"); |
| negativeTest("mask-mode", "rubbish"); |
| negativeTest("mask-mode", ""); |
| negativeTest("mask-mode", "center"); |
| negativeTest("mask-mode", "repeat"); |
| |
| // FIXME: mask-position-x and mask-position-y should not be exposed unprefixed. |
| negativeTest("mask-position-x", "left"); |
| negativeTest("mask-position-y", "top"); |
| |
| negativeTest("mask-repeat-x", "repeat"); |
| negativeTest("mask-repeat-y", "repeat"); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
