OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <style> | 3 <style> |
4 * { font-size: 16px; } | 4 * { font-size: 16px; } |
5 div { font-size: 8px; } | 5 div { font-size: 8px; } |
6 </style> | 6 </style> |
7 <body> | 7 <body> |
8 <script src="../../resources/js-test.js"></script> | 8 <script src="../../resources/js-test.js"></script> |
9 <script> | 9 <script> |
10 description('Test that clip-path shapes accept different length units'); | 10 description('Test that clip-path shapes accept different length units'); |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
43 | 43 |
44 // test mask-image | 44 // test mask-image |
45 testInner("-webkit-mask", "none", "none"); | 45 testInner("-webkit-mask", "none", "none"); |
46 testInner("-webkit-mask", "none, none", "none, none"); | 46 testInner("-webkit-mask", "none, none", "none, none"); |
47 testInner("-webkit-mask", "none, none, none", "none, none, none"); | 47 testInner("-webkit-mask", "none, none, none", "none, none, none"); |
48 testInner("-webkit-mask", "url(file:///image.png), none", 'url("file:///image.pn
g"), none'); | 48 testInner("-webkit-mask", "url(file:///image.png), none", 'url("file:///image.pn
g"), none'); |
49 testInner("-webkit-mask", "none, url(file:///image.png)", 'none, url("file:///im
age.png")'); | 49 testInner("-webkit-mask", "none, url(file:///image.png)", 'none, url("file:///im
age.png")'); |
50 | 50 |
51 | 51 |
52 // test mask-position | 52 // test mask-position |
53 testInner("-webkit-mask", "top left", "0% 0%"); | 53 testInner("-webkit-mask", "top left", "left top"); |
54 testInner("-webkit-mask", "bottom right", "100% 100%"); | 54 testInner("-webkit-mask", "bottom right", "right bottom"); |
55 testInner("-webkit-mask", "left bottom", "0% 100%"); | 55 testInner("-webkit-mask", "left bottom", "left bottom"); |
56 testInner("-webkit-mask", "right top", "100% 0%"); | 56 testInner("-webkit-mask", "right top", "right top"); |
57 testInner("-webkit-mask", "center", "50% 50%"); | 57 testInner("-webkit-mask", "center", "center center"); |
58 testInner("-webkit-mask", "none top", "none 50% 0%"); | 58 testInner("-webkit-mask", "none top", "none center top"); |
59 testInner("-webkit-mask", "none bottom", "none 50% 100%"); | 59 testInner("-webkit-mask", "none bottom", "none center bottom"); |
60 testInner("-webkit-mask", "none right", "none 100% 50%"); | 60 testInner("-webkit-mask", "none right", "none right center"); |
61 testInner("-webkit-mask", "none top right", "none 100% 0%"); | 61 testInner("-webkit-mask", "none top right", "none right top"); |
62 testInner("-webkit-mask", "none bottom left", "none 0% 100%"); | 62 testInner("-webkit-mask", "none bottom left", "none left bottom"); |
63 testInner("-webkit-mask", "none right", "none 100% 50%"); | 63 testInner("-webkit-mask", "none right", "none right center"); |
64 testInner("-webkit-mask", "none left", "none 0% 50%"); | 64 testInner("-webkit-mask", "none left", "none left center"); |
65 testInner("-webkit-mask", "center 50%", "50% 50%"); | 65 testInner("-webkit-mask", "center 50%", "center 50%"); |
66 testInner("-webkit-mask", "50px 50%", "50px 50%"); | 66 testInner("-webkit-mask", "50px 50%", "50px 50%"); |
67 testInner("-webkit-mask", "center left", "0% 50%"); | 67 testInner("-webkit-mask", "center left", "left center"); |
68 testInner("-webkit-mask", "top center", "50% 0%"); | 68 testInner("-webkit-mask", "top center", "center top"); |
69 testInner("-webkit-mask", "left 10px top 15px", "left 10px top 15px"); | 69 testInner("-webkit-mask", "left 10px top 15px", "left 10px top 15px"); |
70 testInner("-webkit-mask", "left 10% top 30%", "left 10% top 30%"); | 70 testInner("-webkit-mask", "left 10% top 30%", "left 10% top 30%"); |
71 testInner("-webkit-mask", "right top 15px", "right 0% top 15px"); | 71 testInner("-webkit-mask", "right top 15px", "right top 15px"); |
72 testInner("-webkit-mask", "left 10px center", "left 10px top 50%"); | 72 testInner("-webkit-mask", "left 10px center", "left 10px center"); |
73 testInner("-webkit-mask", "center top 20px", "left 50% top 20px"); | 73 testInner("-webkit-mask", "center top 20px", "center top 20px"); |
74 testInner("-webkit-mask", "center left 30px", "left 30px top 50%"); | 74 testInner("-webkit-mask", "center left 30px", "left 30px center"); |
75 testInner("-webkit-mask", "left 20% top", "left 20% top 0%"); | 75 testInner("-webkit-mask", "left 20% top", "left 20% top"); |
76 testInner("-webkit-mask", "center center", "50% 50%"); | 76 testInner("-webkit-mask", "center center", "center center"); |
77 | 77 |
78 testInner("-webkit-mask-position", "left 10px top 15px", "left 10px top 15px"); | 78 testInner("-webkit-mask-position", "left 10px top 15px", "left 10px top 15px"); |
79 testInner("-webkit-mask-position", "left 10% top 30%", "left 10% top 30%"); | 79 testInner("-webkit-mask-position", "left 10% top 30%", "left 10% top 30%"); |
80 testInner("-webkit-mask-position", "right top 15px", "right top 15px"); | 80 testInner("-webkit-mask-position", "right top 15px", "right top 15px"); |
81 testInner("-webkit-mask-position", "left 10px center", "left 10px center"); | 81 testInner("-webkit-mask-position", "left 10px center", "left 10px center"); |
82 testInner("-webkit-mask-position", "center top 20px", "center top 20px"); | 82 testInner("-webkit-mask-position", "center top 20px", "center top 20px"); |
83 testInner("-webkit-mask-position", "center left 30px", "left 30px center"); | 83 testInner("-webkit-mask-position", "center left 30px", "left 30px center"); |
84 testInner("-webkit-mask-position", "left 20% top", "left 20% top"); | 84 testInner("-webkit-mask-position", "left 20% top", "left 20% top"); |
85 | 85 |
86 // test mask-source-type | 86 // test mask-source-type |
(...skipping 24 matching lines...) Expand all Loading... |
111 testInner("-webkit-mask", "content-box", "content-box content-box"); | 111 testInner("-webkit-mask", "content-box", "content-box content-box"); |
112 testInner("-webkit-mask", "padding-box none", "none padding-box padding-box"); | 112 testInner("-webkit-mask", "padding-box none", "none padding-box padding-box"); |
113 testInner("-webkit-mask", "none padding-box", "none padding-box padding-box"); | 113 testInner("-webkit-mask", "none padding-box", "none padding-box padding-box"); |
114 testInner("-webkit-mask", "padding-box content-box", "padding-box content-box"); | 114 testInner("-webkit-mask", "padding-box content-box", "padding-box content-box"); |
115 testInner("-webkit-mask", "content-box content-box", "content-box content-box"); | 115 testInner("-webkit-mask", "content-box content-box", "content-box content-box"); |
116 testInner("-webkit-mask", "padding-box border-box", "padding-box border-box"); | 116 testInner("-webkit-mask", "padding-box border-box", "padding-box border-box"); |
117 testInner("-webkit-mask", "padding-box border-box none", "none padding-box borde
r-box"); | 117 testInner("-webkit-mask", "padding-box border-box none", "none padding-box borde
r-box"); |
118 testInner("-webkit-mask", "none padding-box border-box", "none padding-box borde
r-box"); | 118 testInner("-webkit-mask", "none padding-box border-box", "none padding-box borde
r-box"); |
119 | 119 |
120 // test mask-size | 120 // test mask-size |
121 testInner("-webkit-mask", "none left top / auto", "none 0% 0% / auto"); | 121 testInner("-webkit-mask", "none left top / auto", "none left top / auto"); |
122 testInner("-webkit-mask", "none left top / auto auto", "none 0% 0% / auto"); | 122 testInner("-webkit-mask", "none left top / auto auto", "none left top / auto"); |
123 testInner("-webkit-mask", "none left top / 100%", "none 0% 0% / 100%"); | 123 testInner("-webkit-mask", "none left top / 100%", "none left top / 100%"); |
124 testInner("-webkit-mask", "none left top / 100% 100%", "none 0% 0% / 100% 100%")
; | 124 testInner("-webkit-mask", "none left top / 100% 100%", "none left top / 100% 100
%"); |
125 testInner("-webkit-mask", "none left top / 0%", "none 0% 0% / 0%"); | 125 testInner("-webkit-mask", "none left top / 0%", "none left top / 0%"); |
126 testInner("-webkit-mask", "none left top / auto 0%", "none 0% 0% / auto 0%"); | 126 testInner("-webkit-mask", "none left top / auto 0%", "none left top / auto 0%"); |
127 testInner("-webkit-mask", "none left top / cover", "none 0% 0% / cover"); | 127 testInner("-webkit-mask", "none left top / cover", "none left top / cover"); |
128 testInner("-webkit-mask", "none left top / contain", "none 0% 0% / contain"); | 128 testInner("-webkit-mask", "none left top / contain", "none left top / contain"); |
129 testInner("-webkit-mask", "none left 20px top 10px / contain", "none left 20px t
op 10px / contain"); | 129 testInner("-webkit-mask", "none left 20px top 10px / contain", "none left 20px t
op 10px / contain"); |
130 testInner("-webkit-mask", "none left 20px top / contain", "none left 20px top 0%
/ contain"); | 130 testInner("-webkit-mask", "none left 20px top / contain", "none left 20px top /
contain"); |
131 | 131 |
132 // combinations | 132 // combinations |
133 testInner("-webkit-mask", "none padding-box content-box", "none padding-box cont
ent-box"); | 133 testInner("-webkit-mask", "none padding-box content-box", "none padding-box cont
ent-box"); |
134 testInner("-webkit-mask", "none padding-box", "none padding-box padding-box"); | 134 testInner("-webkit-mask", "none padding-box", "none padding-box padding-box"); |
135 testInner("-webkit-mask", "none top", "none 50% 0%"); | 135 testInner("-webkit-mask", "none top", "none center top"); |
136 testInner("-webkit-mask", "none center right 20px", "none right 20px top 50%"); | 136 testInner("-webkit-mask", "none center right 20px", "none right 20px center"); |
137 testInner("-webkit-mask", "none border-box left top", "none 0% 0% border-box bor
der-box"); | 137 testInner("-webkit-mask", "none border-box left top", "none left top border-box
border-box"); |
138 testInner("-webkit-mask", "none border-box left top 20px", "none left 0% top 20p
x border-box border-box"); | 138 testInner("-webkit-mask", "none border-box left top 20px", "none left top 20px b
order-box border-box"); |
139 testInner("-webkit-mask", "none border-box content-box left top repeat-x", "none
0% 0% repeat-x border-box content-box"); | 139 testInner("-webkit-mask", "none border-box content-box left top repeat-x", "none
left top repeat-x border-box content-box"); |
140 testInner("-webkit-mask", "none border-box content-box left top / auto repeat-x"
, "none 0% 0% / auto repeat-x border-box content-box"); | 140 testInner("-webkit-mask", "none border-box content-box left top / auto repeat-x"
, "none left top / auto repeat-x border-box content-box"); |
141 testInner("-webkit-mask", "none border-box content-box right 0px center / auto r
epeat-x", "none right 0px top 50% / auto repeat-x border-box content-box"); | 141 testInner("-webkit-mask", "none border-box content-box right 0px center / auto r
epeat-x", "none right 0px center / auto repeat-x border-box content-box"); |
142 | 142 |
143 // FIXME: Computed style not yet implemented. | 143 // FIXME: Computed style not yet implemented. |
144 // testComputed("-webkit-mask", "", ""); | 144 // testComputed("-webkit-mask", "", ""); |
145 // https://bugs.webkit.org/show_bug.cgi?id=103021 | 145 // https://bugs.webkit.org/show_bug.cgi?id=103021 |
146 | 146 |
147 // negative tests | 147 // negative tests |
148 negativeTest("-webkit-mask", "top none left"); | 148 negativeTest("-webkit-mask", "top none left"); |
149 negativeTest("-webkit-mask", "right none bottom"); | 149 negativeTest("-webkit-mask", "right none bottom"); |
150 negativeTest("-webkit-mask", "right right"); | 150 negativeTest("-webkit-mask", "right right"); |
151 negativeTest("-webkit-mask", "left left"); | 151 negativeTest("-webkit-mask", "left left"); |
(...skipping 26 matching lines...) Expand all Loading... |
178 negativeTest("-webkit-mask", "none top 20px bottom / auto repeat-x scroll border
-box border-box"); | 178 negativeTest("-webkit-mask", "none top 20px bottom / auto repeat-x scroll border
-box border-box"); |
179 | 179 |
180 negativeTest("mask-source-type", "rubbish"); | 180 negativeTest("mask-source-type", "rubbish"); |
181 negativeTest("mask-source-type", ""); | 181 negativeTest("mask-source-type", ""); |
182 negativeTest("mask-source-type", "center"); | 182 negativeTest("mask-source-type", "center"); |
183 negativeTest("mask-source-type", "repeat"); | 183 negativeTest("mask-source-type", "repeat"); |
184 | 184 |
185 </script> | 185 </script> |
186 </body> | 186 </body> |
187 </html> | 187 </html> |
OLD | NEW |