canvas-textMetrics-all.html | Explore in Territory

<!DOCTYPE HTML>
<head>
<style>
@font-face {
  font-family: Libertine;
  src: url('../../third_party/Libertine/LinLibertine_R.woff');
}
</style>
</head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
function testTextMetrics(textMetrics, expected)
{
    var w  = textMetrics.width;
    var ba = textMetrics.alphabeticBaseline;
    var bh = textMetrics.hangingBaseline;
    var bi = textMetrics.ideographicBaseline;
    var fa = textMetrics.fontBoundingBoxAscent;
    var fd = textMetrics.fontBoundingBoxDescent;
    var ea = textMetrics.emHeightAscent;
    var ed = textMetrics.emHeightDescent;
    var lb = textMetrics.actualBoundingBoxLeft;
    var rb = textMetrics.actualBoundingBoxRight;
    var aa = textMetrics.actualBoundingBoxAscent;
    var ad = textMetrics.actualBoundingBoxDescent;

    var epsilon = 3;
    assert_approx_equals(w,  expected[0], epsilon, "testing width");
    assert_approx_equals(ba, expected[1], epsilon, "testing alphabeticBaseline");
    assert_approx_equals(bh, expected[2], epsilon, "testing hangingBaseline");
    assert_approx_equals(bi, expected[3], epsilon, "testing ideographicBaseline");
    assert_approx_equals(fa, expected[4], epsilon, "testing fontBoundingBoxAscent");
    assert_approx_equals(fd, expected[5], epsilon, "testing fontBoundingBoxDescent");
    assert_approx_equals(ea, expected[6], epsilon, "testing emHeightAscent");
    assert_approx_equals(ed, expected[7], epsilon, "testing emHeightDescent");
    assert_approx_equals(lb, expected[8], epsilon, "testing actualBoundingBoxLeft");
    assert_approx_equals(rb, expected[9], epsilon, "testing actualBoundingBoxRight");
    assert_approx_equals(aa, expected[10], epsilon, "testing actualBoundingBoxAscent");
    assert_approx_equals(ad, expected[11], epsilon, "testing actualBoundingBoxDescent");
}

function measureMetrics(ctx)
{
    var text = "Hello World";

    ctx.textBaseline = "top";
    var textMetrics = ctx.measureText(text);
    var expected = [249,-39,-3,-51,6,51,0,49,0,250,-4,41];
    testTextMetrics(textMetrics, expected);

    ctx.textBaseline = "hanging";
    var textMetrics = ctx.measureText(text);
    expected = [249,-36,0,-48,9,48,3,46,0,250,-1,38];
    testTextMetrics(textMetrics, expected);

    ctx.textBaseline = "middle";
    var textMetrics = ctx.measureText(text);
    expected = [249,-14,22,-26,31,26,25,24,0,250,21,16];
    testTextMetrics(textMetrics, expected);

    ctx.textBaseline = "alphabetic";
    var textMetrics = ctx.measureText(text);
    expected = [249,0,36,-12,45,12,39,10,0,250,35,2];
    testTextMetrics(textMetrics, expected);

    ctx.textBaseline = "ideographic";
    var textMetrics = ctx.measureText(text);
    expected = [249,12,48,0,57,0,51,-2,0,250,47,-10];
    testTextMetrics(textMetrics, expected);

    ctx.textBaseline = "bottom";
    var textMetrics = ctx.measureText(text);
    expected = [249,11,47,-1,56,1,50,-1,0,250,46,-9];
    testTextMetrics(textMetrics, expected);
}

async_test(t => {
    var canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;
    var ctx = canvas.getContext('2d');
    ctx.font = '50px Libertine';
    // Kick off loading of the font
    ctx.fillText(" ", 0, 0);
    document.fonts.addEventListener('loadingdone', t.step_func_done(function() {
        measureMetrics(ctx);
    }));
}, "Test all attributes of TextMetrics.");
</script>
chromium/third_party/blink/web_tests/fast/canvas-api/canvas-textMetrics-all.html
