|
1 <html> |
|
2 |
|
3 <head> |
|
4 <title>Test for selection underline</title> |
|
5 <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> |
|
6 <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/WindowSnapshot.js"></script> |
|
7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> |
|
8 |
|
9 <script type="text/javascript"> |
|
10 |
|
11 // Canvas related code stolen from layout/base/tests/bidi_numeral_test.js which |
|
12 // stole from http://developer.mozilla.org/en/docs/Code_snippets:Canvas |
|
13 |
|
14 var RemoteCanvas = function(aIFrame, aTest) { |
|
15 this.iframe = aIFrame; |
|
16 this.test = aTest; |
|
17 this.snapshot = null; |
|
18 }; |
|
19 |
|
20 RemoteCanvas.CANVAS_WIDTH = 200; |
|
21 RemoteCanvas.CANVAS_HEIGHT = 100; |
|
22 |
|
23 RemoteCanvas.prototype.compare = function(otherCanvas, expected) { |
|
24 var ret = compareSnapshots(this.snapshot, otherCanvas.snapshot, expected); |
|
25 this.snapshotDataURL = ret[1]; |
|
26 otherCanvas.snapshotDataURL = ret[2]; |
|
27 return ret[0]; |
|
28 } |
|
29 |
|
30 RemoteCanvas.prototype.isReference = function() { |
|
31 return this.iframe && (this.iframe.id == "reference"); |
|
32 } |
|
33 |
|
34 RemoteCanvas.prototype.load = function(callback) { |
|
35 this.iframe.contentWindow.wrappedJSObject.init(this.test); |
|
36 var me = this; |
|
37 setTimeout(function () { me.remotePagePrepared(callback) }, 100); |
|
38 } |
|
39 |
|
40 RemoteCanvas.prototype.remotePagePrepared = function(callback) { |
|
41 this.snapshot = snapshotWindow(this.iframe.contentWindow); |
|
42 callback(this); |
|
43 } |
|
44 |
|
45 var gPrefs = [ |
|
46 { |
|
47 name: "ui.SpellCheckerUnderline", |
|
48 type: "char", |
|
49 newValue: "#ff0000" |
|
50 }, |
|
51 { |
|
52 name: "ui.IMERawInputBackground", |
|
53 type: "char", |
|
54 newValue: "transparent" |
|
55 }, |
|
56 { |
|
57 name: "ui.IMERawInputForeground", |
|
58 type: "char", |
|
59 newValue: "#000000" |
|
60 }, |
|
61 { |
|
62 name: "ui.IMERawInputUnderline", |
|
63 type: "char", |
|
64 newValue: "#00ff00" |
|
65 }, |
|
66 { |
|
67 name: "ui.IMESelectedRawTextBackground", |
|
68 type: "char", |
|
69 newValue: "transparent" |
|
70 }, |
|
71 { |
|
72 name: "ui.IMESelectedRawTextForeground", |
|
73 type: "char", |
|
74 newValue: "#000000" |
|
75 }, |
|
76 { |
|
77 name: "ui.IMESelectedRawTextUnderline", |
|
78 type: "char", |
|
79 newValue: "#0000ff" |
|
80 }, |
|
81 { |
|
82 name: "ui.IMEConvertedTextBackground", |
|
83 type: "char", |
|
84 newValue: "transparent" |
|
85 }, |
|
86 { |
|
87 name: "ui.IMEConvertedTextForeground", |
|
88 type: "char", |
|
89 newValue: "#000000" |
|
90 }, |
|
91 { |
|
92 name: "ui.IMEConvertedTextUnderline", |
|
93 type: "char", |
|
94 newValue: "#ffff00" |
|
95 }, |
|
96 { |
|
97 name: "ui.IMESelectedConvertedTextBackground", |
|
98 type: "char", |
|
99 newValue: "transparent" |
|
100 }, |
|
101 { |
|
102 name: "ui.IMESelectedConvertedTextForeground", |
|
103 type: "char", |
|
104 newValue: "#000000" |
|
105 }, |
|
106 { |
|
107 name: "ui.IMESelectedConvertedTextUnderline", |
|
108 type: "char", |
|
109 newValue: "#00ffff" |
|
110 }, |
|
111 { |
|
112 name: "ui.SpellCheckerUnderlineStyle", |
|
113 type: "int", |
|
114 newValue: 0 |
|
115 }, |
|
116 { |
|
117 name: "ui.IMERawInputUnderlineStyle", |
|
118 type: "int", |
|
119 newValue: 0 |
|
120 }, |
|
121 { |
|
122 name: "ui.IMESelectedRawTextUnderlineStyle", |
|
123 type: "int", |
|
124 newValue: 0 |
|
125 }, |
|
126 { |
|
127 name: "ui.IMEConvertedTextUnderlineStyle", |
|
128 type: "int", |
|
129 newValue: 0 |
|
130 }, |
|
131 { |
|
132 name: "ui.IMESelectedConvertedTextUnderlineStyle", |
|
133 type: "int", |
|
134 newValue: 0 |
|
135 }, |
|
136 { |
|
137 name: "ui.SpellCheckerUnderlineRelativeSize", |
|
138 type: "float", |
|
139 newValue: 1.0 |
|
140 }, |
|
141 { |
|
142 name: "ui.IMEUnderlineRelativeSize", |
|
143 type: "float", |
|
144 newValue: 1.0 |
|
145 } |
|
146 ]; |
|
147 |
|
148 const nsISelectionController = Components.interfaces.nsISelectionController; |
|
149 |
|
150 var gSelectionIndex = -1; |
|
151 const kSelections = [ |
|
152 { type: nsISelectionController.SELECTION_SPELLCHECK, |
|
153 typeName: "SpellCheck", isIME: false, |
|
154 decorationColor: "#ff0000" }, |
|
155 { type: nsISelectionController.SELECTION_IME_RAWINPUT, |
|
156 typeName: "IME-RawInput", isIME: true, |
|
157 decorationColor: "#00ff00" }, |
|
158 { type: nsISelectionController.SELECTION_IME_SELECTEDRAWTEXT, |
|
159 typeName: "IME-SelectedRawText", isIME: true, |
|
160 decorationColor: "#0000ff" }, |
|
161 { type: nsISelectionController.SELECTION_IME_CONVERTEDTEXT, |
|
162 typeName: "IME-ConvertedText", isIME: true, |
|
163 decorationColor: "#ffff00" }, |
|
164 { type: nsISelectionController.SELECTION_IME_SELECTEDCONVERTEDTEXT, |
|
165 typeName: "IME-SelectedConvertedText", isIME: true, |
|
166 decorationColor: "#00ffff" }, |
|
167 ]; |
|
168 |
|
169 const kFontName_Ahem = "AhemTest"; |
|
170 const kFontName_MPlus = "mplusTest"; |
|
171 |
|
172 var gFontIndex = 0; |
|
173 const kFonts = [ |
|
174 { family: kFontName_Ahem, defaultSize: 16 }, |
|
175 { family: kFontName_Ahem, defaultSize: 20 }, |
|
176 { family: kFontName_Ahem, defaultSize: 32 }, |
|
177 { family: kFontName_Ahem, defaultSize: 52 }, |
|
178 |
|
179 { family: kFontName_MPlus, defaultSize: 16 }, |
|
180 { family: kFontName_MPlus, defaultSize: 20 }, |
|
181 { family: kFontName_MPlus, defaultSize: 32 }, |
|
182 { family: kFontName_MPlus, defaultSize: 52 }, |
|
183 ]; |
|
184 |
|
185 const kDecorationStyleNone = 0; |
|
186 const kDecorationStyleDotted = 1; |
|
187 const kDecorationStyleDashed = 2; |
|
188 const kDecorationStyleSolid = 3; |
|
189 const kDecorationStyleDouble = 4; |
|
190 const kDecorationStyleWavy = 5; |
|
191 |
|
192 var gDecorationIndex = 0; |
|
193 const kDecorations = [ |
|
194 { relativeSize: 1.0, style: kDecorationStyleNone, styleName: "-moz-none" }, |
|
195 { relativeSize: 1.0, style: kDecorationStyleSolid, styleName: "solid" }, |
|
196 { relativeSize: 1.0, style: kDecorationStyleDotted, styleName: "dotted" }, |
|
197 { relativeSize: 1.0, style: kDecorationStyleDashed, styleName: "dashed" }, |
|
198 { relativeSize: 1.0, style: kDecorationStyleDouble, styleName: "double" }, |
|
199 { relativeSize: 1.0, style: kDecorationStyleWavy, styleName: "wavy" }, |
|
200 |
|
201 // XXX relativeSize 2.0 cannot be tested by CSS3 text-decoration |
|
202 |
|
203 ]; |
|
204 |
|
205 function run() |
|
206 { |
|
207 if (++gSelectionIndex == kSelections.length) { |
|
208 if (++gFontIndex == kFonts.length) { |
|
209 if (++gDecorationIndex == kDecorations.length) { |
|
210 SimpleTest.finish(); |
|
211 cleanup(); |
|
212 return; |
|
213 } |
|
214 gFontIndex = 0; |
|
215 } |
|
216 gSelectionIndex = 0; |
|
217 SpecialPowers.setIntPref("font.size.variable.x-western", |
|
218 kFonts[gFontIndex].defaultSize); |
|
219 } |
|
220 |
|
221 var test = { |
|
222 font: kFonts[gFontIndex], |
|
223 decoration: kDecorations[gDecorationIndex], |
|
224 selection: kSelections[gSelectionIndex], |
|
225 }; |
|
226 |
|
227 SpecialPowers.setIntPref("ui.SpellCheckerUnderlineRelativeSize", |
|
228 test.decoration.relativeSize * 100); |
|
229 SpecialPowers.setIntPref("ui.IMEUnderlineRelativeSize", |
|
230 test.decoration.relativeSize * 100); |
|
231 SpecialPowers.setIntPref("ui.SpellCheckerUnderlineStyle", |
|
232 test.decoration.style); |
|
233 SpecialPowers.setIntPref("ui.IMERawInputUnderlineStyle", |
|
234 test.decoration.style); |
|
235 SpecialPowers.setIntPref("ui.IMESelectedRawTextUnderlineStyle", |
|
236 test.decoration.style); |
|
237 SpecialPowers.setIntPref("ui.IMEConvertedTextUnderlineStyle", |
|
238 test.decoration.style); |
|
239 SpecialPowers.setIntPref("ui.IMESelectedConvertedTextUnderlineStyle", |
|
240 test.decoration.style); |
|
241 |
|
242 SimpleTest.executeSoon(function () { doTest(test); }); |
|
243 } |
|
244 |
|
245 function doTest(aTest) |
|
246 { |
|
247 |
|
248 var canvases = []; |
|
249 function callbackTestCanvas(canvas) |
|
250 { |
|
251 canvases.push(canvas); |
|
252 |
|
253 if (canvases.length != 2) |
|
254 return; |
|
255 |
|
256 var result = !canvases[0].isReference() ? canvases[0] : canvases[1]; |
|
257 var reference = canvases[0].isReference() ? canvases[0] : canvases[1]; |
|
258 |
|
259 var description = "Rendering of reftest (" + |
|
260 "selection: " + aTest.selection.typeName + |
|
261 ", style: " + aTest.decoration.styleName + |
|
262 ", relativeSize: " + aTest.decoration.relativeSize + |
|
263 ", font: " + aTest.font.family + |
|
264 ", default font size: " + aTest.font.defaultSize + |
|
265 ") is different\n" + |
|
266 "RESULT=" + result.snapshotDataURL + "\n" + |
|
267 "REFERENCE=" + reference.snapshotDataURL + "\n"; |
|
268 |
|
269 if (result.compare(reference, true)) { |
|
270 ok(true, description); |
|
271 // If the decoration line is thick and the descender of the text isn't |
|
272 // enough for containing it, selection underline may be painted lower |
|
273 // if it's possible. Then, we cannot test it with CSS3 text-decoration. |
|
274 } else if (aTest.decoration.style == kDecorationStyleDouble || |
|
275 aTest.decoration.style == kDecorationStyleWavy) { |
|
276 todo(false, description); |
|
277 } else { |
|
278 ok(false, description); |
|
279 } |
|
280 |
|
281 canvases = []; |
|
282 |
|
283 run(); |
|
284 } |
|
285 |
|
286 var testCanvas = new RemoteCanvas(document.getElementById("result"), aTest); |
|
287 testCanvas.load(callbackTestCanvas); |
|
288 |
|
289 var refCanvas = new RemoteCanvas(document.getElementById("reference"), aTest); |
|
290 refCanvas.load(callbackTestCanvas); |
|
291 } |
|
292 |
|
293 function onLoad() |
|
294 { |
|
295 for (var i = 0; i < gPrefs.length; i++) { |
|
296 if (gPrefs[i].type == "char") { |
|
297 SpecialPowers.setCharPref(gPrefs[i].name, gPrefs[i].newValue); |
|
298 } else if (gPrefs[i].type == "int") { |
|
299 SpecialPowers.setIntPref(gPrefs[i].name, gPrefs[i].newValue); |
|
300 } else if (gPrefs[i].type == "float") { |
|
301 SpecialPowers.setIntPref(gPrefs[i].name, gPrefs[i].newValue * 100); |
|
302 } |
|
303 } |
|
304 |
|
305 var iframe = document.getElementById("result"); |
|
306 iframe.width = RemoteCanvas.CANVAS_WIDTH + "px"; |
|
307 iframe.height = RemoteCanvas.CANVAS_HEIGHT + "px"; |
|
308 iframe = document.getElementById("reference"); |
|
309 iframe.width = RemoteCanvas.CANVAS_WIDTH + "px"; |
|
310 iframe.height = RemoteCanvas.CANVAS_HEIGHT + "px"; |
|
311 |
|
312 run(); |
|
313 } |
|
314 |
|
315 function cleanup() |
|
316 { |
|
317 SpecialPowers.clearUserPref("font.size.variable.x-western"); |
|
318 for (var i = 0; i < gPrefs.length; i++) { |
|
319 SpecialPowers.clearUserPref(gPrefs[i].name); |
|
320 } |
|
321 } |
|
322 |
|
323 SimpleTest.waitForExplicitFinish(); |
|
324 SimpleTest.waitForFocus(onLoad, window); |
|
325 |
|
326 </script> |
|
327 |
|
328 </head> |
|
329 <body> |
|
330 |
|
331 <iframe src="frame_selection_underline.xhtml" id="result"></iframe> |
|
332 <iframe src="frame_selection_underline-ref.xhtml" id="reference"></iframe> |
|
333 <pre id="test"> |
|
334 </pre> |
|
335 |
|
336 </body> |
|
337 </html> |