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

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

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

@@ -19,33 +19,36 @@
 
 <span style="font-family: CanvasTest; 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>
+<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 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);
-
-
+_addTest(function (canvas, ctx) {
+  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';
+      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");
+    }), 0);
+  });
 });
 </script>
-
+</body>>
\ No newline at end of file

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

@@ -19,35 +19,38 @@
 
 <span style="font-family: CanvasTest; 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>
+<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 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);
-
-
+_addTest(function (canvas, ctx) {
+  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';
+      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) + "\"]");
+    }), 0);
+  });
 });
 </script>
-
+</body>>
\ No newline at end of file

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

@@ -19,28 +19,31 @@
 
 <span style="font-family: CanvasTest; 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>
+<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 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);
-
-
+_addTest(function (canvas, ctx) {
+  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';
+      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");
+    }), 0);
+  });
 });
 </script>
-
+</body>>
\ No newline at end of file

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

@@ -24,23 +24,26 @@
 <ul id="d"></ul>
 <script>
 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);
-
 
+_addTest(function(canvas, ctx) {
+  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';
+      ctx.align = 'left'
+      ctx.baseline = 'alphabetic'
+      _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");
+    }), 0);
+  });
 });
 </script>
-
+</body>>

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

@@ -19,26 +19,30 @@
 
 <span style="font-family: CanvasTest; 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>
+<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");
-_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);
-
-
+_addTest(function (canvas, ctx) {
+  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';
+      ctx.align = 'left'
+      ctx.baseline = 'alphabetic'
+      _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");
+    }), 0);
+  });
 });
 </script>
-
+</body>>
\ No newline at end of file

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

@@ -19,25 +19,28 @@
 
 <span style="font-family: CanvasTest; 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>
+<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("");
-_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);
-
-
-});
+_addTest(function (canvas, ctx) {
+  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';
+      _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");
+    }), 0);
+  });
+})
 </script>
-
+</body>>
\ No newline at end of file

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

@@ -19,20 +19,23 @@
 
 <span style="font-family: CanvasTest; 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>
+<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("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);
-
-
+_addTest(function (canvas, ctx) {
+  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';
+      _assertSame(ctx.measureText("").width, 0, "ctx.measureText(\"\").width", "0");
+    }), 0);
+  });
 });
 </script>
-
+</body>>
\ No newline at end of file