blob: 9ea398dd2afa0d460f92597d2fb829d276c5e995 [file] [log] [blame]
<!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");
testComputed("mask", "bottom right", "none");
testComputed("mask", "left bottom", "none");
testComputed("mask", "right top", "none");
testComputed("mask", "center", "none");
testComputed("mask", "none top", "none");
testComputed("mask", "none bottom", "none");
testComputed("mask", "none right", "none");
testComputed("mask", "none top right", "none");
testComputed("mask", "none bottom left", "none");
testComputed("mask", "none right", "none");
testComputed("mask", "none left", "none");
testComputed("mask", "center 50%", "none");
testComputed("mask", "50px 50%", "none");
testComputed("mask", "center left", "none");
testComputed("mask", "top center", "none");
testComputed("mask", "left 10px top 15px", "none");
testComputed("mask", "left 10% top 30%", "none");
testComputed("mask", "right top 15px", "none");
testComputed("mask", "left 10px center", "none");
testComputed("mask", "center top 20px", "none");
testComputed("mask", "center left 30px", "none");
testComputed("mask", "left 20% top", "none");
testComputed("mask", "center center", "none");
// test mask-repeat
testComputed("mask", "repeat-x", "none");
testComputed("mask", "repeat-y", "none");
testComputed("mask", "repeat", "none");
testComputed("mask", "space", "none");
testComputed("mask", "no-repeat", "none");
testComputed("mask", "repeat space", "none");
testComputed("mask", "repeat round", "none");
testComputed("mask", "repeat no-repeat", "none");
testComputed("mask", "repeat none", "none");
testComputed("mask", "none repeat", "none");
// test mask-origin / mask-clip
testComputed("mask", "padding-box", "none");
testComputed("mask", "border-box", "none");
testComputed("mask", "content-box", "none");
testComputed("mask", "padding-box none", "none");
testComputed("mask", "none padding-box", "none");
testComputed("mask", "padding-box content-box", "none");
testComputed("mask", "content-box content-box", "none");
testComputed("mask", "padding-box border-box", "none");
testComputed("mask", "padding-box border-box none", "none");
testComputed("mask", "none padding-box border-box", "none");
// test mask-size
testComputed("mask", "none left top / auto", "none");
testComputed("mask", "none left top / auto auto", "none");
testComputed("mask", "none left top / 100%", "none");
testComputed("mask", "none left top / 0%", "none");
testComputed("mask", "none left top / auto 0%", "none");
testComputed("mask", "none left top / cover", "none");
testComputed("mask", "none left top / contain", "none");
testComputed("mask", "none left 20px top 10px / contain", "none");
testComputed("mask", "none left 20px top / contain", "none");
// combinations
testComputed("mask", "none padding-box content-box", "none");
testComputed("mask", "none padding-box", "none");
testComputed("mask", "none top", "none");
testComputed("mask", "none center right 20px", "none");
testComputed("mask", "none border-box left top", "none");
testComputed("mask", "none border-box left top 20px", "none");
testComputed("mask", "none border-box content-box left top repeat-x", "none");
testComputed("mask", "none border-box content-box left top / auto repeat-x", "none");
testComputed("mask", "none border-box content-box right 0px center / auto repeat-x", "none");
// 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>