Canvas::TestMetrics: Measure the TextMetrics info after loading the font

Change-Id: Iabcb3d7c34f20376d02df420ef0baa4649d94219
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1645676
Commit-Queue: Yi Xu <yiyix@chromium.org>
Reviewed-by: Fernando Serboncini <fserb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#667305}

third_party/blink/web_tests/external/wpt/2dcontext/drawing-text-to-the-canvas/2d.text.measure.actualBoundingBox.html

@@ -27,23 +27,27 @@ var t = async_test("Testing actualBoundingBox");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
-    ctx.font = '50px CanvasTest';
-    ctx.direction = 'ltr';
-    ctx.align = 'left'
-    ctx.baseline = 'alphabetic'
-    // Some platforms may return '-0'.
-    _assertSame(Math.abs(ctx.measureText('A').actualBoundingBoxLeft), 0, "Math.abs(ctx.measureText('A').actualBoundingBoxLeft)", "0");
-    // Different platforms may render text slightly different.
-    _assert(ctx.measureText('A').actualBoundingBoxRight >= 50, "ctx.measureText('A').actualBoundingBoxRight >= 50");
-    _assert(ctx.measureText('A').actualBoundingBoxAscent >= 35, "ctx.measureText('A').actualBoundingBoxAscent >= 35");
-    _assertSame(Math.abs(ctx.measureText('A').actualBoundingBoxDescent), 0, "Math.abs(ctx.measureText('A').actualBoundingBoxDescent)", "0");
-
-    _assertSame(Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft), 0, "Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft)", "0");
-    _assert(ctx.measureText('ABCD').actualBoundingBoxRight >= 200, "ctx.measureText('ABCD').actualBoundingBoxRight >= 200");
-    _assert(ctx.measureText('ABCD').actualBoundingBoxAscent >= 85, "ctx.measureText('ABCD').actualBoundingBoxAscent >= 85");
-    _assert(ctx.measureText('ABCD').actualBoundingBoxDescent >= 37, "ctx.measureText('ABCD').actualBoundingBoxDescent >= 37");
-}), 500);
+var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+document.fonts.add(f);
+document.fonts.ready.then(() => {
+    step_timeout(t.step_func_done(function () {
+        ctx.font = '50px CanvasTest';
+        ctx.direction = 'ltr';
+        ctx.align = 'left'
+        ctx.baseline = 'alphabetic'
+        // Some platforms may return '-0'.
+        _assertSame(Math.abs(ctx.measureText('A').actualBoundingBoxLeft), 0, "Math.abs(ctx.measureText('A').actualBoundingBoxLeft)", "0");
+        // Different platforms may render text slightly different.
+        _assert(ctx.measureText('A').actualBoundingBoxRight >= 50, "ctx.measureText('A').actualBoundingBoxRight >= 50");
+        _assert(ctx.measureText('A').actualBoundingBoxAscent >= 35, "ctx.measureText('A').actualBoundingBoxAscent >= 35");
+        _assertSame(Math.abs(ctx.measureText('A').actualBoundingBoxDescent), 0, "Math.abs(ctx.measureText('A').actualBoundingBoxDescent)", "0");
+
+        _assertSame(Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft), 0, "Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft)", "0");
+        _assert(ctx.measureText('ABCD').actualBoundingBoxRight >= 200, "ctx.measureText('ABCD').actualBoundingBoxRight >= 200");
+        _assert(ctx.measureText('ABCD').actualBoundingBoxAscent >= 85, "ctx.measureText('ABCD').actualBoundingBoxAscent >= 85");
+        _assert(ctx.measureText('ABCD').actualBoundingBoxDescent >= 37, "ctx.measureText('ABCD').actualBoundingBoxDescent >= 37");
+    }), 500);
+});
 
 
 });

third_party/blink/web_tests/external/wpt/2dcontext/drawing-text-to-the-canvas/2d.text.measure.advances.html

@@ -27,25 +27,29 @@ var t = async_test("Testing width advances");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
-    ctx.font = '50px CanvasTest';
-    ctx.direction = 'ltr';
-    ctx.align = 'left'
-    // Some platforms may return '-0'.
-    _assertSame(Math.abs(ctx.measureText('Hello').advances[0]), 0, "Math.abs(ctx.measureText('Hello').advances[\""+(0)+"\"])", "0");
-    // Different platforms may render text slightly different.
-    _assert(ctx.measureText('Hello').advances[1] >= 36, "ctx.measureText('Hello').advances[\""+(1)+"\"] >= 36");
-    _assert(ctx.measureText('Hello').advances[2] >= 58, "ctx.measureText('Hello').advances[\""+(2)+"\"] >= 58");
-    _assert(ctx.measureText('Hello').advances[3] >= 70, "ctx.measureText('Hello').advances[\""+(3)+"\"] >= 70");
-    _assert(ctx.measureText('Hello').advances[4] >= 80, "ctx.measureText('Hello').advances[\""+(4)+"\"] >= 80");
-
-    var tm = ctx.measureText('Hello');
-    _assertSame(ctx.measureText('Hello').advances[0], tm.advances[0], "ctx.measureText('Hello').advances[\""+(0)+"\"]", "tm.advances[\""+(0)+"\"]");
-    _assertSame(ctx.measureText('Hello').advances[1], tm.advances[1], "ctx.measureText('Hello').advances[\""+(1)+"\"]", "tm.advances[\""+(1)+"\"]");
-    _assertSame(ctx.measureText('Hello').advances[2], tm.advances[2], "ctx.measureText('Hello').advances[\""+(2)+"\"]", "tm.advances[\""+(2)+"\"]");
-    _assertSame(ctx.measureText('Hello').advances[3], tm.advances[3], "ctx.measureText('Hello').advances[\""+(3)+"\"]", "tm.advances[\""+(3)+"\"]");
-    _assertSame(ctx.measureText('Hello').advances[4], tm.advances[4], "ctx.measureText('Hello').advances[\""+(4)+"\"]", "tm.advances[\""+(4)+"\"]");
-}), 500);
+var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+document.fonts.add(f);
+document.fonts.ready.then(() => {
+    step_timeout(t.step_func_done(function () {
+        ctx.font = '50px CanvasTest';
+        ctx.direction = 'ltr';
+        ctx.align = 'left'
+        // Some platforms may return '-0'.
+        _assertSame(Math.abs(ctx.measureText('Hello').advances[0]), 0, "Math.abs(ctx.measureText('Hello').advances[\""+(0)+"\"])", "0");
+        // Different platforms may render text slightly different.
+        _assert(ctx.measureText('Hello').advances[1] >= 36, "ctx.measureText('Hello').advances[\""+(1)+"\"] >= 36");
+        _assert(ctx.measureText('Hello').advances[2] >= 58, "ctx.measureText('Hello').advances[\""+(2)+"\"] >= 58");
+        _assert(ctx.measureText('Hello').advances[3] >= 70, "ctx.measureText('Hello').advances[\""+(3)+"\"] >= 70");
+        _assert(ctx.measureText('Hello').advances[4] >= 80, "ctx.measureText('Hello').advances[\""+(4)+"\"] >= 80");
+
+        var tm = ctx.measureText('Hello');
+        _assertSame(ctx.measureText('Hello').advances[0], tm.advances[0], "ctx.measureText('Hello').advances[\""+(0)+"\"]", "tm.advances[\""+(0)+"\"]");
+        _assertSame(ctx.measureText('Hello').advances[1], tm.advances[1], "ctx.measureText('Hello').advances[\""+(1)+"\"]", "tm.advances[\""+(1)+"\"]");
+        _assertSame(ctx.measureText('Hello').advances[2], tm.advances[2], "ctx.measureText('Hello').advances[\""+(2)+"\"]", "tm.advances[\""+(2)+"\"]");
+        _assertSame(ctx.measureText('Hello').advances[3], tm.advances[3], "ctx.measureText('Hello').advances[\""+(3)+"\"]", "tm.advances[\""+(3)+"\"]");
+        _assertSame(ctx.measureText('Hello').advances[4], tm.advances[4], "ctx.measureText('Hello').advances[\""+(4)+"\"]", "tm.advances[\""+(4)+"\"]");
+    }), 500);
+});
 
 
 });

third_party/blink/web_tests/external/wpt/2dcontext/drawing-text-to-the-canvas/2d.text.measure.baselines.html

@@ -27,18 +27,22 @@ var t = async_test("Testing baselines");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
-    ctx.font = '50px CanvasTest';
-    ctx.direction = 'ltr';
-    ctx.align = 'left'
-    _assertSame(Math.abs(ctx.measureText('A').getBaselines().alphabetic), 0, "Math.abs(ctx.measureText('A').getBaselines().alphabetic)", "0");
-    _assertSame(ctx.measureText('A').getBaselines().ideographic, -39, "ctx.measureText('A').getBaselines().ideographic", "-39");
-    _assertSame(ctx.measureText('A').getBaselines().hanging, 68, "ctx.measureText('A').getBaselines().hanging", "68");
-
-    _assertSame(Math.abs(ctx.measureText('ABCD').getBaselines().alphabetic), 0, "Math.abs(ctx.measureText('ABCD').getBaselines().alphabetic)", "0");
-    _assertSame(ctx.measureText('ABCD').getBaselines().ideographic, -39, "ctx.measureText('ABCD').getBaselines().ideographic", "-39");
-    _assertSame(ctx.measureText('ABCD').getBaselines().hanging, 68, "ctx.measureText('ABCD').getBaselines().hanging", "68");
-}), 500);
+var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+document.fonts.add(f);
+document.fonts.ready.then(() => {
+     step_timeout(t.step_func_done(function () {
+        ctx.font = '50px CanvasTest';
+        ctx.direction = 'ltr';
+        ctx.align = 'left'
+        _assertSame(Math.abs(ctx.measureText('A').getBaselines().alphabetic), 0, "Math.abs(ctx.measureText('A').getBaselines().alphabetic)", "0");
+        _assertSame(ctx.measureText('A').getBaselines().ideographic, -39, "ctx.measureText('A').getBaselines().ideographic", "-39");
+        _assertSame(ctx.measureText('A').getBaselines().hanging, 68, "ctx.measureText('A').getBaselines().hanging", "68");
+
+        _assertSame(Math.abs(ctx.measureText('ABCD').getBaselines().alphabetic), 0, "Math.abs(ctx.measureText('ABCD').getBaselines().alphabetic)", "0");
+        _assertSame(ctx.measureText('ABCD').getBaselines().ideographic, -39, "ctx.measureText('ABCD').getBaselines().ideographic", "-39");
+        _assertSame(ctx.measureText('ABCD').getBaselines().hanging, 68, "ctx.measureText('ABCD').getBaselines().hanging", "68");
+    }), 500);
+});
 
 
 });

third_party/blink/web_tests/external/wpt/2dcontext/drawing-text-to-the-canvas/2d.text.measure.emHeights.html

@@ -27,18 +27,22 @@ var t = async_test("Testing emHeights");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
-    ctx.font = '50px CanvasTest';
-    ctx.direction = 'ltr';
-    ctx.align = 'left'
-    _assertSame(ctx.measureText('A').emHeightAscent, 37.5, "ctx.measureText('A').emHeightAscent", "37.5");
-    _assertSame(ctx.measureText('A').emHeightDescent, 12.5, "ctx.measureText('A').emHeightDescent", "12.5");
-    _assertSame(ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent, 50, "ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent", "50");
-
-    _assertSame(ctx.measureText('ABCD').emHeightAscent, 37.5, "ctx.measureText('ABCD').emHeightAscent", "37.5");
-    _assertSame(ctx.measureText('ABCD').emHeightDescent, 12.5, "ctx.measureText('ABCD').emHeightDescent", "12.5");
-    _assertSame(ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent, 50, "ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent", "50");
-}), 500);
+var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+document.fonts.add(f);
+document.fonts.ready.then(() => {
+     step_timeout(t.step_func_done(function () {
+        ctx.font = '50px CanvasTest';
+        ctx.direction = 'ltr';
+        ctx.align = 'left'
+        _assertSame(ctx.measureText('A').emHeightAscent, 37.5, "ctx.measureText('A').emHeightAscent", "37.5");
+        _assertSame(ctx.measureText('A').emHeightDescent, 12.5, "ctx.measureText('A').emHeightDescent", "12.5");
+        _assertSame(ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent, 50, "ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent", "50");
+
+        _assertSame(ctx.measureText('ABCD').emHeightAscent, 37.5, "ctx.measureText('ABCD').emHeightAscent", "37.5");
+        _assertSame(ctx.measureText('ABCD').emHeightDescent, 12.5, "ctx.measureText('ABCD').emHeightDescent", "12.5");
+        _assertSame(ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent, 50, "ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent", "50");
+    }), 500);
+});
 
 
 });

third_party/blink/web_tests/external/wpt/2dcontext/drawing-text-to-the-canvas/2d.text.measure.fontBoundingBox.html

@@ -27,16 +27,20 @@ var t = async_test("Testing fontBoundingBox");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
-    ctx.font = '50px CanvasTest';
-    ctx.direction = 'ltr';
-    ctx.align = 'left'
-    _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 85, "ctx.measureText('A').fontBoundingBoxAscent", "85");
-    _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 39, "ctx.measureText('A').fontBoundingBoxDescent", "39");
-
-    _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 85, "ctx.measureText('ABCD').fontBoundingBoxAscent", "85");
-    _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 39, "ctx.measureText('ABCD').fontBoundingBoxDescent", "39");
-}), 500);
+var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+document.fonts.add(f);
+document.fonts.ready.then(() => {
+    step_timeout(t.step_func_done(function () {
+        ctx.font = '50px CanvasTest';
+        ctx.direction = 'ltr';
+        ctx.align = 'left'
+        _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 85, "ctx.measureText('A').fontBoundingBoxAscent", "85");
+        _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 39, "ctx.measureText('A').fontBoundingBoxDescent", "39");
+
+        _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 85, "ctx.measureText('ABCD').fontBoundingBoxAscent", "85");
+        _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 39, "ctx.measureText('ABCD').fontBoundingBoxDescent", "39");
+    }), 500);
+});
 
 
 });

third_party/blink/web_tests/external/wpt/2dcontext/drawing-text-to-the-canvas/2d.text.measure.width.basic.html

@@ -14,7 +14,7 @@
 <body class="show_output">
 
 <h1>2d.text.measure.width.basic</h1>
-<p class="desc"></p>
+<p class="desc">The width of character is same as font used</p>
 
 
 <span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
@@ -23,19 +23,23 @@
 
 <ul id="d"></ul>
 <script>
-var t = async_test("");
+var t = async_test("The width of character is same as font used");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
-    ctx.font = '50px CanvasTest';
-    _assertSame(ctx.measureText('A').width, 50, "ctx.measureText('A').width", "50");
-    _assertSame(ctx.measureText('AA').width, 100, "ctx.measureText('AA').width", "100");
-    _assertSame(ctx.measureText('ABCD').width, 200, "ctx.measureText('ABCD').width", "200");
-
-    ctx.font = '100px CanvasTest';
-    _assertSame(ctx.measureText('A').width, 100, "ctx.measureText('A').width", "100");
-}), 500);
+var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+document.fonts.add(f);
+document.fonts.ready.then(() => {
+    step_timeout(t.step_func_done(function () {
+        ctx.font = '50px CanvasTest';
+        _assertSame(ctx.measureText('A').width, 50, "ctx.measureText('A').width", "50");
+        _assertSame(ctx.measureText('AA').width, 100, "ctx.measureText('AA').width", "100");
+        _assertSame(ctx.measureText('ABCD').width, 200, "ctx.measureText('ABCD').width", "200");
+
+        ctx.font = '100px CanvasTest';
+        _assertSame(ctx.measureText('A').width, 100, "ctx.measureText('A').width", "100");
+    }), 500);
+});
 
 
 });

third_party/blink/web_tests/external/wpt/2dcontext/drawing-text-to-the-canvas/2d.text.measure.width.empty.html

@@ -27,10 +27,14 @@ var t = async_test("The empty string has zero width");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
-    ctx.font = '50px CanvasTest';
-    _assertSame(ctx.measureText("").width, 0, "ctx.measureText(\"\").width", "0");
-}), 500);
+var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+document.fonts.add(f);
+document.fonts.ready.then(() => {
+    step_timeout(t.step_func_done(function () {
+        ctx.font = '50px CanvasTest';
+        _assertSame(ctx.measureText("").width, 0, "ctx.measureText(\"\").width", "0");
+    }), 500);
+});
 
 
 });

third_party/blink/web_tests/external/wpt/2dcontext/text-styles/2d.text.measure.width.space.html

@@ -27,16 +27,20 @@ var t = async_test("Space characters are converted to U+0020 and collapsed (per
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
-    ctx.font = '50px CanvasTest';
-    _assertSame(ctx.measureText('A B').width, 150, "ctx.measureText('A B').width", "150");
-    _assertSame(ctx.measureText('A  B').width, 150, "ctx.measureText('A  B').width", "150");
-    _assertSame(ctx.measureText('A \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dB').width, 150, "ctx.measureText('A \\x09\\x0a\\x0c\\x0d  \\x09\\x0a\\x0c\\x0dB').width", "150");
-    _assert(ctx.measureText('A \x0b B').width >= 200, "ctx.measureText('A \\x0b B').width >= 200");
-
-    _assertSame(ctx.measureText(' AB').width, 100, "ctx.measureText(' AB').width", "100");
-    _assertSame(ctx.measureText('AB ').width, 100, "ctx.measureText('AB ').width", "100");
-}), 500);
+var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+document.fonts.add(f);
+document.fonts.ready.then(() => {
+    step_timeout(t.step_func_done(function () {
+        ctx.font = '50px CanvasTest';
+        _assertSame(ctx.measureText('A B').width, 150, "ctx.measureText('A B').width", "150");
+        _assertSame(ctx.measureText('A  B').width, 150, "ctx.measureText('A  B').width", "150");
+        _assertSame(ctx.measureText('A \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dB').width, 150, "ctx.measureText('A \\x09\\x0a\\x0c\\x0d  \\x09\\x0a\\x0c\\x0dB').width", "150");
+        _assert(ctx.measureText('A \x0b B').width >= 200, "ctx.measureText('A \\x0b B').width >= 200");
+
+        _assertSame(ctx.measureText(' AB').width, 100, "ctx.measureText(' AB').width", "100");
+        _assertSame(ctx.measureText('AB ').width, 100, "ctx.measureText('AB ').width", "100");
+    }), 500);
+});
 
 
 });