2d.text.measure.index-from-offset-edges.tentative.html (19755B)
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>Canvas test: 2d.text.measure.index-from-offset-edges.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 <link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> 9 10 <h1>2d.text.measure.index-from-offset-edges.tentative</h1> 11 12 <script> 13 14 test(t => { 15 const canvas = document.createElement('canvas'); 16 canvas.width = 100; 17 canvas.height = 50; 18 const ctx = canvas.getContext('2d'); 19 20 function computeExpected(text, text_width, offset) { 21 expected_position = 0; 22 if ('left' == 'center' && offset == 0) { 23 return text.length / 2; 24 } 25 if ('ltr' == 'ltr') { 26 if (offset >= text_width) { 27 return text.length; 28 } 29 if (offset <= -text_width) { 30 return 0; 31 } 32 // offset must be 0. 33 if ('left' == 'start' || 'left' == 'left') { 34 return 0; 35 } else { 36 return text.length; 37 } 38 } else { 39 if (offset >= text_width) { 40 return 0; 41 } 42 if (offset <= -text_width) { 43 return text.length; 44 } 45 // offset must be 0. 46 if ('left' == 'start' || 'left' == 'right') { 47 return 0; 48 } else { 49 return text.length; 50 } 51 } 52 return expected_position; 53 } 54 55 ctx.font = '50px sans-serif'; 56 ctx.direction = 'ltr'; 57 ctx.textAlign = 'left'; 58 ctx.letterSpacing = ''; 59 60 // The leading and trailing '-' cause the string to always follow 61 // the specified direction, even though the interior will always be ltr. 62 const text = '-0123456789-'; 63 64 // Points are multiples of the string width as reported by 65 // textMetrics.width. 66 const kPoints = [ 67 -2, 68 -1, 69 0, 70 1, 71 2 72 ] 73 74 const tm = ctx.measureText(text); 75 text_width = tm.width; 76 for (const multiple of kPoints) { 77 offset = multiple * text_width; 78 tm_position = tm.getIndexFromOffset(offset); 79 expected_position = computeExpected(text, text_width, offset); 80 assert_equals(tm_position, 81 expected_position, 82 "for " + text + " multiple " + multiple); 83 } 84 }, "Check that TextMetrics::getIndexFromOffset() gives correct edges when the requested point is outside the range, with direction ltr and text align left."); 85 86 test(t => { 87 const canvas = document.createElement('canvas'); 88 canvas.width = 100; 89 canvas.height = 50; 90 const ctx = canvas.getContext('2d'); 91 92 function computeExpected(text, text_width, offset) { 93 expected_position = 0; 94 if ('left' == 'center' && offset == 0) { 95 return text.length / 2; 96 } 97 if ('rtl' == 'ltr') { 98 if (offset >= text_width) { 99 return text.length; 100 } 101 if (offset <= -text_width) { 102 return 0; 103 } 104 // offset must be 0. 105 if ('left' == 'start' || 'left' == 'left') { 106 return 0; 107 } else { 108 return text.length; 109 } 110 } else { 111 if (offset >= text_width) { 112 return 0; 113 } 114 if (offset <= -text_width) { 115 return text.length; 116 } 117 // offset must be 0. 118 if ('left' == 'start' || 'left' == 'right') { 119 return 0; 120 } else { 121 return text.length; 122 } 123 } 124 return expected_position; 125 } 126 127 ctx.font = '50px sans-serif'; 128 ctx.direction = 'rtl'; 129 ctx.textAlign = 'left'; 130 ctx.letterSpacing = ''; 131 132 // The leading and trailing '-' cause the string to always follow 133 // the specified direction, even though the interior will always be ltr. 134 const text = '-0123456789-'; 135 136 // Points are multiples of the string width as reported by 137 // textMetrics.width. 138 const kPoints = [ 139 -2, 140 -1, 141 0, 142 1, 143 2 144 ] 145 146 const tm = ctx.measureText(text); 147 text_width = tm.width; 148 for (const multiple of kPoints) { 149 offset = multiple * text_width; 150 tm_position = tm.getIndexFromOffset(offset); 151 expected_position = computeExpected(text, text_width, offset); 152 assert_equals(tm_position, 153 expected_position, 154 "for " + text + " multiple " + multiple); 155 } 156 }, "Check that TextMetrics::getIndexFromOffset() gives correct edges when the requested point is outside the range, with direction rtl and text align left."); 157 158 test(t => { 159 const canvas = document.createElement('canvas'); 160 canvas.width = 100; 161 canvas.height = 50; 162 const ctx = canvas.getContext('2d'); 163 164 function computeExpected(text, text_width, offset) { 165 expected_position = 0; 166 if ('center' == 'center' && offset == 0) { 167 return text.length / 2; 168 } 169 if ('ltr' == 'ltr') { 170 if (offset >= text_width) { 171 return text.length; 172 } 173 if (offset <= -text_width) { 174 return 0; 175 } 176 // offset must be 0. 177 if ('center' == 'start' || 'center' == 'left') { 178 return 0; 179 } else { 180 return text.length; 181 } 182 } else { 183 if (offset >= text_width) { 184 return 0; 185 } 186 if (offset <= -text_width) { 187 return text.length; 188 } 189 // offset must be 0. 190 if ('center' == 'start' || 'center' == 'right') { 191 return 0; 192 } else { 193 return text.length; 194 } 195 } 196 return expected_position; 197 } 198 199 ctx.font = '50px sans-serif'; 200 ctx.direction = 'ltr'; 201 ctx.textAlign = 'center'; 202 ctx.letterSpacing = ''; 203 204 // The leading and trailing '-' cause the string to always follow 205 // the specified direction, even though the interior will always be ltr. 206 const text = '-0123456789-'; 207 208 // Points are multiples of the string width as reported by 209 // textMetrics.width. 210 const kPoints = [ 211 -2, 212 -1, 213 0, 214 1, 215 2 216 ] 217 218 const tm = ctx.measureText(text); 219 text_width = tm.width; 220 for (const multiple of kPoints) { 221 offset = multiple * text_width; 222 tm_position = tm.getIndexFromOffset(offset); 223 expected_position = computeExpected(text, text_width, offset); 224 assert_equals(tm_position, 225 expected_position, 226 "for " + text + " multiple " + multiple); 227 } 228 }, "Check that TextMetrics::getIndexFromOffset() gives correct edges when the requested point is outside the range, with direction ltr and text align center."); 229 230 test(t => { 231 const canvas = document.createElement('canvas'); 232 canvas.width = 100; 233 canvas.height = 50; 234 const ctx = canvas.getContext('2d'); 235 236 function computeExpected(text, text_width, offset) { 237 expected_position = 0; 238 if ('center' == 'center' && offset == 0) { 239 return text.length / 2; 240 } 241 if ('rtl' == 'ltr') { 242 if (offset >= text_width) { 243 return text.length; 244 } 245 if (offset <= -text_width) { 246 return 0; 247 } 248 // offset must be 0. 249 if ('center' == 'start' || 'center' == 'left') { 250 return 0; 251 } else { 252 return text.length; 253 } 254 } else { 255 if (offset >= text_width) { 256 return 0; 257 } 258 if (offset <= -text_width) { 259 return text.length; 260 } 261 // offset must be 0. 262 if ('center' == 'start' || 'center' == 'right') { 263 return 0; 264 } else { 265 return text.length; 266 } 267 } 268 return expected_position; 269 } 270 271 ctx.font = '50px sans-serif'; 272 ctx.direction = 'rtl'; 273 ctx.textAlign = 'center'; 274 ctx.letterSpacing = ''; 275 276 // The leading and trailing '-' cause the string to always follow 277 // the specified direction, even though the interior will always be ltr. 278 const text = '-0123456789-'; 279 280 // Points are multiples of the string width as reported by 281 // textMetrics.width. 282 const kPoints = [ 283 -2, 284 -1, 285 0, 286 1, 287 2 288 ] 289 290 const tm = ctx.measureText(text); 291 text_width = tm.width; 292 for (const multiple of kPoints) { 293 offset = multiple * text_width; 294 tm_position = tm.getIndexFromOffset(offset); 295 expected_position = computeExpected(text, text_width, offset); 296 assert_equals(tm_position, 297 expected_position, 298 "for " + text + " multiple " + multiple); 299 } 300 }, "Check that TextMetrics::getIndexFromOffset() gives correct edges when the requested point is outside the range, with direction rtl and text align center."); 301 302 test(t => { 303 const canvas = document.createElement('canvas'); 304 canvas.width = 100; 305 canvas.height = 50; 306 const ctx = canvas.getContext('2d'); 307 308 function computeExpected(text, text_width, offset) { 309 expected_position = 0; 310 if ('right' == 'center' && offset == 0) { 311 return text.length / 2; 312 } 313 if ('ltr' == 'ltr') { 314 if (offset >= text_width) { 315 return text.length; 316 } 317 if (offset <= -text_width) { 318 return 0; 319 } 320 // offset must be 0. 321 if ('right' == 'start' || 'right' == 'left') { 322 return 0; 323 } else { 324 return text.length; 325 } 326 } else { 327 if (offset >= text_width) { 328 return 0; 329 } 330 if (offset <= -text_width) { 331 return text.length; 332 } 333 // offset must be 0. 334 if ('right' == 'start' || 'right' == 'right') { 335 return 0; 336 } else { 337 return text.length; 338 } 339 } 340 return expected_position; 341 } 342 343 ctx.font = '50px sans-serif'; 344 ctx.direction = 'ltr'; 345 ctx.textAlign = 'right'; 346 ctx.letterSpacing = ''; 347 348 // The leading and trailing '-' cause the string to always follow 349 // the specified direction, even though the interior will always be ltr. 350 const text = '-0123456789-'; 351 352 // Points are multiples of the string width as reported by 353 // textMetrics.width. 354 const kPoints = [ 355 -2, 356 -1, 357 0, 358 1, 359 2 360 ] 361 362 const tm = ctx.measureText(text); 363 text_width = tm.width; 364 for (const multiple of kPoints) { 365 offset = multiple * text_width; 366 tm_position = tm.getIndexFromOffset(offset); 367 expected_position = computeExpected(text, text_width, offset); 368 assert_equals(tm_position, 369 expected_position, 370 "for " + text + " multiple " + multiple); 371 } 372 }, "Check that TextMetrics::getIndexFromOffset() gives correct edges when the requested point is outside the range, with direction ltr and text align right."); 373 374 test(t => { 375 const canvas = document.createElement('canvas'); 376 canvas.width = 100; 377 canvas.height = 50; 378 const ctx = canvas.getContext('2d'); 379 380 function computeExpected(text, text_width, offset) { 381 expected_position = 0; 382 if ('right' == 'center' && offset == 0) { 383 return text.length / 2; 384 } 385 if ('rtl' == 'ltr') { 386 if (offset >= text_width) { 387 return text.length; 388 } 389 if (offset <= -text_width) { 390 return 0; 391 } 392 // offset must be 0. 393 if ('right' == 'start' || 'right' == 'left') { 394 return 0; 395 } else { 396 return text.length; 397 } 398 } else { 399 if (offset >= text_width) { 400 return 0; 401 } 402 if (offset <= -text_width) { 403 return text.length; 404 } 405 // offset must be 0. 406 if ('right' == 'start' || 'right' == 'right') { 407 return 0; 408 } else { 409 return text.length; 410 } 411 } 412 return expected_position; 413 } 414 415 ctx.font = '50px sans-serif'; 416 ctx.direction = 'rtl'; 417 ctx.textAlign = 'right'; 418 ctx.letterSpacing = ''; 419 420 // The leading and trailing '-' cause the string to always follow 421 // the specified direction, even though the interior will always be ltr. 422 const text = '-0123456789-'; 423 424 // Points are multiples of the string width as reported by 425 // textMetrics.width. 426 const kPoints = [ 427 -2, 428 -1, 429 0, 430 1, 431 2 432 ] 433 434 const tm = ctx.measureText(text); 435 text_width = tm.width; 436 for (const multiple of kPoints) { 437 offset = multiple * text_width; 438 tm_position = tm.getIndexFromOffset(offset); 439 expected_position = computeExpected(text, text_width, offset); 440 assert_equals(tm_position, 441 expected_position, 442 "for " + text + " multiple " + multiple); 443 } 444 }, "Check that TextMetrics::getIndexFromOffset() gives correct edges when the requested point is outside the range, with direction rtl and text align right."); 445 446 test(t => { 447 const canvas = document.createElement('canvas'); 448 canvas.width = 100; 449 canvas.height = 50; 450 const ctx = canvas.getContext('2d'); 451 452 function computeExpected(text, text_width, offset) { 453 expected_position = 0; 454 if ('start' == 'center' && offset == 0) { 455 return text.length / 2; 456 } 457 if ('ltr' == 'ltr') { 458 if (offset >= text_width) { 459 return text.length; 460 } 461 if (offset <= -text_width) { 462 return 0; 463 } 464 // offset must be 0. 465 if ('start' == 'start' || 'start' == 'left') { 466 return 0; 467 } else { 468 return text.length; 469 } 470 } else { 471 if (offset >= text_width) { 472 return 0; 473 } 474 if (offset <= -text_width) { 475 return text.length; 476 } 477 // offset must be 0. 478 if ('start' == 'start' || 'start' == 'right') { 479 return 0; 480 } else { 481 return text.length; 482 } 483 } 484 return expected_position; 485 } 486 487 ctx.font = '50px sans-serif'; 488 ctx.direction = 'ltr'; 489 ctx.textAlign = 'start'; 490 ctx.letterSpacing = ''; 491 492 // The leading and trailing '-' cause the string to always follow 493 // the specified direction, even though the interior will always be ltr. 494 const text = '-0123456789-'; 495 496 // Points are multiples of the string width as reported by 497 // textMetrics.width. 498 const kPoints = [ 499 -2, 500 -1, 501 0, 502 1, 503 2 504 ] 505 506 const tm = ctx.measureText(text); 507 text_width = tm.width; 508 for (const multiple of kPoints) { 509 offset = multiple * text_width; 510 tm_position = tm.getIndexFromOffset(offset); 511 expected_position = computeExpected(text, text_width, offset); 512 assert_equals(tm_position, 513 expected_position, 514 "for " + text + " multiple " + multiple); 515 } 516 }, "Check that TextMetrics::getIndexFromOffset() gives correct edges when the requested point is outside the range, with direction ltr and text align start."); 517 518 test(t => { 519 const canvas = document.createElement('canvas'); 520 canvas.width = 100; 521 canvas.height = 50; 522 const ctx = canvas.getContext('2d'); 523 524 function computeExpected(text, text_width, offset) { 525 expected_position = 0; 526 if ('start' == 'center' && offset == 0) { 527 return text.length / 2; 528 } 529 if ('rtl' == 'ltr') { 530 if (offset >= text_width) { 531 return text.length; 532 } 533 if (offset <= -text_width) { 534 return 0; 535 } 536 // offset must be 0. 537 if ('start' == 'start' || 'start' == 'left') { 538 return 0; 539 } else { 540 return text.length; 541 } 542 } else { 543 if (offset >= text_width) { 544 return 0; 545 } 546 if (offset <= -text_width) { 547 return text.length; 548 } 549 // offset must be 0. 550 if ('start' == 'start' || 'start' == 'right') { 551 return 0; 552 } else { 553 return text.length; 554 } 555 } 556 return expected_position; 557 } 558 559 ctx.font = '50px sans-serif'; 560 ctx.direction = 'rtl'; 561 ctx.textAlign = 'start'; 562 ctx.letterSpacing = ''; 563 564 // The leading and trailing '-' cause the string to always follow 565 // the specified direction, even though the interior will always be ltr. 566 const text = '-0123456789-'; 567 568 // Points are multiples of the string width as reported by 569 // textMetrics.width. 570 const kPoints = [ 571 -2, 572 -1, 573 0, 574 1, 575 2 576 ] 577 578 const tm = ctx.measureText(text); 579 text_width = tm.width; 580 for (const multiple of kPoints) { 581 offset = multiple * text_width; 582 tm_position = tm.getIndexFromOffset(offset); 583 expected_position = computeExpected(text, text_width, offset); 584 assert_equals(tm_position, 585 expected_position, 586 "for " + text + " multiple " + multiple); 587 } 588 }, "Check that TextMetrics::getIndexFromOffset() gives correct edges when the requested point is outside the range, with direction rtl and text align start."); 589 590 test(t => { 591 const canvas = document.createElement('canvas'); 592 canvas.width = 100; 593 canvas.height = 50; 594 const ctx = canvas.getContext('2d'); 595 596 function computeExpected(text, text_width, offset) { 597 expected_position = 0; 598 if ('end' == 'center' && offset == 0) { 599 return text.length / 2; 600 } 601 if ('ltr' == 'ltr') { 602 if (offset >= text_width) { 603 return text.length; 604 } 605 if (offset <= -text_width) { 606 return 0; 607 } 608 // offset must be 0. 609 if ('end' == 'start' || 'end' == 'left') { 610 return 0; 611 } else { 612 return text.length; 613 } 614 } else { 615 if (offset >= text_width) { 616 return 0; 617 } 618 if (offset <= -text_width) { 619 return text.length; 620 } 621 // offset must be 0. 622 if ('end' == 'start' || 'end' == 'right') { 623 return 0; 624 } else { 625 return text.length; 626 } 627 } 628 return expected_position; 629 } 630 631 ctx.font = '50px sans-serif'; 632 ctx.direction = 'ltr'; 633 ctx.textAlign = 'end'; 634 ctx.letterSpacing = ''; 635 636 // The leading and trailing '-' cause the string to always follow 637 // the specified direction, even though the interior will always be ltr. 638 const text = '-0123456789-'; 639 640 // Points are multiples of the string width as reported by 641 // textMetrics.width. 642 const kPoints = [ 643 -2, 644 -1, 645 0, 646 1, 647 2 648 ] 649 650 const tm = ctx.measureText(text); 651 text_width = tm.width; 652 for (const multiple of kPoints) { 653 offset = multiple * text_width; 654 tm_position = tm.getIndexFromOffset(offset); 655 expected_position = computeExpected(text, text_width, offset); 656 assert_equals(tm_position, 657 expected_position, 658 "for " + text + " multiple " + multiple); 659 } 660 }, "Check that TextMetrics::getIndexFromOffset() gives correct edges when the requested point is outside the range, with direction ltr and text align end."); 661 662 test(t => { 663 const canvas = document.createElement('canvas'); 664 canvas.width = 100; 665 canvas.height = 50; 666 const ctx = canvas.getContext('2d'); 667 668 function computeExpected(text, text_width, offset) { 669 expected_position = 0; 670 if ('end' == 'center' && offset == 0) { 671 return text.length / 2; 672 } 673 if ('rtl' == 'ltr') { 674 if (offset >= text_width) { 675 return text.length; 676 } 677 if (offset <= -text_width) { 678 return 0; 679 } 680 // offset must be 0. 681 if ('end' == 'start' || 'end' == 'left') { 682 return 0; 683 } else { 684 return text.length; 685 } 686 } else { 687 if (offset >= text_width) { 688 return 0; 689 } 690 if (offset <= -text_width) { 691 return text.length; 692 } 693 // offset must be 0. 694 if ('end' == 'start' || 'end' == 'right') { 695 return 0; 696 } else { 697 return text.length; 698 } 699 } 700 return expected_position; 701 } 702 703 ctx.font = '50px sans-serif'; 704 ctx.direction = 'rtl'; 705 ctx.textAlign = 'end'; 706 ctx.letterSpacing = ''; 707 708 // The leading and trailing '-' cause the string to always follow 709 // the specified direction, even though the interior will always be ltr. 710 const text = '-0123456789-'; 711 712 // Points are multiples of the string width as reported by 713 // textMetrics.width. 714 const kPoints = [ 715 -2, 716 -1, 717 0, 718 1, 719 2 720 ] 721 722 const tm = ctx.measureText(text); 723 text_width = tm.width; 724 for (const multiple of kPoints) { 725 offset = multiple * text_width; 726 tm_position = tm.getIndexFromOffset(offset); 727 expected_position = computeExpected(text, text_width, offset); 728 assert_equals(tm_position, 729 expected_position, 730 "for " + text + " multiple " + multiple); 731 } 732 }, "Check that TextMetrics::getIndexFromOffset() gives correct edges when the requested point is outside the range, with direction rtl and text align end."); 733 734 </script>