Offscreen canvas 2d text tests were failing.

The tests were not initializing the font correctly nor were they
waiting for it to load. This should fix those issues, however the
2d.text.measure.width.space test still fails because of how collapsing
whitespace works. Not sure if this a bug in the test or implementation.

BUG=1066953

Change-Id: I2f0b81da891e6c701b1c9aa7d8d871615ab0ca28
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2132674Reviewed-by: Fernando Serboncini <fserb@chromium.org>
Reviewed-by: Robert Ma <robertma@chromium.org>
Commit-Queue: Dave Tapuska <dtapuska@chromium.org>
Cr-Commit-Position: refs/heads/master@{#755917}

third_party/blink/web_tests/TestExpectations

@@ -3342,30 +3342,6 @@ crbug.com/626703 [ Mac ] external/wpt/service-workers/service-worker/ready.https
 crbug.com/626703 [ Win ] external/wpt/service-workers/service-worker/ready.https.window.html [ Timeout ]
 crbug.com/626703 [ Win7 ] external/wpt/pointerevents/pointerevent_touch-action-pan-x-css_touch.html [ Timeout ]
 crbug.com/1040874 [ Mac ] external/wpt/pointerevents/pointerevent_pointercapture_in_frame.html [ Pass Failure ]
-crbug.com/626703 [ Linux ] external/wpt/offscreen-canvas/text/2d.text.measure.width.empty.worker.html [ Timeout ]
-crbug.com/626703 [ Mac ] external/wpt/offscreen-canvas/text/2d.text.measure.width.empty.worker.html [ Timeout ]
-crbug.com/626703 [ Win ] external/wpt/offscreen-canvas/text/2d.text.measure.width.empty.worker.html [ Timeout ]
-crbug.com/626703 [ Linux ] external/wpt/offscreen-canvas/text/2d.text.measure.width.basic.worker.html [ Timeout ]
-crbug.com/626703 [ Mac ] external/wpt/offscreen-canvas/text/2d.text.measure.width.basic.worker.html [ Timeout ]
-crbug.com/626703 [ Win ] external/wpt/offscreen-canvas/text/2d.text.measure.width.basic.worker.html [ Timeout ]
-crbug.com/626703 [ Linux ] external/wpt/offscreen-canvas/text/2d.text.measure.fontBoundingBox.worker.html [ Timeout ]
-crbug.com/626703 [ Mac ] external/wpt/offscreen-canvas/text/2d.text.measure.fontBoundingBox.worker.html [ Timeout ]
-crbug.com/626703 [ Win ] external/wpt/offscreen-canvas/text/2d.text.measure.fontBoundingBox.worker.html [ Timeout ]
-crbug.com/626703 [ Linux ] external/wpt/offscreen-canvas/text/2d.text.measure.advances.worker.html [ Timeout ]
-crbug.com/626703 [ Mac ] external/wpt/offscreen-canvas/text/2d.text.measure.advances.worker.html [ Timeout ]
-crbug.com/626703 [ Win ] external/wpt/offscreen-canvas/text/2d.text.measure.advances.worker.html [ Timeout ]
-crbug.com/626703 [ Linux ] external/wpt/offscreen-canvas/text/2d.text.measure.actualBoundingBox.worker.html [ Timeout ]
-crbug.com/626703 [ Mac ] external/wpt/offscreen-canvas/text/2d.text.measure.actualBoundingBox.worker.html [ Timeout ]
-crbug.com/626703 [ Win ] external/wpt/offscreen-canvas/text/2d.text.measure.actualBoundingBox.worker.html [ Timeout ]
-crbug.com/626703 [ Linux ] external/wpt/offscreen-canvas/text/2d.text.measure.width.space.worker.html [ Timeout ]
-crbug.com/626703 [ Mac ] external/wpt/offscreen-canvas/text/2d.text.measure.width.space.worker.html [ Timeout ]
-crbug.com/626703 [ Win ] external/wpt/offscreen-canvas/text/2d.text.measure.width.space.worker.html [ Timeout ]
-crbug.com/626703 [ Linux ] external/wpt/offscreen-canvas/text/2d.text.measure.emHeights.worker.html [ Timeout ]
-crbug.com/626703 [ Mac ] external/wpt/offscreen-canvas/text/2d.text.measure.emHeights.worker.html [ Timeout ]
-crbug.com/626703 [ Win ] external/wpt/offscreen-canvas/text/2d.text.measure.emHeights.worker.html [ Timeout ]
-crbug.com/626703 [ Linux ] external/wpt/offscreen-canvas/text/2d.text.measure.baselines.worker.html [ Timeout ]
-crbug.com/626703 [ Mac ] external/wpt/offscreen-canvas/text/2d.text.measure.baselines.worker.html [ Timeout ]
-crbug.com/626703 [ Win ] external/wpt/offscreen-canvas/text/2d.text.measure.baselines.worker.html [ Timeout ]
 crbug.com/626703 [ Win7 ] external/wpt/pointerevents/pointerevent_touch-action-pan-left-css_touch.html [ Timeout ]
 crbug.com/626703 [ Mac ] external/wpt/css/css-fonts/standard-font-family.html [ Failure ]
 crbug.com/626703 [ Mac10.13 ] external/wpt/screen-capture/getdisplaymedia.https.html [ Failure Timeout ]

third_party/blink/web_tests/WPTOverrideExpectations

@@ -955,20 +955,6 @@ external/wpt/offscreen-canvas/shadows/2d.shadow.pattern.alpha.html [ Failure Pas
 external/wpt/offscreen-canvas/shadows/2d.shadow.pattern.basic.html [ Failure Pass ]
 external/wpt/offscreen-canvas/shadows/2d.shadow.pattern.transparent.1.html [ Failure Pass ]
 external/wpt/offscreen-canvas/shadows/2d.shadow.pattern.transparent.2.html [ Failure Pass ]
-external/wpt/offscreen-canvas/text/2d.text.measure.actualBoundingBox.html [ Pass ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.actualBoundingBox.worker.html [ Timeout ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.advances.worker.html [ Timeout ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.baselines.html [ Pass ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.baselines.worker.html [ Timeout ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.emHeights.html [ Pass ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.emHeights.worker.html [ Timeout ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.fontBoundingBox.html [ Pass ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.fontBoundingBox.worker.html [ Timeout ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.width.basic.html [ Pass ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.width.basic.worker.html [ Timeout ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.width.empty.worker.html [ Timeout ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.width.space.html [ Pass ] # wpt_subtest_failure
-external/wpt/offscreen-canvas/text/2d.text.measure.width.space.worker.html [ Timeout ] # wpt_subtest_failure
 external/wpt/offscreen-canvas/the-offscreen-canvas/2d.getcontext.extraargs.worker.html [ Failure Pass ] # wpt_subtest_failure
 external/wpt/offscreen-canvas/the-offscreen-canvas/offscreencanvas.commit.html [ Failure ]
 external/wpt/offscreen-canvas/the-offscreen-canvas/offscreencanvas.resize.html [ Failure Pass ] # wpt_subtest_failure

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.actualBoundingBox.html

@@ -20,12 +20,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
     ctx.font = '50px CanvasTest';
     ctx.direction = 'ltr';
     ctx.align = 'left'

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.actualBoundingBox.worker.js

@@ -16,12 +16,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
     ctx.font = '50px CanvasTest';
     ctx.direction = 'ltr';
     ctx.align = 'left'

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.advances.html

@@ -20,12 +20,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
     ctx.font = '50px CanvasTest';
     ctx.direction = 'ltr';
     ctx.align = 'left'

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.advances.worker.js

@@ -16,12 +16,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
     ctx.font = '50px CanvasTest';
     ctx.direction = 'ltr';
     ctx.align = 'left'

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.baselines.html

@@ -20,12 +20,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
    ctx.font = '50px CanvasTest';
    ctx.direction = 'ltr';
    ctx.align = 'left'

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.baselines.worker.js

@@ -16,12 +16,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
    ctx.font = '50px CanvasTest';
    ctx.direction = 'ltr';
    ctx.align = 'left'

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.emHeights.html

@@ -20,12 +20,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
     ctx.font = '50px CanvasTest';
     ctx.direction = 'ltr';
     ctx.align = 'left'

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.emHeights.worker.js

@@ -16,12 +16,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
     ctx.font = '50px CanvasTest';
     ctx.direction = 'ltr';
     ctx.align = 'left'

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.fontBoundingBox.html

@@ -20,12 +20,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
     ctx.font = '50px CanvasTest';
     ctx.direction = 'ltr';
     ctx.align = 'left'

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.fontBoundingBox.worker.js

@@ -16,12 +16,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
     ctx.font = '50px CanvasTest';
     ctx.direction = 'ltr';
     ctx.align = 'left'

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.width.basic.html

@@ -20,12 +20,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(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");

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.width.basic.worker.js

@@ -16,12 +16,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(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");

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.width.empty.html

@@ -20,12 +20,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
     ctx.font = '50px CanvasTest';
     _assertSame(ctx.measureText("").width, 0, "ctx.measureText(\"\").width", "0");
 }).then(t_pass, t_fail);

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.width.empty.worker.js

@@ -16,12 +16,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(function() {
     ctx.font = '50px CanvasTest';
     _assertSame(ctx.measureText("").width, 0, "ctx.measureText(\"\").width", "0");
 }).then(t_pass, t_fail);

third_party/blink/web_tests/platform/win/external/wpt/offscreen-canvas/text/2d.text.measure.width.space-expected.txt → third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.width.space-expected.txt

 This is a testharness.js-based test.
-FAIL Space characters are converted to U+0020 and collapsed (per CSS) for OffscreenCanvas assert_equals: ctx.measureText('A B').width === 150 (got 81[number], expected 150[number]) expected 150 but got 81
+FAIL Space characters are converted to U+0020 and collapsed (per CSS) for OffscreenCanvas assert_equals: ctx.measureText('A  B').width === 150 (got 200[number], expected 150[number]) expected 150 but got 200
 Harness: the test ran to completion.
 

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.width.space.html

@@ -20,12 +20,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(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");

third_party/blink/web_tests/platform/linux/external/wpt/offscreen-canvas/text/2d.text.measure.width.space-expected.txt → third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.width.space.worker-expected.txt

 This is a testharness.js-based test.
-FAIL Space characters are converted to U+0020 and collapsed (per CSS) for OffscreenCanvas assert_equals: ctx.measureText('A B').width === 150 (got 82[number], expected 150[number]) expected 150 but got 82
+FAIL Space characters are converted to U+0020 and collapsed (per CSS) for OffscreenCanvas assert_equals: ctx.measureText('A  B').width === 150 (got 200[number], expected 150[number]) expected 150 but got 200
 Harness: the test ran to completion.
 

third_party/blink/web_tests/external/wpt/offscreen-canvas/text/2d.text.measure.width.space.worker.js

@@ -16,12 +16,11 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
 let fonts = (self.fonts ? self.fonts : document.fonts);
+f.load();
 fonts.add(f);
-fonts.ready.then(() => {
-    return new Promise(function(resolve) { step_timeout(resolve, 500); });
-}).then(function() {
+fonts.ready.then(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");

third_party/blink/web_tests/external/wpt/offscreen-canvas/tools/tests2d.yaml

@@ -10811,12 +10811,11 @@
   fonts:
     - CanvasTest
   code: |
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
     let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
     fonts.add(f);
-    fonts.ready.then(() => {
-        return new Promise(function(resolve) { step_timeout(resolve, 500); });
-    }).then(function() {
+    fonts.ready.then(function() {
         ctx.font = '50px CanvasTest';
         @assert ctx.measureText('A').width === 50;
         @assert ctx.measureText('AA').width === 100;
@@ -10833,12 +10832,11 @@
   fonts:
     - CanvasTest
   code: |
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
     let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
     fonts.add(f);
-    fonts.ready.then(() => {
-        return new Promise(function(resolve) { step_timeout(resolve, 500); });
-    }).then(function() {
+    fonts.ready.then(function() {
         ctx.font = '50px CanvasTest';
         @assert ctx.measureText("").width === 0;
     }).then(t_pass, t_fail);
@@ -10850,12 +10848,11 @@
   fonts:
     - CanvasTest
   code: |
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
     let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
     fonts.add(f);
-    fonts.ready.then(() => {
-        return new Promise(function(resolve) { step_timeout(resolve, 500); });
-    }).then(function() {
+    fonts.ready.then(function() {
         ctx.font = '50px CanvasTest';
         @assert ctx.measureText('A B').width === 150;
         @assert ctx.measureText('A  B').width === 150; @moz-todo
@@ -10873,12 +10870,11 @@
   fonts:
     - CanvasTest
   code: |
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
     let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
     fonts.add(f);
-    fonts.ready.then(() => {
-        return new Promise(function(resolve) { step_timeout(resolve, 500); });
-    }).then(function() {
+    fonts.ready.then(function() {
         ctx.font = '50px CanvasTest';
         ctx.direction = 'ltr';
         ctx.align = 'left'
@@ -10905,12 +10901,11 @@
   fonts:
     - CanvasTest
   code: |
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
     let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
     fonts.add(f);
-    fonts.ready.then(() => {
-        return new Promise(function(resolve) { step_timeout(resolve, 500); });
-    }).then(function() {
+    fonts.ready.then(function() {
         ctx.font = '50px CanvasTest';
         ctx.direction = 'ltr';
         ctx.align = 'left'
@@ -10935,12 +10930,11 @@
   fonts:
     - CanvasTest
   code: |
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
     let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
     fonts.add(f);
-    fonts.ready.then(() => {
-        return new Promise(function(resolve) { step_timeout(resolve, 500); });
-    }).then(function() {
+    fonts.ready.then(function() {
         ctx.font = '50px CanvasTest';
         ctx.direction = 'ltr';
         ctx.align = 'left'
@@ -10950,7 +10944,6 @@
         @assert ctx.measureText('ABCD').fontBoundingBoxAscent === 85;
         @assert ctx.measureText('ABCD').fontBoundingBoxDescent === 39;
     }).then(t_pass, t_fail);
-
 - name: 2d.text.measure.emHeights
   desc: Testing emHeights for OffscreenCanvas
   testing:
@@ -10958,12 +10951,11 @@
   fonts:
     - CanvasTest
   code: |
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
     let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
     fonts.add(f);
-    fonts.ready.then(() => {
-        return new Promise(function(resolve) { step_timeout(resolve, 500); });
-    }).then(function() {
+    fonts.ready.then(function() {
         ctx.font = '50px CanvasTest';
         ctx.direction = 'ltr';
         ctx.align = 'left'
@@ -10975,7 +10967,6 @@
         @assert ctx.measureText('ABCD').emHeightDescent === 12.5;
         @assert ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent === 50;
     }).then(t_pass, t_fail);
-
 - name: 2d.text.measure.baselines
   desc: Testing baselines for OffscreenCanvas
   testing:
@@ -10983,12 +10974,11 @@
   fonts:
     - CanvasTest
   code: |
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
     let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
     fonts.add(f);
-    fonts.ready.then(() => {
-        return new Promise(function(resolve) { step_timeout(resolve, 500); });
-    }).then(function() {
+    fonts.ready.then(function() {
        ctx.font = '50px CanvasTest';
        ctx.direction = 'ltr';
        ctx.align = 'left'
@@ -11000,5 +10990,4 @@
        @assert ctx.measureText('ABCD').getBaselines().ideographic === -39;
        @assert ctx.measureText('ABCD').getBaselines().hanging === 68;
     }).then(t_pass, t_fail);
-
 # TODO: shadows, alpha, composite, clip

third_party/blink/web_tests/platform/linux/external/wpt/offscreen-canvas/text/2d.text.measure.actualBoundingBox-expected.txt

-This is a testharness.js-based test.
-FAIL Testing actualBoundingBox for OffscreenCanvas assert_true: ctx.measureText('A').actualBoundingBoxRight >= 50 expected true got false
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/linux/external/wpt/offscreen-canvas/text/2d.text.measure.width.basic-expected.txt

-This is a testharness.js-based test.
-FAIL The width of character is same as font used for OffscreenCanvas assert_equals: ctx.measureText('A').width === 50 (got 36[number], expected 50[number]) expected 50 but got 36
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac-mac10.12/external/wpt/offscreen-canvas/text/2d.text.measure.emHeights-expected.txt

-This is a testharness.js-based test.
-FAIL Testing emHeights for OffscreenCanvas assert_equals: ctx.measureText('A').emHeightAscent === 37.5 (got 38.984375[number], expected 37.5[number]) expected 37.5 but got 38.984375
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac/external/wpt/offscreen-canvas/text/2d.text.measure.actualBoundingBox-expected.txt

-This is a testharness.js-based test.
-FAIL Testing actualBoundingBox for OffscreenCanvas assert_equals: Math.abs(ctx.measureText('A').actualBoundingBoxLeft) === 0 (got 0.732421875[number], expected 0[number]) expected 0 but got 0.732421875
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac/external/wpt/offscreen-canvas/text/2d.text.measure.baselines-expected.txt

-This is a testharness.js-based test.
-FAIL Testing baselines for OffscreenCanvas assert_equals: ctx.measureText('A').getBaselines().ideographic === -39 (got -13[number], expected -39[number]) expected -39 but got -13
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac/external/wpt/offscreen-canvas/text/2d.text.measure.fontBoundingBox-expected.txt

-This is a testharness.js-based test.
-FAIL Testing fontBoundingBox for OffscreenCanvas assert_equals: ctx.measureText('A').fontBoundingBoxAscent === 85 (got 46[number], expected 85[number]) expected 85 but got 46
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac/external/wpt/offscreen-canvas/text/2d.text.measure.width.basic-expected.txt

-This is a testharness.js-based test.
-FAIL The width of character is same as font used for OffscreenCanvas assert_equals: ctx.measureText('A').width === 50 (got 36.1083984375[number], expected 50[number]) expected 50 but got 36.1083984375
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac/external/wpt/offscreen-canvas/text/2d.text.measure.width.space-expected.txt

-This is a testharness.js-based test.
-FAIL Space characters are converted to U+0020 and collapsed (per CSS) for OffscreenCanvas assert_equals: ctx.measureText('A B').width === 150 (got 81.9580078125[number], expected 150[number]) expected 150 but got 81.9580078125
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/win/external/wpt/offscreen-canvas/text/2d.text.measure.actualBoundingBox-expected.txt

-This is a testharness.js-based test.
-FAIL Testing actualBoundingBox for OffscreenCanvas assert_equals: Math.abs(ctx.measureText('A').actualBoundingBoxLeft) === 0 (got 1[number], expected 0[number]) expected 0 but got 1
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/win/external/wpt/offscreen-canvas/text/2d.text.measure.baselines-expected.txt

-This is a testharness.js-based test.
-FAIL Testing baselines for OffscreenCanvas assert_equals: ctx.measureText('A').getBaselines().ideographic === -39 (got -12[number], expected -39[number]) expected -39 but got -12
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/win/external/wpt/offscreen-canvas/text/2d.text.measure.emHeights-expected.txt

-This is a testharness.js-based test.
-FAIL Testing emHeights for OffscreenCanvas assert_equals: ctx.measureText('A').emHeightAscent === 37.5 (got 38.125[number], expected 37.5[number]) expected 37.5 but got 38.125
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/win/external/wpt/offscreen-canvas/text/2d.text.measure.fontBoundingBox-expected.txt

-This is a testharness.js-based test.
-FAIL Testing fontBoundingBox for OffscreenCanvas assert_equals: ctx.measureText('A').fontBoundingBoxAscent === 85 (got 45[number], expected 85[number]) expected 85 but got 45
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/win/external/wpt/offscreen-canvas/text/2d.text.measure.width.basic-expected.txt

-This is a testharness.js-based test.
-FAIL The width of character is same as font used for OffscreenCanvas assert_equals: ctx.measureText('A').width === 50 (got 35[number], expected 50[number]) expected 50 but got 35
-Harness: the test ran to completion.
-