Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(23)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/canvas/canvas-text-metrics-alphabetic.html

Issue 141433026: Font metrics, version 1 (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Update to ToT Created 6 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/canvas/canvas-text-metrics-bottom.html » ('j') | Source/core/html/TextMetrics.idl » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/canvas/canvas-text-metrics-alphabetic.html
diff --git a/LayoutTests/fast/canvas/canvas-text-metrics-alphabetic.html b/LayoutTests/fast/canvas/canvas-text-metrics-alphabetic.html
new file mode 100644
index 0000000000000000000000000000000000000000..ae570f08a281fc516deccc6945b2989062022d66
--- /dev/null
+++ b/LayoutTests/fast/canvas/canvas-text-metrics-alphabetic.html
@@ -0,0 +1,257 @@
+<html>
+<body>
+<canvas id="canvas" width=800 height=450 style="border:5px solid black">
+<script>
+if (window.testRunner)
+ testRunner.dumpAsTextWithPixelResults();
+
+var ctx = document.getElementById('canvas').getContext('2d');
+
+var x = 10;
+var y = 50;
+
+ctx.font = "32px 'Times New Roman'";
+
+ctx.lineWidth = 1;
+ctx.textBaseline="alphabetic";
+
+ctx.strokeStyle = '#000000';
+var dashList = [2,10];
+ctx.setLineDash(dashList);
+ctx.beginPath();
+ctx.moveTo(0, y);
+ctx.lineTo(800, y);
+ctx.closePath();
+ctx.stroke();
+ctx.strokeStyle = '#888888';
+ctx.setLineDash([]);
+
+var text = "Alphabetic baseline";
+var w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var ab = ctx.measureText(text).alphabeticBaseline;
+// Alphabetic Baseline : positive numbers indicate that the given baseline is below
+ctx.beginPath();
+ctx.moveTo(x, y+ab);
+ctx.lineTo(w+x, y+ab);
+ctx.closePath();
+ctx.stroke();
+
+x += w + 10;
+
+text = "Hanging baseline";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var hb = ctx.measureText(text).hangingBaseline;
+// Hanging Baseline : positive numbers indicate that the given baseline is below
+ctx.beginPath();
+ctx.moveTo(x, y+hb);
+ctx.lineTo(w+x, y+hb);
+ctx.closePath();
+ctx.stroke();
+
+x += w + 10;
+
+text = "Ideographic baseline";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var ib = ctx.measureText(text).ideographicBaseline;
+// Ideographic Baseline : positive numbers indicate that the given baseline is below
+ctx.beginPath();
+ctx.moveTo(x, y+ib);
+ctx.lineTo(w+x, y+ib);
+ctx.closePath();
+ctx.stroke();
+
+x = 10;
+y += 80;
+
+ctx.strokeStyle = '#000000';
+var dashList = [2,10];
+ctx.setLineDash(dashList);
+ctx.beginPath();
+ctx.moveTo(0, y);
+ctx.lineTo(800, y);
+ctx.closePath();
+ctx.stroke();
+ctx.strokeStyle = '#888888';
+ctx.setLineDash([]);
+
+text = "Font ascent";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var fa = ctx.measureText(text).fontBoundingBoxAscent;
+// Font Bounding Box Ascent : positive numbers indicate a distance going up
+ctx.beginPath();
+ctx.moveTo(x, y-fa);
+ctx.lineTo(w+x, y-fa);
+ctx.closePath();
+ctx.stroke();
+
+x += w + 50;
+
+text = "Font descent qypg";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var fd = ctx.measureText(text).fontBoundingBoxDescent;
+// Font Bounding Box Descent : positive numbers indicate a distance going down
+ctx.beginPath();
+ctx.moveTo(x, y+fd);
+ctx.lineTo(w+x, y+fd);
+ctx.closePath();
+ctx.stroke();
+
+x = 10;
+y += 80;
+
+ctx.strokeStyle = '#000000';
+var dashList = [2,10];
+ctx.setLineDash(dashList);
+ctx.beginPath();
+ctx.moveTo(0, y);
+ctx.lineTo(800, y);
+ctx.closePath();
+ctx.stroke();
+ctx.strokeStyle = '#888888';
+ctx.setLineDash([]);
+
+text = "Actual";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var aa = ctx.measureText(text).actualBoundingBoxAscent;
+// Actual Bounding Box Ascent : positive numbers indicate a distance going up
+ctx.beginPath();
+ctx.moveTo(x, y-aa);
+ctx.lineTo(w+x, y-aa);
+ctx.closePath();
+ctx.stroke();
+
+x += w + 10;
+
+text = "ascent";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var aa = ctx.measureText(text).actualBoundingBoxAscent;
+// Actual Bounding Box Ascent : positive numbers indicate a distance going up
+ctx.beginPath();
+ctx.moveTo(x, y-aa);
+ctx.lineTo(w+x, y-aa);
+ctx.closePath();
+ctx.stroke();
+
+x += w + 50;
+
+text = "Actual";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var ad = ctx.measureText(text).actualBoundingBoxDescent;
+// Actual Bounding Box Descent : positive numbers indicate a distance going down
+ctx.beginPath();
+ctx.moveTo(x, y+ad);
+ctx.lineTo(w+x, y+ad);
+ctx.closePath();
+ctx.stroke();
+
+x += w + 10;
+
+text = "descent";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var ad = ctx.measureText(text).actualBoundingBoxDescent;
+// Actual Bounding Box Descent : positive numbers indicate a distance going down
+ctx.beginPath();
+ctx.moveTo(x, y+ad);
+ctx.lineTo(w+x, y+ad);
+ctx.closePath();
+ctx.stroke();
+
+x += w + 10;
+
+text = "qypg";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var ad = ctx.measureText(text).actualBoundingBoxDescent;
+// Actual Bounding Box Descent : positive numbers indicate a distance going down
+ctx.beginPath();
+ctx.moveTo(x, y+ad);
+ctx.lineTo(w+x, y+ad);
+ctx.closePath();
+ctx.stroke();
+
+x = 10;
+y += 80;
+
+ctx.strokeStyle = '#000000';
+var dashList = [2,10];
+ctx.setLineDash(dashList);
+ctx.beginPath();
+ctx.moveTo(0, y);
+ctx.lineTo(800, y);
+ctx.closePath();
+ctx.stroke();
+ctx.strokeStyle = '#888888';
+ctx.setLineDash([]);
+
+text = "em Ascent";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var ea = ctx.measureText(text).emHeightAscent;
+// em Height Ascent : positive numbers indicate that the given baseline is below the top of the em square
+ctx.beginPath();
+ctx.moveTo(x, y-fa-ea);
+ctx.lineTo(w+x, y-fa-ea);
+ctx.closePath();
+ctx.stroke();
+
+x += w + 50;
+
+text = "em Descent";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var ed = ctx.measureText(text).emHeightDescent;
+// em Height Descent : positive numbers indicate that the given baseline is below the bottom of the em square
+ctx.beginPath();
+ctx.moveTo(x, y+fd+ed);
+ctx.lineTo(w+x, y+fd+ed);
+ctx.closePath();
+ctx.stroke();
+
+x = 10;
+y += 80;
+
+ctx.strokeStyle = '#000000';
+var dashList = [2,10];
+ctx.setLineDash(dashList);
+ctx.beginPath();
+ctx.moveTo(0, y);
+ctx.lineTo(800, y);
+ctx.closePath();
+ctx.stroke();
+ctx.strokeStyle = '#888888';
+ctx.setLineDash([]);
+
+text = "Left Bound";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var lb = ctx.measureText(text).actualBoundingBoxLeft;
+// Actual Bounding Box Left : positive numbers indicating a distance going left
+ctx.beginPath();
+ctx.moveTo(x-lb, y+fd);
+ctx.lineTo(x-lb, y-fa);
+ctx.closePath();
+ctx.stroke();
+
+x += w + 50;
+
+text = "Right Bound";
+w = ctx.measureText(text).width;
+ctx.fillText(text, x, y);
+var rb = ctx.measureText(text).actualBoundingBoxRight;
+// Actual Bounding Box Right : positive numbers indicating a distance going right
+ctx.beginPath();
+ctx.moveTo(x+rb, y+fd);
+ctx.lineTo(x+rb, y-fa);
+ctx.closePath();
+ctx.stroke();
+
+</script>
« no previous file with comments | « no previous file | LayoutTests/fast/canvas/canvas-text-metrics-bottom.html » ('j') | Source/core/html/TextMetrics.idl » ('J')

Powered by Google App Engine
This is Rietveld 408576698