2d.text.measure.getActualBoundingBox-full-text.tentative.html (8565B)
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.getActualBoundingBox-full-text.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.getActualBoundingBox-full-text.tentative</h1> 11 12 <script> 13 14 test(t => { 15 const canvas = document.createElement('canvas'); 16 canvas.width = 800; 17 canvas.height = 200; 18 const ctx = canvas.getContext('2d'); 19 20 // Use measureText to create a rect for the whole text 21 function getFullTextBoundingBox(text) { 22 const tm = ctx.measureText(text); 23 return { 24 x: -tm.actualBoundingBoxLeft, 25 y: -tm.actualBoundingBoxAscent, 26 width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight, 27 height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent 28 }; 29 } 30 31 function checkRectsMatch(rect_a, rect_b) { 32 assert_approx_equals(rect_a.x, rect_b.x, 1.0); 33 assert_approx_equals(rect_a.y, rect_b.y, 1.0); 34 assert_approx_equals(rect_a.width, rect_b.width, 1.0); 35 assert_approx_equals(rect_a.height, rect_b.height, 1.0); 36 } 37 38 const kAligns = [ 39 'left', 40 'center', 41 'right', 42 ]; 43 44 const kBaselines = [ 45 'top', 46 'hanging', 47 'middle', 48 'alphabetic', 49 'ideographic', 50 'bottom', 51 ]; 52 53 const kTexts = [ 54 'UNAVAILABLE', 55 '🏁🎶🏁', 56 '）（あ）（', 57 '-abcd ', 58 'اين المكتبة؟', 59 'bidiالرياضيات' 60 ] 61 62 ctx.font = '50px sans-serif'; 63 ctx.direction = 'ltr'; 64 for (const align of kAligns) { 65 for (const baseline of kBaselines) { 66 ctx.textAlign = align; 67 ctx.textBaseline = baseline; 68 for (text of kTexts) { 69 const tm = ctx.measureText(text); 70 const rect_from_api = tm.getActualBoundingBox(0, text.length); 71 const rect_from_full_bounds = getFullTextBoundingBox(text); 72 checkRectsMatch(rect_from_api, rect_from_full_bounds) 73 } 74 } 75 } 76 }, "Test TextMetrics::getActualBoundingBox() for the full length of the string for some edge cases, with direction ltr and no-directional-override"); 77 78 test(t => { 79 const canvas = document.createElement('canvas'); 80 canvas.width = 800; 81 canvas.height = 200; 82 const ctx = canvas.getContext('2d'); 83 84 // Use measureText to create a rect for the whole text 85 function getFullTextBoundingBox(text) { 86 const tm = ctx.measureText(text); 87 return { 88 x: -tm.actualBoundingBoxLeft, 89 y: -tm.actualBoundingBoxAscent, 90 width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight, 91 height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent 92 }; 93 } 94 95 function checkRectsMatch(rect_a, rect_b) { 96 assert_approx_equals(rect_a.x, rect_b.x, 1.0); 97 assert_approx_equals(rect_a.y, rect_b.y, 1.0); 98 assert_approx_equals(rect_a.width, rect_b.width, 1.0); 99 assert_approx_equals(rect_a.height, rect_b.height, 1.0); 100 } 101 102 const kAligns = [ 103 'left', 104 'center', 105 'right', 106 ]; 107 108 const kBaselines = [ 109 'top', 110 'hanging', 111 'middle', 112 'alphabetic', 113 'ideographic', 114 'bottom', 115 ]; 116 117 const kTexts = [ 118 'UNAVAILABLE', 119 '🏁🎶🏁', 120 '）（あ）（', 121 '-abcd ', 122 'اين المكتبة؟', 123 'bidiالرياضيات' 124 ] 125 126 ctx.font = '50px sans-serif'; 127 ctx.direction = 'rtl'; 128 for (const align of kAligns) { 129 for (const baseline of kBaselines) { 130 ctx.textAlign = align; 131 ctx.textBaseline = baseline; 132 for (text of kTexts) { 133 const tm = ctx.measureText(text); 134 const rect_from_api = tm.getActualBoundingBox(0, text.length); 135 const rect_from_full_bounds = getFullTextBoundingBox(text); 136 checkRectsMatch(rect_from_api, rect_from_full_bounds) 137 } 138 } 139 } 140 }, "Test TextMetrics::getActualBoundingBox() for the full length of the string for some edge cases, with direction rtl and no-directional-override"); 141 142 test(t => { 143 const canvas = document.createElement('canvas'); 144 canvas.width = 800; 145 canvas.height = 200; 146 const ctx = canvas.getContext('2d'); 147 148 // Use measureText to create a rect for the whole text 149 function getFullTextBoundingBox(text) { 150 const tm = ctx.measureText(text); 151 return { 152 x: -tm.actualBoundingBoxLeft, 153 y: -tm.actualBoundingBoxAscent, 154 width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight, 155 height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent 156 }; 157 } 158 159 function checkRectsMatch(rect_a, rect_b) { 160 assert_approx_equals(rect_a.x, rect_b.x, 1.0); 161 assert_approx_equals(rect_a.y, rect_b.y, 1.0); 162 assert_approx_equals(rect_a.width, rect_b.width, 1.0); 163 assert_approx_equals(rect_a.height, rect_b.height, 1.0); 164 } 165 166 function addDirectionalOverrideCharacters(text, direction_is_ltr) { 167 // source: www.w3.org/International/questions/qa-bidi-unicode-controls.en 168 const LTR_OVERRIDE = '\u202D'; 169 const RTL_OVERRIDE = '\u202E'; 170 const OVERRIDE_END = '\u202C'; 171 if (direction_is_ltr) { 172 return LTR_OVERRIDE + text + OVERRIDE_END; 173 } 174 return RTL_OVERRIDE + text + OVERRIDE_END; 175 } 176 177 const kAligns = [ 178 'left', 179 'center', 180 'right', 181 ]; 182 183 const kBaselines = [ 184 'top', 185 'hanging', 186 'middle', 187 'alphabetic', 188 'ideographic', 189 'bottom', 190 ]; 191 192 const kTexts = [ 193 'UNAVAILABLE', 194 '🏁🎶🏁', 195 '）（あ）（', 196 '-abcd ', 197 'اين المكتبة؟', 198 'bidiالرياضيات' 199 ] 200 201 ctx.font = '50px sans-serif'; 202 ctx.direction = 'ltr'; 203 for (const align of kAligns) { 204 for (const baseline of kBaselines) { 205 ctx.textAlign = align; 206 ctx.textBaseline = baseline; 207 for (text of kTexts) { 208 text = addDirectionalOverrideCharacters(text, ctx.direction == 'ltr'); 209 const tm = ctx.measureText(text); 210 const rect_from_api = tm.getActualBoundingBox(0, text.length); 211 const rect_from_full_bounds = getFullTextBoundingBox(text); 212 checkRectsMatch(rect_from_api, rect_from_full_bounds) 213 } 214 } 215 } 216 }, "Test TextMetrics::getActualBoundingBox() for the full length of the string for some edge cases, with direction ltr and directional-override"); 217 218 test(t => { 219 const canvas = document.createElement('canvas'); 220 canvas.width = 800; 221 canvas.height = 200; 222 const ctx = canvas.getContext('2d'); 223 224 // Use measureText to create a rect for the whole text 225 function getFullTextBoundingBox(text) { 226 const tm = ctx.measureText(text); 227 return { 228 x: -tm.actualBoundingBoxLeft, 229 y: -tm.actualBoundingBoxAscent, 230 width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight, 231 height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent 232 }; 233 } 234 235 function checkRectsMatch(rect_a, rect_b) { 236 assert_approx_equals(rect_a.x, rect_b.x, 1.0); 237 assert_approx_equals(rect_a.y, rect_b.y, 1.0); 238 assert_approx_equals(rect_a.width, rect_b.width, 1.0); 239 assert_approx_equals(rect_a.height, rect_b.height, 1.0); 240 } 241 242 function addDirectionalOverrideCharacters(text, direction_is_ltr) { 243 // source: www.w3.org/International/questions/qa-bidi-unicode-controls.en 244 const LTR_OVERRIDE = '\u202D'; 245 const RTL_OVERRIDE = '\u202E'; 246 const OVERRIDE_END = '\u202C'; 247 if (direction_is_ltr) { 248 return LTR_OVERRIDE + text + OVERRIDE_END; 249 } 250 return RTL_OVERRIDE + text + OVERRIDE_END; 251 } 252 253 const kAligns = [ 254 'left', 255 'center', 256 'right', 257 ]; 258 259 const kBaselines = [ 260 'top', 261 'hanging', 262 'middle', 263 'alphabetic', 264 'ideographic', 265 'bottom', 266 ]; 267 268 const kTexts = [ 269 'UNAVAILABLE', 270 '🏁🎶🏁', 271 '）（あ）（', 272 '-abcd ', 273 'اين المكتبة؟', 274 'bidiالرياضيات' 275 ] 276 277 ctx.font = '50px sans-serif'; 278 ctx.direction = 'rtl'; 279 for (const align of kAligns) { 280 for (const baseline of kBaselines) { 281 ctx.textAlign = align; 282 ctx.textBaseline = baseline; 283 for (text of kTexts) { 284 text = addDirectionalOverrideCharacters(text, ctx.direction == 'ltr'); 285 const tm = ctx.measureText(text); 286 const rect_from_api = tm.getActualBoundingBox(0, text.length); 287 const rect_from_full_bounds = getFullTextBoundingBox(text); 288 checkRectsMatch(rect_from_api, rect_from_full_bounds) 289 } 290 } 291 } 292 }, "Test TextMetrics::getActualBoundingBox() for the full length of the string for some edge cases, with direction rtl and directional-override"); 293 294 </script>