test_selection_underline.html (7601B)
1 <html> 2 3 <head> 4 <title>Test for selection underline</title> 5 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="chrome://mochikit/content/tests/SimpleTest/WindowSnapshot.js"></script> 7 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/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.isReference = function() { 24 return this.iframe && (this.iframe.id == "reference"); 25 } 26 27 RemoteCanvas.prototype.load = function(callback) { 28 this.iframe.contentWindow.wrappedJSObject.init(this.test); 29 var me = this; 30 setTimeout(function () { me.remotePagePrepared(callback) }, 100); 31 } 32 33 RemoteCanvas.prototype.remotePagePrepared = function(callback) { 34 this.snapshot = snapshotWindow(this.iframe.contentWindow); 35 callback(this); 36 } 37 38 var gPrefs = [ 39 [ "ui.SpellCheckerUnderline", "#ff0000" ], 40 [ "ui.IMERawInputBackground", "transparent" ], 41 [ "ui.IMERawInputForeground", "#000000" ], 42 [ "ui.IMERawInputUnderline", "#00ff00" ], 43 [ "ui.IMESelectedRawTextBackground", "transparent" ], 44 [ "ui.IMESelectedRawTextForeground", "#000000" ], 45 [ "ui.IMESelectedRawTextUnderline", "#0000ff" ], 46 [ "ui.IMEConvertedTextBackground", "transparent" ], 47 [ "ui.IMEConvertedTextForeground", "#000000" ], 48 [ "ui.IMEConvertedTextUnderline", "#ffff00" ], 49 [ "ui.IMESelectedConvertedTextBackground", "transparent" ], 50 [ "ui.IMESelectedConvertedTextForeground", "#000000" ], 51 [ "ui.IMESelectedConvertedTextUnderline", "#00ffff" ], 52 [ "ui.SpellCheckerUnderlineStyle", 0 ], 53 [ "ui.IMERawInputUnderlineStyle", 0 ], 54 [ "ui.IMESelectedRawTextUnderlineStyle", 0 ], 55 [ "ui.IMEConvertedTextUnderlineStyle", 0 ], 56 [ "ui.IMESelectedConvertedTextUnderlineStyle", 0 ], 57 [ "ui.SpellCheckerUnderlineRelativeSize", 1.0 ], 58 [ "ui.IMEUnderlineRelativeSize", 1.0 ] 59 ]; 60 61 const nsISelectionController = Ci.nsISelectionController; 62 63 var gSelectionIndex = -1; 64 const kSelections = [ 65 { type: nsISelectionController.SELECTION_SPELLCHECK, 66 typeName: "SpellCheck", isIME: false, 67 decorationColor: "#ff0000" }, 68 { type: nsISelectionController.SELECTION_IME_RAWINPUT, 69 typeName: "IME-RawInput", isIME: true, 70 decorationColor: "#00ff00" }, 71 { type: nsISelectionController.SELECTION_IME_SELECTEDRAWTEXT, 72 typeName: "IME-SelectedRawText", isIME: true, 73 decorationColor: "#0000ff" }, 74 { type: nsISelectionController.SELECTION_IME_CONVERTEDTEXT, 75 typeName: "IME-ConvertedText", isIME: true, 76 decorationColor: "#ffff00" }, 77 { type: nsISelectionController.SELECTION_IME_SELECTEDCONVERTEDTEXT, 78 typeName: "IME-SelectedConvertedText", isIME: true, 79 decorationColor: "#00ffff" }, 80 ]; 81 82 const kFontName_Ahem = "AhemTest"; 83 const kFontName_MPlus = "mplusTest"; 84 85 var gFontIndex = 0; 86 const kFonts = [ 87 { family: kFontName_Ahem, defaultSize: 16 }, 88 { family: kFontName_Ahem, defaultSize: 20 }, 89 { family: kFontName_Ahem, defaultSize: 32 }, 90 { family: kFontName_Ahem, defaultSize: 52 }, 91 92 { family: kFontName_MPlus, defaultSize: 16 }, 93 { family: kFontName_MPlus, defaultSize: 20 }, 94 { family: kFontName_MPlus, defaultSize: 32 }, 95 { family: kFontName_MPlus, defaultSize: 52 }, 96 ]; 97 98 const kDecorationStyleNone = 0; 99 const kDecorationStyleDotted = 1; 100 const kDecorationStyleDashed = 2; 101 const kDecorationStyleSolid = 3; 102 const kDecorationStyleDouble = 4; 103 const kDecorationStyleWavy = 5; 104 105 var gDecorationIndex = 0; 106 const kDecorations = [ 107 { relativeSize: 1.0, style: kDecorationStyleNone, styleName: "-moz-none" }, 108 { relativeSize: 1.0, style: kDecorationStyleSolid, styleName: "solid" }, 109 { relativeSize: 1.0, style: kDecorationStyleDotted, styleName: "dotted" }, 110 { relativeSize: 1.0, style: kDecorationStyleDashed, styleName: "dashed" }, 111 { relativeSize: 1.0, style: kDecorationStyleDouble, styleName: "double" }, 112 { relativeSize: 1.0, style: kDecorationStyleWavy, styleName: "wavy" }, 113 114 // XXX relativeSize 2.0 cannot be tested by CSS3 text-decoration 115 116 ]; 117 118 function getFuzz(test) { 119 return null; 120 } 121 122 async function run() 123 { 124 let prefs = []; 125 if (++gSelectionIndex == kSelections.length) { 126 if (++gFontIndex == kFonts.length) { 127 if (++gDecorationIndex == kDecorations.length) { 128 SimpleTest.finish(); 129 return; 130 } 131 gFontIndex = 0; 132 } 133 gSelectionIndex = 0; 134 prefs.push([ "font.size.variable.x-western", kFonts[gFontIndex].defaultSize ]); 135 } 136 137 var test = { 138 font: kFonts[gFontIndex], 139 decoration: kDecorations[gDecorationIndex], 140 selection: kSelections[gSelectionIndex], 141 }; 142 143 prefs.push( 144 ["ui.SpellCheckerUnderlineRelativeSize", test.decoration.relativeSize * 100], 145 ["ui.IMEUnderlineRelativeSize", test.decoration.relativeSize * 100], 146 ["ui.SpellCheckerUnderlineStyle", test.decoration.style], 147 ["ui.IMERawInputUnderlineStyle", test.decoration.style], 148 ["ui.IMESelectedRawTextUnderlineStyle", test.decoration.style], 149 ["ui.IMEConvertedTextUnderlineStyle", test.decoration.style], 150 ["ui.IMESelectedConvertedTextUnderlineStyle", test.decoration.style], 151 ); 152 153 await SpecialPowers.pushPrefEnv({ set: prefs }); 154 doTest(test); 155 } 156 157 function doTest(aTest) 158 { 159 160 var canvases = []; 161 function callbackTestCanvas(canvas) 162 { 163 canvases.push(canvas); 164 165 if (canvases.length != 2) 166 return; 167 168 var result = !canvases[0].isReference() ? canvases[0] : canvases[1]; 169 var reference = canvases[0].isReference() ? canvases[0] : canvases[1]; 170 171 var description = "(selection: " + aTest.selection.typeName + 172 ", style: " + aTest.decoration.styleName + 173 ", relativeSize: " + aTest.decoration.relativeSize + 174 ", font: " + aTest.font.family + 175 ", default font size: " + aTest.font.defaultSize + ")"; 176 177 // If the decoration line is thick and the descender of the text isn't 178 // enough for containing it, selection underline may be painted lower 179 // if it's possible. Then, we cannot test it with CSS3 text-decoration. 180 if (aTest.decoration.style == kDecorationStyleDouble || 181 aTest.decoration.style == kDecorationStyleWavy) { 182 todo(false, "Rendering of" + description); 183 } else { 184 assertSnapshots(result.snapshot, reference.snapshot, true, 185 getFuzz(aTest), description, ""); 186 } 187 188 canvases = []; 189 190 run(); 191 } 192 193 var testCanvas = new RemoteCanvas(document.getElementById("result"), aTest); 194 testCanvas.load(callbackTestCanvas); 195 196 var refCanvas = new RemoteCanvas(document.getElementById("reference"), aTest); 197 refCanvas.load(callbackTestCanvas); 198 } 199 200 async function onLoad() 201 { 202 await SpecialPowers.pushPrefEnv({ set: gPrefs }); 203 204 var iframe = document.getElementById("result"); 205 iframe.width = RemoteCanvas.CANVAS_WIDTH + "px"; 206 iframe.height = RemoteCanvas.CANVAS_HEIGHT + "px"; 207 iframe = document.getElementById("reference"); 208 iframe.width = RemoteCanvas.CANVAS_WIDTH + "px"; 209 iframe.height = RemoteCanvas.CANVAS_HEIGHT + "px"; 210 211 run(); 212 } 213 214 SimpleTest.waitForExplicitFinish(); 215 SimpleTest.waitForFocus(onLoad, window); 216 217 </script> 218 219 </head> 220 <body> 221 222 <iframe src="frame_selection_underline.xhtml" id="result"></iframe> 223 <iframe src="frame_selection_underline-ref.xhtml" id="reference"></iframe> 224 <pre id="test"> 225 </pre> 226 227 </body> 228 </html>