Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(8)

Side by Side Diff: third_party/WebKit/LayoutTests/fast/masking/parsing-mask.html

Issue 1676513003: Move background/webkit-mask shorthands into CSSPropertyParser (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix review issues Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698