Enable text rendering on OffscreenCanvas

Tests: web-platform-tests/wpt#11362

source

@@ -60011,7 +60011,7 @@ interface <dfn>CanvasPattern</dfn> {
   void <span data-x="dom-canvaspattern-setTransform">setTransform</span>(optional <span>DOMMatrix2DInit</span> transform);
 };
 
-[Exposed=Window]
+[Exposed=(Window,Worker)]
 interface <dfn>TextMetrics</dfn> {
   // x-direction
   readonly attribute double <span data-x="dom-textmetrics-width">width</span>; // advance width
@@ -60903,11 +60903,77 @@ transform. ack Shaun Morris. -->
   <p>Objects that implement the <code>CanvasTextDrawingStyles</code> interface have attributes
   (defined in this section) that control how text is laid out (rasterized or outlined) by the
   object. Such objects can also have a <dfn>font style source object</dfn>. For
-  <code>CanvasRenderingContext2D</code> objects, this is the <code>canvas</code> element
-  referenced by the context's canvas property.</p>
+  <code>CanvasRenderingContext2D</code> objects, this is the <code>canvas</code> element given by
+  the value of the context's <code data-x="dom-context-2d-canvas">canvas</code> attribute. For
+  <code>OffscreenCanvasRenderingContext2D</code> objects, this is the <span>associated
+  <code>OffscreenCanvas</code> object</span>.</p>
+
+  <p>Font resolution for the <span>font style source object</span> requires a <span>font
+  source</span>. This is determined for a given <var>object</var> implementing
+  <code>CanvasTextDrawingStyles</code> by the following steps: <ref spec=CSSFONTLOAD></p>
+
+  <ol>
+   <li><p>If <var>object</var>'s <span>font style source object</span> is a <code>canvas</code>
+   element, return the element's <span>node document</span>.</p></li>
+
+   <li>
+    <p>Otherwise, <var>object</var>'s <span>font style source object</span> is an
+    <code>OffscreenCanvas</code> object:</p>
 
-  <!-- Currently CanvasRenderingContext2D is the only interface that implements
-  CanvasTextDrawingStyles. Future specs for Houdini and OffscrenCanvas will change this-->
+    <ol>
+     <li><p>Let <var>global</var> be <var>object</var>'s <span
+     data-x="concept-relevant-global">relevant global object</span>.</p></li>
+
+     <li><p>If <var>global</var> is a <code>Window</code> object, then return <var>global</var>'s
+     <span data-x="concept-document-window">associated <code>Document</code></span>.</p></li>
+
+     <li><p>Assert: <var>global</var> implements <code>WorkerGlobalScope</code>.</p></li>
+
+     <li><p>Return <var>global</var>.</p></li>
+    </ol>
+   </li>
+  </ol>
+
+  <div class="example">
+   <p>This is an example of font resolution with a regular <code>canvas</code> element with ID <code
+   data-x="">c1</code>.</p>
+
+   <pre><code class="js" data-x="">const font = new FontFace("MyCanvasFont", "url(mycanvasfont.ttf)");
+documents.fonts.add(font);
+
+const context = document.getElementById("c1").getContext("2d");
+document.fonts.ready.then(function() {
+  context.font = "64px MyCanvasFont";
+  context.fillText("hello", 0, 0);
+});</code></pre>
+
+   <p>In this example, the canvas will display text using <code data-x="">mycanvasfont.ttf</code> as
+   its font.</p>
+  </div>
+
+  <div class="example">
+   <p>This is an example of how font resolution can happen using <code>OffscreenCanvas</code>.
+   Assuming a <code>canvas</code> element with ID <code data-x="">c2</code> which is transferred to
+   a worker like so:</p>
+
+   <pre><code class="js" data-x="">const offscreenCanvas = document.getElementById("c2").transferControlToOffscreen();
+worker.postMesage(offscreenCanvas, [offscreenCanvas]);</code></pre>
+
+   <p>Then, in the worker:</p>
+   <pre><code class="js" data-x="">self.onmessage = function(ev) {
+  const transferredCanvas = ev.data;
+  const context = transferredCanvas.getContext("2d");
+  const font = new FontFace("MyFont", "url(myfont.ttf)");
+  self.fonts.add(font);
+  self.fonts.ready.then(function() {
+    context.font = "64px MyFont";
+    context.fillText("hello", 0, 0);
+  });
+};</code></pre>
+
+   <p>In this example, the canvas will display a text using <code data-x="">myfont.ttf</code>.
+   Notice that the font is only loaded inside the worker, and not in the document context.</p>
+  </div>
 
   <p>The <dfn><code data-x="dom-context-2d-font">font</code></dfn> IDL attribute, on setting, must
   be <span data-x="parse something according to a CSS grammar">parsed as a CSS &lt;'font'>
@@ -65347,9 +65413,11 @@ interface <dfn>OffscreenCanvasRenderingContext2D</dfn> {
 <span>OffscreenCanvasRenderingContext2D</span> includes <span>CanvasFilters</span>;
 <span>OffscreenCanvasRenderingContext2D</span> includes <span>CanvasRect</span>;
 <span>OffscreenCanvasRenderingContext2D</span> includes <span>CanvasDrawPath</span>;
+<span>OffscreenCanvasRenderingContext2D</span> includes <span>CanvasText</span>;
 <span>OffscreenCanvasRenderingContext2D</span> includes <span>CanvasDrawImage</span>;
 <span>OffscreenCanvasRenderingContext2D</span> includes <span>CanvasImageData</span>;
 <span>OffscreenCanvasRenderingContext2D</span> includes <span>CanvasPathDrawingStyles</span>;
+<span>OffscreenCanvasRenderingContext2D</span> includes <span>CanvasTextDrawingStyles</span>;
 <span>OffscreenCanvasRenderingContext2D</span> includes <span>CanvasPath</span>;</code></pre>
 
   <p>The <code>OffscreenCanvasRenderingContext2D</code> object is a rendering context for drawing to
@@ -65358,8 +65426,6 @@ interface <dfn>OffscreenCanvasRenderingContext2D</dfn> {
   differences:</p>
 
   <ul>
-   <li><p><span data-x="CanvasText">text rendering</span> is not supported;</p></li>
-   <!-- Text rendering may be added in the future -->
    <li><p>there is no support for <span data-x="CanvasUserInterface">user interface</span>
    features;</p></li>
    <li><p>its <code data-x="offscreencontext2d-canvas">canvas</code> attribute refers to an