LayoutTests/canvas/philip/tests/2d.text.draw.text.metrics.html - Issue 141433026: Font metrics, version 1

Side by Side Diff: LayoutTests/canvas/philip/tests/2d.text.draw.text.metrics.html

Issue 141433026: Font metrics, version 1 (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Fixed windows layout tests Created 6 years, 9 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 unified diff | Download patch

« no previous file with comments | « LayoutTests/canvas/philip/tests/2d.text.draw.baseline.hanging-expected.txt ('k') | LayoutTests/platform/linux/canvas/philip/tests/2d.text.draw.text.metrics-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <title>Canvas test: 2d.text.draw.text.metrics</title>

	3 <script src="../tests.js"></script>

	4 <link rel="stylesheet" href="../tests.css">

	5 <style>

	6 @font-face {

	7 font-family: CanvasTest;

	8 src: url("../fonts/CanvasTest.ttf");

	9 }

	10 </style>

	11 <body>

	12 <p id="passtext">Pass</p>

	13 <p id="failtext">Fail</p>

	14 <span style="font-family: CanvasTest; position: absolute; visibility: hidden">A< /span>

	15 <p class="output">These images should be identical:</p>

	16 <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL ( fallback content)</p></canvas>

	17 <p class="output expectedtext">Expected output:<p><img src="green-100x50.png" cl ass="output expected" id="expected" alt="">

	18 <ul id="d"></ul>

	19 <script>

	20 function _printTextMetrics(ctx) {

	21 var someText = "Some Text";

	22 var highText = "M";

	23 var lowText = "q";

	24 var textMetrics = ctx.measureText(someText);

	25 var highTextMetrics = ctx.measureText(highText);

	26 var lowTextMetrics = ctx.measureText(lowText);

	27 var w = textMetrics.width;

	28 var ab = textMetrics.alphabeticBaseline;

	29 var hb = textMetrics.hangingBaseline;

	30 var ib = textMetrics.ideographicBaseline;

	31 var fa = textMetrics.fontBoundingBoxAscent;

	32 var fd = textMetrics.fontBoundingBoxDescent;

	33 var ea = textMetrics.emHeightAscent;

	34 var ed = textMetrics.emHeightDescent;

	35 var lb = textMetrics.actualBoundingBoxLeft;

	36 var rb = textMetrics.actualBoundingBoxRight;

	37

	38 var ah = highTextMetrics.actualBoundingBoxAscent;

	39 var al = lowTextMetrics.actualBoundingBoxAscent;

	40 var dh = highTextMetrics.actualBoundingBoxDescent;

	41 var dl = lowTextMetrics.actualBoundingBoxDescent;

	42

	43 _warn("Width: " + w);

	44 _warn("Alphabetic Baseline: " + ab);

	45 _warn("Hanging Baseline: " + hb);

	46 _warn("Ideographic Baseline: " + ib);

	47 _warn("Font Bounding Box Ascent: " + fa);

	48 _warn("Font Bounding Box Descent: " + fd);

	49 _warn("eM Height Ascent: " + ea);

	50 _warn("eM Height Descent: " + ed);

	51 _warn("Actual Bounding Box Left: " + lb);

	52 _warn("Actual Bounding Box Right: " + rb);

	53 _warn("Actual Bounding Box Ascent (high): " + ah);

	54 _warn("Actual Bounding Box Ascent (low): " + al);

	55 _warn("Actual Bounding Box Descent (high): " + dh);

	56 _warn("Actual Bounding Box Descent (low): " + dl);

	57 }

	58

	59 _addTest(function(canvas, ctx) {

	60

	61 ctx.font = '50px CanvasTest';

	62 deferTest();

	63 setTimeout(wrapFunction(function () {

	64 ctx.fillStyle = '#f00';

	65 ctx.fillRect(0, 0, 100, 50);

	66 ctx.fillStyle = '#0f0';

	67

	68 ctx.textBaseline="top";

	69 _warn("Baseline: top");

	70 _printTextMetrics(ctx);

	71

	72 ctx.textBaseline="hanging";

	73 _warn("Baseline: hanging");

	74 _printTextMetrics(ctx);

	75

	76 ctx.textBaseline="middle";

	77 _warn("Baseline: middle");

	78 _printTextMetrics(ctx);

	79

	80 ctx.textBaseline="alphabetic";

	81 _warn("Baseline: alphabetic");

	82 _printTextMetrics(ctx);

	83

	84 ctx.textBaseline="ideographic";

	85 _warn("Baseline: ideographic");

	86 _printTextMetrics(ctx);

	87

	88 ctx.textBaseline="bottom";

	89 _warn("Baseline: bottom");

	90 _printTextMetrics(ctx);

	91 }), 500);

	92

	93

	94 });

	95 </script>

	96

OLD	NEW