Add new fontBoundingBoxAscent/Descent test

Add new fontBoundingBoxAscent/Descent test with Ahem font. Firefox and Chrome follow different table to calculate the fontBoundingboxAscent and descent. Ahem is one the font that has the same information across the tables. In this cl, I add a new test using Ahem font, so that the test can work for all browsers. Bug:1129621 Change-Id: I8ef0d7c5788e79f215d763e8494c3db8941b95d8
web-platform-tests · Sep 18, 2020 · e407248 · e407248
1 parent 73cc37d
commit e407248
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/...anvas/element/manual/drawing-text-to-the-canvas/2d.text.measure.fontBoundingBox.ahem.html b/...anvas/element/manual/drawing-text-to-the-canvas/2d.text.measure.fontBoundingBox.ahem.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.measure.fontBoundingBox.ahem</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.fontBoundingBox.ahem</h1>
+<p class="desc">Testing fontBoundingBox for font ahem</p>
+
+<span style="font-family: Ahem; position: absolute; visibility: hidden">A</span>
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Testing fontBoundingBox for font ahem");
+_addTest(function(canvas, ctx) {
+
+var f = new FontFace("Ahem", "/fonts/Ahem.ttf");
+document.fonts.add(f);
+document.fonts.ready.then(() => {
+    step_timeout(t.step_func_done(function () {
+        ctx.font = '50px Ahem';
+        ctx.direction = 'ltr';
+        ctx.align = 'left'
+        _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 40, "ctx.measureText('A').fontBoundingBoxAscent", "40");
+        _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 10, "ctx.measureText('A').fontBoundingBoxDescent", "10");
+
+        _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 40, "ctx.measureText('ABCD').fontBoundingBoxAscent", "40");
+        _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 10, "ctx.measureText('ABCD').fontBoundingBoxDescent", "10");
+    }), 500);
+});
+
+
+});
+</script>
+