WebKit Bugzilla
Attachment 349685 Details for
Bug 157629
: Implement more of the canvas TextMetrics API
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Manual test case (updated from last patch on this issue)
manual.html (text/html), 5.29 KB, created by
Justin Michaud
on 2018-09-13 11:22:29 PDT
(
hide
)
Description:
Manual test case (updated from last patch on this issue)
Filename:
MIME Type:
Creator:
Justin Michaud
Created:
2018-09-13 11:22:29 PDT
Size:
5.29 KB
patch
obsolete
><!DOCTYPE html> ><!-- saved from url=(0065)https://bug-82798-attachments.webkit.org/attachment.cgi?id=316345 --> ><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> > > <style> > canvas { > border: solid 1px; > } > </style> > <script> > var canvas; > var form > function update() { > var ctx = canvas.getContext("2d"); > > var w = canvas.width; > var h = canvas.height; > > var originX = 100, originY = 200; > > ctx.fillStyle = 'white'; > ctx.fillRect(0, 0, w, h); > > var text = form.text.value; > ctx.textBaseline = form.baseline.value; > ctx.textAlign = form.align.value; > ctx.font = form.font.value; > var metrics = ctx.measureText(text); > > if (form.org.checked) { > ctx.fillStyle = 'black'; > ctx.fillRect(0, originY, w, 1); > ctx.fillRect(originX, 0, 1, h); > } > > if (form.abb.checked) { > ctx.fillStyle = 'rgba(255,255,0,0.5)'; > ctx.fillRect(originX - metrics.actualBoundingBoxLeft, > originY - metrics.actualBoundingBoxAscent, > metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight, > metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent); > } > > if (form.emh.checked) { > ctx.fillStyle = 'rgb(128,128,128)'; > ctx.fillRect(10, originY - metrics.emHeightAscent, w, 1); > ctx.fillRect(10, originY + metrics.emHeightDescent, w, 1); > } > > if (form.hang.checked) { > ctx.fillStyle = 'rgb(0,128,0)'; > ctx.fillRect(10, originY - metrics.getBaselines().hanging, w, 1); > } > if (form.alph.checked) { > ctx.fillStyle = 'rgb(0,128,128)'; > ctx.fillRect(10, originY - metrics.getBaselines().alphabetic, w, 1); > } > if (form.ideo.checked) { > ctx.fillStyle = 'rgb(255,0,128)'; > ctx.fillRect(10, originY - metrics.getBaselines().ideographic, w, 1); > } > if (form.fbb.checked) { > ctx.fillStyle = 'rgba(100,100,100,0.5)'; > ctx.fillRect(10, originY - metrics.fontBoundingBoxAscent, w, 1); > ctx.fillRect(10, originY + metrics.fontBoundingBoxDescent, w, 1); > } > if (form.advances.checked) { > ctx.fillStyle = 'rgba(255,0,0,1)'; > for (const adv of metrics.advances) { > console.log(adv); > ctx.fillRect(originX + adv, 0, 2, h); > } > } > > ctx.fillStyle = 'black'; > ctx.fillText(text, originX, originY); > } > window.onload = function() { > canvas = document.getElementsByTagName("canvas")[0]; > form = document.forms.mainForm; > var inputs = document.getElementsByTagName("input"); > for (i=0; i<inputs.length; i++) > inputs[i].onchange = update; > update(); > } > > </script> > </head> > <body> > <form name="mainForm" > > text: <input type="text" name="text" value="à ŷ f Ω ç§é à½à½à½´à¼à½à½ºà½à¼ --- Ø§ÙØ³Ùا٠عÙÙÙÙ "><br> > font: <input type="text" name="font" value="italic 100px serif"><br> > > baseline: > <label><input type="radio" name="baseline" value="top">top</label> > <label><input type="radio" name="baseline" value="hanging">hanging</label> > <label><input type="radio" name="baseline" value="middle">middle</label> > <label><input type="radio" name="baseline" value="alphabetic" checked="">alphabetic</label> > <label><input type="radio" name="baseline" value="ideographic">ideographic</label> > <label><input type="radio" name="baseline" value="bottom">bottom</label> > <br> > textAlign: > <label><input type="radio" name="align" value="start" checked="">start</label> > <label><input type="radio" name="align" value="end">end</label> > <label><input type="radio" name="align" value="left">left</label> > <label><input type="radio" name="align" value="right">right</label> > <label><input type="radio" name="align" value="center">center</label> > <br> > > <label><input type="checkbox" name="org" checked="">origin</label> > <label><input type="checkbox" name="emh" checked="">emHeightAscent/Descent</label> > <label><input type="checkbox" name="hang" checked="">hangingBaseline</label> > <label><input type="checkbox" name="alph" checked="">alphabeticBaseline</label> > <label><input type="checkbox" name="ideo" checked="">ideographicBaseline</label> > <label><input type="checkbox" name="fbb" checked="">fontBoundingBoxAscent/Descent</label> > <label><input type="checkbox" name="abb" checked="">actualBoundingBox</label> > <label><input type="checkbox" name="advances" checked="">advances</label> > </form> > <div> > <canvas width="2000" height="500"></canvas> > </div> > > ></body></html>
<!DOCTYPE html> <!-- saved from url=(0065)https://bug-82798-attachments.webkit.org/attachment.cgi?id=316345 --> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> canvas { border: solid 1px; } </style> <script> var canvas; var form function update() { var ctx = canvas.getContext("2d"); var w = canvas.width; var h = canvas.height; var originX = 100, originY = 200; ctx.fillStyle = 'white'; ctx.fillRect(0, 0, w, h); var text = form.text.value; ctx.textBaseline = form.baseline.value; ctx.textAlign = form.align.value; ctx.font = form.font.value; var metrics = ctx.measureText(text); if (form.org.checked) { ctx.fillStyle = 'black'; ctx.fillRect(0, originY, w, 1); ctx.fillRect(originX, 0, 1, h); } if (form.abb.checked) { ctx.fillStyle = 'rgba(255,255,0,0.5)'; ctx.fillRect(originX - metrics.actualBoundingBoxLeft, originY - metrics.actualBoundingBoxAscent, metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent); } if (form.emh.checked) { ctx.fillStyle = 'rgb(128,128,128)'; ctx.fillRect(10, originY - metrics.emHeightAscent, w, 1); ctx.fillRect(10, originY + metrics.emHeightDescent, w, 1); } if (form.hang.checked) { ctx.fillStyle = 'rgb(0,128,0)'; ctx.fillRect(10, originY - metrics.getBaselines().hanging, w, 1); } if (form.alph.checked) { ctx.fillStyle = 'rgb(0,128,128)'; ctx.fillRect(10, originY - metrics.getBaselines().alphabetic, w, 1); } if (form.ideo.checked) { ctx.fillStyle = 'rgb(255,0,128)'; ctx.fillRect(10, originY - metrics.getBaselines().ideographic, w, 1); } if (form.fbb.checked) { ctx.fillStyle = 'rgba(100,100,100,0.5)'; ctx.fillRect(10, originY - metrics.fontBoundingBoxAscent, w, 1); ctx.fillRect(10, originY + metrics.fontBoundingBoxDescent, w, 1); } if (form.advances.checked) { ctx.fillStyle = 'rgba(255,0,0,1)'; for (const adv of metrics.advances) { console.log(adv); ctx.fillRect(originX + adv, 0, 2, h); } } ctx.fillStyle = 'black'; ctx.fillText(text, originX, originY); } window.onload = function() { canvas = document.getElementsByTagName("canvas")[0]; form = document.forms.mainForm; var inputs = document.getElementsByTagName("input"); for (i=0; i<inputs.length; i++) inputs[i].onchange = update; update(); } </script> </head> <body> <form name="mainForm" > text: <input type="text" name="text" value="à ŷ f Ω ç§é à½à½à½´à¼à½à½ºà½à¼ --- Ø§ÙØ³Ùا٠عÙÙÙÙ "><br> font: <input type="text" name="font" value="italic 100px serif"><br> baseline: <label><input type="radio" name="baseline" value="top">top</label> <label><input type="radio" name="baseline" value="hanging">hanging</label> <label><input type="radio" name="baseline" value="middle">middle</label> <label><input type="radio" name="baseline" value="alphabetic" checked="">alphabetic</label> <label><input type="radio" name="baseline" value="ideographic">ideographic</label> <label><input type="radio" name="baseline" value="bottom">bottom</label> <br> textAlign: <label><input type="radio" name="align" value="start" checked="">start</label> <label><input type="radio" name="align" value="end">end</label> <label><input type="radio" name="align" value="left">left</label> <label><input type="radio" name="align" value="right">right</label> <label><input type="radio" name="align" value="center">center</label> <br> <label><input type="checkbox" name="org" checked="">origin</label> <label><input type="checkbox" name="emh" checked="">emHeightAscent/Descent</label> <label><input type="checkbox" name="hang" checked="">hangingBaseline</label> <label><input type="checkbox" name="alph" checked="">alphabeticBaseline</label> <label><input type="checkbox" name="ideo" checked="">ideographicBaseline</label> <label><input type="checkbox" name="fbb" checked="">fontBoundingBoxAscent/Descent</label> <label><input type="checkbox" name="abb" checked="">actualBoundingBox</label> <label><input type="checkbox" name="advances" checked="">advances</label> </form> <div> <canvas width="2000" height="500"></canvas> </div> </body></html>
View Attachment As Raw
Actions:
View
Attachments on
bug 157629
:
349683
|
349684
| 349685 |
349699
|
349702