2d.text.measure.getActualBoundingBox.tentative.worker.js (16120B)
1 // DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. 2 // OffscreenCanvas test in a worker:2d.text.measure.getActualBoundingBox.tentative 3 // Description: 4 // Note: 5 6 importScripts("/resources/testharness.js"); 7 importScripts("/html/canvas/resources/canvas-tests.js"); 8 9 promise_test(async t => { 10 const canvas = new OffscreenCanvas(800, 200); 11 const ctx = canvas.getContext('2d'); 12 13 // Use measureText to create a rect for the whole text 14 function getFullTextBoundingBox(text) { 15 const tm = ctx.measureText(text); 16 return { 17 x: -tm.actualBoundingBoxLeft, 18 y: -tm.actualBoundingBoxAscent, 19 width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight, 20 height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent 21 }; 22 } 23 24 // Returns a string a replaces the characters in text that are not in the 25 // range [start, end) with spaces. 26 function buildTestString(text, start, end) { 27 let ret = ''; 28 for (let i = 0; i < text.length; ++i) { 29 if (start <= i && i < end) 30 ret += text[i]; 31 else 32 ret += ' '; 33 } 34 return ret; 35 } 36 37 function checkRectsMatch(rect_a, rect_b, text, start, end) { 38 assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`); 39 assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`); 40 assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`); 41 assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`); 42 } 43 44 function testForSubstring(text, start, end) { 45 const textMetrics = ctx.measureText(text); 46 const rect_from_api = textMetrics.getActualBoundingBox(start, end); 47 const rect_from_full_bounds = getFullTextBoundingBox( 48 buildTestString(text, start, end)); 49 checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end); 50 } 51 52 var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')"); 53 f.load(); 54 self.fonts.add(f); 55 await self.fonts.ready; 56 ctx.textAlign = 'left'; 57 ctx.letterSpacing = '0px'; 58 59 const kAligns = [ 60 'left', 61 'center', 62 'right', 63 ]; 64 65 const kBaselines = [ 66 'top', 67 'hanging', 68 'middle', 69 'alphabetic', 70 'ideographic', 71 'bottom', 72 ]; 73 74 ctx.font = '50px CanvasTest'; 75 const text = 'ABCDE'; 76 for (const align of kAligns) { 77 for (const baseline of kBaselines) { 78 ctx.textAlign = align; 79 ctx.textBaseline = baseline; 80 // Full string. 81 testForSubstring(text, 0, text.length); 82 // Intermediate string. 83 testForSubstring(text, 1, text.length - 1); 84 // First character. 85 testForSubstring(text, 0, 1); 86 // Intermediate character. 87 testForSubstring(text, 2, 3); 88 } 89 } 90 }, "Test TextMetrics::getActualBoundingBox(), with text align left , and 0px letter spacing."); 91 92 promise_test(async t => { 93 const canvas = new OffscreenCanvas(800, 200); 94 const ctx = canvas.getContext('2d'); 95 96 // Use measureText to create a rect for the whole text 97 function getFullTextBoundingBox(text) { 98 const tm = ctx.measureText(text); 99 return { 100 x: -tm.actualBoundingBoxLeft, 101 y: -tm.actualBoundingBoxAscent, 102 width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight, 103 height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent 104 }; 105 } 106 107 // Returns a string a replaces the characters in text that are not in the 108 // range [start, end) with spaces. 109 function buildTestString(text, start, end) { 110 let ret = ''; 111 for (let i = 0; i < text.length; ++i) { 112 if (start <= i && i < end) 113 ret += text[i]; 114 else 115 ret += ' '; 116 } 117 return ret; 118 } 119 120 function checkRectsMatch(rect_a, rect_b, text, start, end) { 121 assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`); 122 assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`); 123 assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`); 124 assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`); 125 } 126 127 function testForSubstring(text, start, end) { 128 const textMetrics = ctx.measureText(text); 129 const rect_from_api = textMetrics.getActualBoundingBox(start, end); 130 const rect_from_full_bounds = getFullTextBoundingBox( 131 buildTestString(text, start, end)); 132 checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end); 133 } 134 135 var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')"); 136 f.load(); 137 self.fonts.add(f); 138 await self.fonts.ready; 139 ctx.textAlign = 'center'; 140 ctx.letterSpacing = '0px'; 141 142 const kAligns = [ 143 'left', 144 'center', 145 'right', 146 ]; 147 148 const kBaselines = [ 149 'top', 150 'hanging', 151 'middle', 152 'alphabetic', 153 'ideographic', 154 'bottom', 155 ]; 156 157 ctx.font = '50px CanvasTest'; 158 const text = 'ABCDE'; 159 for (const align of kAligns) { 160 for (const baseline of kBaselines) { 161 ctx.textAlign = align; 162 ctx.textBaseline = baseline; 163 // Full string. 164 testForSubstring(text, 0, text.length); 165 // Intermediate string. 166 testForSubstring(text, 1, text.length - 1); 167 // First character. 168 testForSubstring(text, 0, 1); 169 // Intermediate character. 170 testForSubstring(text, 2, 3); 171 } 172 } 173 }, "Test TextMetrics::getActualBoundingBox(), with text align center , and 0px letter spacing."); 174 175 promise_test(async t => { 176 const canvas = new OffscreenCanvas(800, 200); 177 const ctx = canvas.getContext('2d'); 178 179 // Use measureText to create a rect for the whole text 180 function getFullTextBoundingBox(text) { 181 const tm = ctx.measureText(text); 182 return { 183 x: -tm.actualBoundingBoxLeft, 184 y: -tm.actualBoundingBoxAscent, 185 width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight, 186 height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent 187 }; 188 } 189 190 // Returns a string a replaces the characters in text that are not in the 191 // range [start, end) with spaces. 192 function buildTestString(text, start, end) { 193 let ret = ''; 194 for (let i = 0; i < text.length; ++i) { 195 if (start <= i && i < end) 196 ret += text[i]; 197 else 198 ret += ' '; 199 } 200 return ret; 201 } 202 203 function checkRectsMatch(rect_a, rect_b, text, start, end) { 204 assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`); 205 assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`); 206 assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`); 207 assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`); 208 } 209 210 function testForSubstring(text, start, end) { 211 const textMetrics = ctx.measureText(text); 212 const rect_from_api = textMetrics.getActualBoundingBox(start, end); 213 const rect_from_full_bounds = getFullTextBoundingBox( 214 buildTestString(text, start, end)); 215 checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end); 216 } 217 218 var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')"); 219 f.load(); 220 self.fonts.add(f); 221 await self.fonts.ready; 222 ctx.textAlign = 'right'; 223 ctx.letterSpacing = '0px'; 224 225 const kAligns = [ 226 'left', 227 'center', 228 'right', 229 ]; 230 231 const kBaselines = [ 232 'top', 233 'hanging', 234 'middle', 235 'alphabetic', 236 'ideographic', 237 'bottom', 238 ]; 239 240 ctx.font = '50px CanvasTest'; 241 const text = 'ABCDE'; 242 for (const align of kAligns) { 243 for (const baseline of kBaselines) { 244 ctx.textAlign = align; 245 ctx.textBaseline = baseline; 246 // Full string. 247 testForSubstring(text, 0, text.length); 248 // Intermediate string. 249 testForSubstring(text, 1, text.length - 1); 250 // First character. 251 testForSubstring(text, 0, 1); 252 // Intermediate character. 253 testForSubstring(text, 2, 3); 254 } 255 } 256 }, "Test TextMetrics::getActualBoundingBox(), with text align right , and 0px letter spacing."); 257 258 promise_test(async t => { 259 const canvas = new OffscreenCanvas(800, 200); 260 const ctx = canvas.getContext('2d'); 261 262 // Use measureText to create a rect for the whole text 263 function getFullTextBoundingBox(text) { 264 const tm = ctx.measureText(text); 265 return { 266 x: -tm.actualBoundingBoxLeft, 267 y: -tm.actualBoundingBoxAscent, 268 width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight, 269 height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent 270 }; 271 } 272 273 // Returns a string a replaces the characters in text that are not in the 274 // range [start, end) with spaces. 275 function buildTestString(text, start, end) { 276 let ret = ''; 277 for (let i = 0; i < text.length; ++i) { 278 if (start <= i && i < end) 279 ret += text[i]; 280 else 281 ret += ' '; 282 } 283 return ret; 284 } 285 286 function checkRectsMatch(rect_a, rect_b, text, start, end) { 287 assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`); 288 assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`); 289 assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`); 290 assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`); 291 } 292 293 function testForSubstring(text, start, end) { 294 const textMetrics = ctx.measureText(text); 295 const rect_from_api = textMetrics.getActualBoundingBox(start, end); 296 const rect_from_full_bounds = getFullTextBoundingBox( 297 buildTestString(text, start, end)); 298 checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end); 299 } 300 301 var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')"); 302 f.load(); 303 self.fonts.add(f); 304 await self.fonts.ready; 305 ctx.textAlign = 'left'; 306 ctx.letterSpacing = '10px'; 307 308 const kAligns = [ 309 'left', 310 'center', 311 'right', 312 ]; 313 314 const kBaselines = [ 315 'top', 316 'hanging', 317 'middle', 318 'alphabetic', 319 'ideographic', 320 'bottom', 321 ]; 322 323 ctx.font = '50px CanvasTest'; 324 const text = 'ABCDE'; 325 for (const align of kAligns) { 326 for (const baseline of kBaselines) { 327 ctx.textAlign = align; 328 ctx.textBaseline = baseline; 329 // Full string. 330 testForSubstring(text, 0, text.length); 331 // Intermediate string. 332 testForSubstring(text, 1, text.length - 1); 333 // First character. 334 testForSubstring(text, 0, 1); 335 // Intermediate character. 336 testForSubstring(text, 2, 3); 337 } 338 } 339 }, "Test TextMetrics::getActualBoundingBox(), with text align left , and 10px letter spacing."); 340 341 promise_test(async t => { 342 const canvas = new OffscreenCanvas(800, 200); 343 const ctx = canvas.getContext('2d'); 344 345 // Use measureText to create a rect for the whole text 346 function getFullTextBoundingBox(text) { 347 const tm = ctx.measureText(text); 348 return { 349 x: -tm.actualBoundingBoxLeft, 350 y: -tm.actualBoundingBoxAscent, 351 width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight, 352 height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent 353 }; 354 } 355 356 // Returns a string a replaces the characters in text that are not in the 357 // range [start, end) with spaces. 358 function buildTestString(text, start, end) { 359 let ret = ''; 360 for (let i = 0; i < text.length; ++i) { 361 if (start <= i && i < end) 362 ret += text[i]; 363 else 364 ret += ' '; 365 } 366 return ret; 367 } 368 369 function checkRectsMatch(rect_a, rect_b, text, start, end) { 370 assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`); 371 assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`); 372 assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`); 373 assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`); 374 } 375 376 function testForSubstring(text, start, end) { 377 const textMetrics = ctx.measureText(text); 378 const rect_from_api = textMetrics.getActualBoundingBox(start, end); 379 const rect_from_full_bounds = getFullTextBoundingBox( 380 buildTestString(text, start, end)); 381 checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end); 382 } 383 384 var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')"); 385 f.load(); 386 self.fonts.add(f); 387 await self.fonts.ready; 388 ctx.textAlign = 'center'; 389 ctx.letterSpacing = '10px'; 390 391 const kAligns = [ 392 'left', 393 'center', 394 'right', 395 ]; 396 397 const kBaselines = [ 398 'top', 399 'hanging', 400 'middle', 401 'alphabetic', 402 'ideographic', 403 'bottom', 404 ]; 405 406 ctx.font = '50px CanvasTest'; 407 const text = 'ABCDE'; 408 for (const align of kAligns) { 409 for (const baseline of kBaselines) { 410 ctx.textAlign = align; 411 ctx.textBaseline = baseline; 412 // Full string. 413 testForSubstring(text, 0, text.length); 414 // Intermediate string. 415 testForSubstring(text, 1, text.length - 1); 416 // First character. 417 testForSubstring(text, 0, 1); 418 // Intermediate character. 419 testForSubstring(text, 2, 3); 420 } 421 } 422 }, "Test TextMetrics::getActualBoundingBox(), with text align center , and 10px letter spacing."); 423 424 promise_test(async t => { 425 const canvas = new OffscreenCanvas(800, 200); 426 const ctx = canvas.getContext('2d'); 427 428 // Use measureText to create a rect for the whole text 429 function getFullTextBoundingBox(text) { 430 const tm = ctx.measureText(text); 431 return { 432 x: -tm.actualBoundingBoxLeft, 433 y: -tm.actualBoundingBoxAscent, 434 width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight, 435 height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent 436 }; 437 } 438 439 // Returns a string a replaces the characters in text that are not in the 440 // range [start, end) with spaces. 441 function buildTestString(text, start, end) { 442 let ret = ''; 443 for (let i = 0; i < text.length; ++i) { 444 if (start <= i && i < end) 445 ret += text[i]; 446 else 447 ret += ' '; 448 } 449 return ret; 450 } 451 452 function checkRectsMatch(rect_a, rect_b, text, start, end) { 453 assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`); 454 assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`); 455 assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`); 456 assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`); 457 } 458 459 function testForSubstring(text, start, end) { 460 const textMetrics = ctx.measureText(text); 461 const rect_from_api = textMetrics.getActualBoundingBox(start, end); 462 const rect_from_full_bounds = getFullTextBoundingBox( 463 buildTestString(text, start, end)); 464 checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end); 465 } 466 467 var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')"); 468 f.load(); 469 self.fonts.add(f); 470 await self.fonts.ready; 471 ctx.textAlign = 'right'; 472 ctx.letterSpacing = '10px'; 473 474 const kAligns = [ 475 'left', 476 'center', 477 'right', 478 ]; 479 480 const kBaselines = [ 481 'top', 482 'hanging', 483 'middle', 484 'alphabetic', 485 'ideographic', 486 'bottom', 487 ]; 488 489 ctx.font = '50px CanvasTest'; 490 const text = 'ABCDE'; 491 for (const align of kAligns) { 492 for (const baseline of kBaselines) { 493 ctx.textAlign = align; 494 ctx.textBaseline = baseline; 495 // Full string. 496 testForSubstring(text, 0, text.length); 497 // Intermediate string. 498 testForSubstring(text, 1, text.length - 1); 499 // First character. 500 testForSubstring(text, 0, 1); 501 // Intermediate character. 502 testForSubstring(text, 2, 3); 503 } 504 } 505 }, "Test TextMetrics::getActualBoundingBox(), with text align right , and 10px letter spacing."); 506 507 done();