Attachment 349685 Details for Bug 157629 – Manual test case (updated from last patch on this issue)

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:

Filename:

MIME Type:

Creator: Justin Michaud

Created: 2018-09-13 11:22:29 PDT

Size: 5.29 KB

patch

obsolete

><!DOCTYPE html>
>
><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>

Actions: View

Attachments on bug 157629: 349683 | 349684 | 349685 | 349699 | 349702