browser_style_utils_getFontPreviewData.js (6105B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that getFontPreviewData of the style utils generates font previews. 7 8 const TEST_URI = "data:text/html,<title>Test getFontPreviewData</title>"; 9 10 add_task(async function () { 11 await addTab(TEST_URI); 12 13 await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () { 14 const { require } = ChromeUtils.importESModule( 15 "resource://devtools/shared/loader/Loader.sys.mjs" 16 ); 17 const { 18 getFontPreviewData, 19 } = require("resource://devtools/server/actors/utils/style-utils.js"); 20 21 const font = Services.appinfo.OS === "WINNT" ? "Arial" : "Liberation Sans"; 22 let fontPreviewData = getFontPreviewData(font, content.document); 23 ok( 24 fontPreviewData?.dataURL, 25 "Returned a font preview with a valid dataURL" 26 ); 27 is( 28 fontPreviewData.ctx.font, 29 `40px ${Services.appinfo.OS === "WINNT" ? "Arial" : `"Liberation Sans"`}, serif`, 30 "Expected font style was used in the canvas" 31 ); 32 33 // Create <img> element and load the generated preview into it 34 // to check whether the image is valid and get its dimensions 35 const image = content.document.createElement("img"); 36 let imageLoaded = new Promise(loaded => 37 image.addEventListener("load", loaded, { once: true }) 38 ); 39 image.src = fontPreviewData.dataURL; 40 await imageLoaded; 41 42 const { naturalWidth: widthImage1, naturalHeight: heightImage1 } = image; 43 44 Assert.greater(widthImage1, 0, "Preview width is greater than 0"); 45 Assert.greater(heightImage1, 0, "Preview height is greater than 0"); 46 47 // Create a preview with different text and compare 48 // its dimensions with the first one 49 fontPreviewData = getFontPreviewData(font, content.document, { 50 previewText: "Abcdef", 51 }); 52 53 ok( 54 fontPreviewData?.dataURL, 55 "Returned a font preview with a valid dataURL" 56 ); 57 58 imageLoaded = new Promise(loaded => 59 image.addEventListener("load", loaded, { once: true }) 60 ); 61 image.src = fontPreviewData.dataURL; 62 await imageLoaded; 63 64 const { naturalWidth: widthImage2, naturalHeight: heightImage2 } = image; 65 66 // Check whether the width is greater than with the default parameters 67 // and that the height is the same 68 Assert.greater( 69 widthImage2, 70 widthImage1, 71 "Preview width is greater than with default parameters" 72 ); 73 Assert.strictEqual( 74 heightImage2, 75 heightImage1, 76 "Preview height is the same as with default parameters" 77 ); 78 79 // Create a preview with smaller font size and compare 80 // its dimensions with the first one 81 fontPreviewData = getFontPreviewData(font, content.document, { 82 previewFontSize: 20, 83 }); 84 85 ok( 86 fontPreviewData?.dataURL, 87 "Returned a font preview with a valid dataURL" 88 ); 89 90 imageLoaded = new Promise(loaded => 91 image.addEventListener("load", loaded, { once: true }) 92 ); 93 image.src = fontPreviewData.dataURL; 94 await imageLoaded; 95 96 const { naturalWidth: widthImage3, naturalHeight: heightImage3 } = image; 97 98 // Check whether the width and height are smaller than with the default parameters 99 Assert.less( 100 widthImage3, 101 widthImage1, 102 "Preview width is smaller than with default parameters" 103 ); 104 Assert.less( 105 heightImage3, 106 heightImage1, 107 "Preview height is smaller than with default parameters" 108 ); 109 110 // Create a preview with multiple lines and compare 111 // its dimensions with the first one 112 fontPreviewData = getFontPreviewData(font, content.document, { 113 previewText: "Abc\ndef", 114 }); 115 116 ok( 117 fontPreviewData?.dataURL, 118 "Returned a font preview with a valid dataURL" 119 ); 120 121 imageLoaded = new Promise(loaded => 122 image.addEventListener("load", loaded, { once: true }) 123 ); 124 image.src = fontPreviewData.dataURL; 125 await imageLoaded; 126 127 const { naturalWidth: widthImage4, naturalHeight: heightImage4 } = image; 128 129 // Check whether the width is the same as with the default parameters 130 // and that the height is greater 131 Assert.strictEqual( 132 widthImage4, 133 widthImage1, 134 "Preview width is the same as with default parameters" 135 ); 136 Assert.greater( 137 heightImage4, 138 heightImage1, 139 "Preview height is greater than with default parameters" 140 ); 141 142 // Check generic family name 143 is( 144 getFontPreviewData("monospace", content.document).ctx.font, 145 `40px monospace, serif`, 146 "Expected font style was used in the canvas" 147 ); 148 149 // Check font wrapped in double quotes 150 is( 151 getFontPreviewData(`"Zilla Bold"`, content.document).ctx.font, 152 `40px "Zilla Bold", serif`, 153 "Expected font style was used in the canvas" 154 ); 155 156 // Check font wrapped in simple quotes 157 is( 158 getFontPreviewData(`'Font Awesome 5 Brands'`, content.document).ctx.font, 159 `40px "Font Awesome 5 Brands", serif`, 160 "Expected font style was used in the canvas" 161 ); 162 163 // Check multiple font 164 is( 165 getFontPreviewData(`Menlo, monospace`, content.document).ctx.font, 166 `40px Menlo, monospace, serif`, 167 "Expected font style was used in the canvas" 168 ); 169 170 // Check multiple font some with quotes, some not 171 is( 172 getFontPreviewData( 173 `Menlo Bold, "Fira Code", 'Mono Lisa', monospace`, 174 content.document 175 ).ctx.font, 176 `40px "Menlo Bold", "Fira Code", "Mono Lisa", monospace, serif`, 177 "Expected font style was used in the canvas" 178 ); 179 180 // Check font-weight value 181 is( 182 getFontPreviewData(`monospace`, content.document, { fontWeight: "200" }) 183 .ctx.font, 184 `200 40px monospace, serif`, 185 "Expected font style was used in the canvas" 186 ); 187 188 // Check font-style value 189 is( 190 getFontPreviewData(`monospace`, content.document, { 191 fontWeight: "200", 192 fontStyle: "italic", 193 }).ctx.font, 194 `italic 200 40px monospace, serif`, 195 "Expected font style was used in the canvas" 196 ); 197 }); 198 });