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,7 +27,10 @@ var t = async_test("Testing actualBoundingBox");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
+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'
@@ -43,7 +46,8 @@ step_timeout(t.step_func_done(function () {
         _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);
+    }), 500);
+});
 
 
 });

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

@@ -27,7 +27,10 @@ var t = async_test("Testing width advances");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
+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'
@@ -45,7 +48,8 @@ step_timeout(t.step_func_done(function () {
         _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);
+    }), 500);
+});
 
 
 });

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

@@ -27,7 +27,10 @@ var t = async_test("Testing baselines");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
+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'
@@ -38,7 +41,8 @@ step_timeout(t.step_func_done(function () {
         _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);
+    }), 500);
+});
 
 
 });

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

@@ -27,7 +27,10 @@ var t = async_test("Testing emHeights");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
+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'
@@ -38,7 +41,8 @@ step_timeout(t.step_func_done(function () {
         _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);
+    }), 500);
+});
 
 
 });

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

@@ -27,7 +27,10 @@ var t = async_test("Testing fontBoundingBox");
 _addTest(function(canvas, ctx) {
 
 deferTest();
-step_timeout(t.step_func_done(function () {
+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'
@@ -36,7 +39,8 @@ step_timeout(t.step_func_done(function () {
 
         _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 85, "ctx.measureText('ABCD').fontBoundingBoxAscent", "85");
         _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 39, "ctx.measureText('ABCD').fontBoundingBoxDescent", "39");
-}), 500);
+    }), 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,11 +23,14 @@
 
 <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 () {
+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");
@@ -35,7 +38,8 @@ step_timeout(t.step_func_done(function () {
 
         ctx.font = '100px CanvasTest';
         _assertSame(ctx.measureText('A').width, 100, "ctx.measureText('A').width", "100");
-}), 500);
+    }), 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 () {
+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);
+    }), 500);
+});
 
 
 });

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

@@ -27,7 +27,10 @@ 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 () {
+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");
@@ -36,7 +39,8 @@ step_timeout(t.step_func_done(function () {
 
         _assertSame(ctx.measureText(' AB').width, 100, "ctx.measureText(' AB').width", "100");
         _assertSame(ctx.measureText('AB ').width, 100, "ctx.measureText('AB ').width", "100");
-}), 500);
+    }), 500);
+});
 
 
 });

third_party/blink/web_tests/external/wpt/2dcontext/tools/tests2dtext.yaml

@@ -967,15 +967,17 @@
   expected: green
 
 
-
-
 - name: 2d.text.measure.width.basic
+  desc: The width of character is same as font used
   testing:
     - 2d.text.measure
   fonts:
     - CanvasTest
   code: |
     deferTest();
+    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';
             @assert ctx.measureText('A').width === 50;
@@ -985,6 +987,7 @@
             ctx.font = '100px CanvasTest';
             @assert ctx.measureText('A').width === 100;
         }), 500);
+    });
 
 - name: 2d.text.measure.width.empty
   desc: The empty string has zero width
@@ -994,10 +997,14 @@
     - CanvasTest
   code: |
     deferTest();
+    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';
             @assert ctx.measureText("").width === 0;
         }), 500);
+    });
 
 - name: 2d.text.measure.width.space
   desc: Space characters are converted to U+0020 and collapsed (per CSS)
@@ -1007,6 +1014,9 @@
     - CanvasTest
   code: |
     deferTest();
+    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';
             @assert ctx.measureText('A B').width === 150;
@@ -1017,6 +1027,7 @@
             @assert ctx.measureText(' AB').width === 100; @moz-todo
             @assert ctx.measureText('AB ').width === 100; @moz-todo
         }), 500);
+    });
 
 - name: 2d.text.measure.advances
   desc: Testing width advances
@@ -1026,6 +1037,9 @@
     - CanvasTest
   code: |
     deferTest();
+    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';
@@ -1045,6 +1059,7 @@
             @assert ctx.measureText('Hello').advances[3] === tm.advances[3];
             @assert ctx.measureText('Hello').advances[4] === tm.advances[4];
         }), 500);
+    });
 
 - name: 2d.text.measure.actualBoundingBox
   desc: Testing actualBoundingBox
@@ -1054,6 +1069,9 @@
     - CanvasTest
   code: |
     deferTest();
+    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';
@@ -1071,6 +1089,7 @@
             @assert ctx.measureText('ABCD').actualBoundingBoxAscent >= 85;
             @assert ctx.measureText('ABCD').actualBoundingBoxDescent >= 37;
         }), 500);
+    });
 
 - name: 2d.text.measure.fontBoundingBox
   desc: Testing fontBoundingBox
@@ -1080,6 +1099,9 @@
     - CanvasTest
   code: |
     deferTest();
+    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';
@@ -1090,6 +1112,7 @@
             @assert ctx.measureText('ABCD').fontBoundingBoxAscent === 85;
             @assert ctx.measureText('ABCD').fontBoundingBoxDescent === 39;
         }), 500);
+    });
 
 - name: 2d.text.measure.emHeights
   desc: Testing emHeights
@@ -1099,6 +1122,9 @@
     - CanvasTest
   code: |
     deferTest();
+    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';
@@ -1111,6 +1137,7 @@
             @assert ctx.measureText('ABCD').emHeightDescent === 12.5;
             @assert ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent === 50;
         }), 500);
+    });
 
 - name: 2d.text.measure.baselines
   desc: Testing baselines
@@ -1120,6 +1147,9 @@
     - CanvasTest
   code: |
     deferTest();
+    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';
@@ -1132,5 +1162,6 @@
             @assert ctx.measureText('ABCD').getBaselines().ideographic === -39;
             @assert ctx.measureText('ABCD').getBaselines().hanging === 68;
         }), 500);
+    });
 
 # TODO: shadows, alpha, composite, clip