1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
<!DOCTYPE html>
<html>
<style>
* { font-size: 16px; }
div { font-size: 8px; }
</style>
<body>
<script src="../../resources/js-test.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, "");
// 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", "left top");
testInner("-webkit-mask", "bottom right", "right bottom");
testInner("-webkit-mask", "left bottom", "left bottom");
testInner("-webkit-mask", "right top", "right top");
testInner("-webkit-mask", "center", "center center");
testInner("-webkit-mask", "none top", "none center top");
testInner("-webkit-mask", "none bottom", "none center bottom");
testInner("-webkit-mask", "none right", "none right center");
testInner("-webkit-mask", "none top right", "none right top");
testInner("-webkit-mask", "none bottom left", "none left bottom");
testInner("-webkit-mask", "none right", "none right center");
testInner("-webkit-mask", "none left", "none left center");
testInner("-webkit-mask", "center 50%", "center 50%");
testInner("-webkit-mask", "50px 50%", "50px 50%");
testInner("-webkit-mask", "center left", "left center");
testInner("-webkit-mask", "top center", "center top");
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 top 15px");
testInner("-webkit-mask", "left 10px center", "left 10px center");
testInner("-webkit-mask", "center top 20px", "center top 20px");
testInner("-webkit-mask", "center left 30px", "left 30px center");
testInner("-webkit-mask", "left 20% top", "left 20% top");
testInner("-webkit-mask", "center center", "center center");
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 top 15px");
testInner("-webkit-mask-position", "left 10px center", "left 10px center");
testInner("-webkit-mask-position", "center top 20px", "center top 20px");
testInner("-webkit-mask-position", "center left 30px", "left 30px center");
testInner("-webkit-mask-position", "left 20% top", "left 20% top");
// test mask-source-type
testInner("mask-source-type", "alpha", "alpha");
testInner("mask-source-type", "luminance", "luminance");
testInner("mask-source-type", "auto", "auto");
testComputed("mask-source-type", "alpha", "alpha");
testComputed("mask-source-type", "auto", "alpha");
testComputed("mask-source-type", "luminance", "luminance");
testComputed("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 left top / auto");
testInner("-webkit-mask", "none left top / auto auto", "none left top / auto");
testInner("-webkit-mask", "none left top / 100%", "none left top / 100%");
testInner("-webkit-mask", "none left top / 100% 100%", "none left top / 100% 100%");
testInner("-webkit-mask", "none left top / 0%", "none left top / 0%");
testInner("-webkit-mask", "none left top / auto 0%", "none left top / auto 0%");
testInner("-webkit-mask", "none left top / cover", "none left top / cover");
testInner("-webkit-mask", "none left top / contain", "none left top / 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 / 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 center top");
testInner("-webkit-mask", "none center right 20px", "none right 20px center");
testInner("-webkit-mask", "none border-box left top", "none left top border-box border-box");
testInner("-webkit-mask", "none border-box left top 20px", "none left top 20px border-box border-box");
testInner("-webkit-mask", "none border-box content-box left top repeat-x", "none left top repeat-x border-box content-box");
testInner("-webkit-mask", "none border-box content-box left top / auto repeat-x", "none left top / auto repeat-x border-box content-box");
testInner("-webkit-mask", "none border-box content-box right 0px center / auto repeat-x", "none right 0px center / 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("mask-source-type", "rubbish");
negativeTest("mask-source-type", "");
negativeTest("mask-source-type", "center");
negativeTest("mask-source-type", "repeat");
</script>
</body>
</html>
|
