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