Update letterSpacing/wordSpacing to use CSS <length> strings

Re-closes whatwg#5617.

source

@@ -61382,12 +61382,12 @@ interface mixin <dfn interface>CanvasTextDrawingStyles</dfn> {
   attribute <span>CanvasTextAlign</span> <span data-x="dom-context-2d-textAlign">textAlign</span>; // (default: "start")
   attribute <span>CanvasTextBaseline</span> <span data-x="dom-context-2d-textBaseline">textBaseline</span>; // (default: "alphabetic")
   attribute <span>CanvasDirection</span> <span data-x="dom-context-2d-direction">direction</span>; // (default: "inherit")
-  attribute double <span data-x="dom-context-2d-letterSpacing">letterSpacing</span>; // (default: 0)
+  attribute DOMString <span data-x="dom-context-2d-letterSpacing">letterSpacing</span>; // (default: "0px")
   attribute <span>CanvasFontKerning</span> <span data-x="dom-context-2d-fontKerning">fontKerning</span>; // (default: "auto")
   attribute <span>CanvasFontStretch</span> <span data-x="dom-context-2d-fontStretch">fontStretch</span>; // (default: "normal")
   attribute <span>CanvasFontVariantCaps</span> <span data-x="dom-context-2d-fontVariantCaps">fontVariantCaps</span>; // (default: "normal")
   attribute <span>CanvasTextRendering</span> <span data-x="dom-context-2d-textRendering">textRendering</span>; // (default: "auto")
-  attribute double <span data-x="dom-context-2d-wordSpacing">wordSpacing</span>; // (default: 0)
+  attribute DOMString <span data-x="dom-context-2d-wordSpacing">wordSpacing</span>; // (default: "0px")
 };
 
 interface mixin <dfn interface>CanvasPath</dfn> {
@@ -61824,9 +61824,11 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
   <ul class="brief">
    <li>The current <span data-x="dom-context-2d-transformation">transformation matrix</span>.</li>
    <li>The current <span>clipping region</span>.</li>
+   <li>The current <span data-x="concept-CanvasTextDrawingStyles-letter-spacing">letter
+   spacing</span>, <span data-x="concept-CanvasTextDrawingStyles-word-spacing">word
+   spacing</span>, <span data-x="concept-CanvasFillStrokeStyles-fill-style">fill style</span>, and
+   <span data-x="concept-CanvasFillStrokeStyles-stroke-style">stroke style</span>.</li>
    <li>The current values of the following attributes: <code
-   data-x="dom-context-2d-strokeStyle">strokeStyle</code>, <code
-   data-x="dom-context-2d-fillStyle">fillStyle</code>, <code
    data-x="dom-context-2d-globalAlpha">globalAlpha</code>, <code
    data-x="dom-context-2d-lineWidth">lineWidth</code>, <code
    data-x="dom-context-2d-lineCap">lineCap</code>, <code
@@ -61843,12 +61845,10 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
    data-x="dom-context-2d-textAlign">textAlign</code>, <code
    data-x="dom-context-2d-textBaseline">textBaseline</code>, <code
    data-x="dom-context-2d-direction">direction</code>, <code
-   data-x="dom-context-2d-letterSpacing">letterSpacing</code>, <code
    data-x="dom-context-2d-fontKerning">fontKerning</code>, <code
    data-x="dom-context-2d-fontStretch">fontStretch</code>, <code
    data-x="dom-context-2d-fontVariantCaps">fontVariantCaps</code>, <code
    data-x="dom-context-2d-textRendering">textRendering</code>, <code
-   data-x="dom-context-2d-wordSpacing">wordSpacing</code>, <code
    data-x="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>, <code
    data-x="dom-context-2d-imageSmoothingQuality">imageSmoothingQuality</code>.</li>
    <li>The current <span>dash list</span>.</li>
@@ -62380,8 +62380,8 @@ transform. ack Shaun Morris. -->
    <dd>
     <p>Returns the current spacing between characters in the text.</p>
 
-    <p>Can be set, to change spacing between characters. Positive values spreads characters further
-    apart, while negative values brings them closer together. The default is 0.</p>
+    <p>Can be set, to change spacing between characters. Values that cannot be parsed as a CSS
+    <span>&lt;length></span> are ignored. The default is "<code data-x="">0px</code>".</p>
    </dd>
 
    <dt><code data-x=""><var>context</var>.<span subdfn data-x="dom-context-2d-fontKerning">fontKerning</span> [ = <var>value</var> ]</code></dt>
@@ -62429,8 +62429,8 @@ transform. ack Shaun Morris. -->
    <dd>
     <p>Returns the current spacing between words in the text.</p>
 
-    <p>Can be set, to change spacing between words. Positive values spreads words further apart,
-    while negative values brings them closer together. The default is 0.</p>
+    <p>Can be set, to change spacing between words. Values that cannot be parsed as a CSS
+    <span>&lt;length></span> are ignored. The default is "<code data-x="">0px</code>".</p>
    </dd>
   </dl>
 
@@ -62583,13 +62583,48 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
   data-x="dom-context-2d-direction">direction</code> attribute must initially have the value "<code
   data-x="dom-context-2d-direction-inherit">inherit</code>".</p>
 
-  <p>The <dfn attribute for="CanvasTextDrawingStyles"><code
-  data-x="dom-context-2d-letterSpacing">letterSpacing</code></dfn> IDL attribute, on
-  getting, must return the current value. On setting, the current value must be changed to the new
-  value, where values may be positive or negative. When the object implementing the
-  <code>CanvasTextDrawingStyles</code> interface is created,
-  the <code data-x="dom-context-2d-letterSpacing">letterSpacing</code> attribute must
-  initially have the value 0.</p>
+  <p>Objects implement the <code>CanvasTextDrawingStyles</code> interface have attributes tha
+  control the spacing between letters and words. Such objects have associated <dfn
+  data-x="concept-CanvasTextDrawingStyles-letter-spacing">letter spacing</dfn> and <dfn
+  data-x="concept-CanvasTextDrawingStyles-word-spacing">word spacing</dfn> values, which are CSS
+  <span>&lt;length></span> values. Initially, both must be the result of <span data-x="parse
+  something according to a CSS grammar">parsing</span> "<code data-x="">0px</code>" as a CSS
+  <span>&lt;length></span>.</p>
+
+  <p>The <code><dfn data-x="dom-context-2d-letterSpacing">letterSpacing</dfn></code> getter steps
+  are to return the <span data-x="serializing a CSS value">serialized form</span> of
+  <span>this</span>'s <span data-x="concept-CanvasTextDrawingStyles-letter-spacing">letter
+  spacing</span>.</p>
+
+  <p>The <code data-x="dom-context-2d-letterSpacing">letterSpacing</code> setter steps are:</p>
+
+  <ol>
+   <li><p>Let <var>parsed</var> be the result of <span data-x="parse something according to a CSS
+   grammar">parsing</span> the given value as a CSS <span>&lt;length></span>.</p></li>
+
+   <li><p>If <var>parsed</var> is failure, then return.</p></li>
+
+   <li><p>Set <span>this</span>'s <span
+   data-x="concept-CanvasTextDrawingStyles-letter-spacing">letter spacing</span> to
+   <var>parsed</var>.</p></li>
+  </ol>
+
+  <p>The <code><dfn data-x="dom-context-2d-wordSpacing">wordSpacing</dfn></code> getter steps are
+  to return the <span data-x="serializing a CSS value">serialized form</span> of
+  <span>this</span>'s <span data-x="concept-CanvasTextDrawingStyles-word-spacing">word
+  spacing</span>.</p>
+
+  <p>The <code data-x="dom-context-2d-wordSpacing">wordSpacing</code> setter steps are:</p>
+
+  <ol>
+   <li><p>Let <var>parsed</var> be the result of <span data-x="parse something according to a CSS
+   grammar">parsing</span> the given value as a CSS <span>&lt;length></span>.</p></li>
+
+   <li><p>If <var>parsed</var> is failure, then return.</p></li>
+
+   <li><p>Set <span>this</span>'s <span data-x="concept-CanvasTextDrawingStyles-word-spacing">word
+   spacing</span> to <var>parsed</var>.</p></li>
+  </ol>
 
   <p>The <dfn attribute for="CanvasTextDrawingStyles"><code
   data-x="dom-context-2d-fontKerning">fontKerning</code></dfn> IDL attribute, on
@@ -62618,14 +62653,6 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
   value. When the object implementing the <code>CanvasTextDrawingStyles</code> interface is created,
   the <code data-x="dom-context-2d-textRendering">textRendering</code> attribute must
   initially have the value "<code data-x="dom-context-2d-textRendering-auto">auto</code>".</p>
-
-  <p>The <dfn attribute for="CanvasTextDrawingStyles"><code
-  data-x="dom-context-2d-wordSpacing">wordSpacing</code></dfn> IDL attribute, on
-  getting, must return the current value. On setting, the current value must be changed to the new
-  value, where values may be positive or negative. When the object implementing the
-  <code>CanvasTextDrawingStyles</code> interface is created,
-  the <code data-x="dom-context-2d-wordSpacing">wordSpacing</code> attribute must
-  initially have the value 0.</p>
   </div>
 
   <p>The <code data-x="dom-context-2d-textAlign">textAlign</code> attribute's allowed keywords are
@@ -62887,7 +62914,7 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
        </tr>
        <tr>
         <td><span>'letter-spacing'</span></td>
-        <td><var>target</var>'s <code data-x="dom-context-2d-letterSpacing">letterSpacing</code></td>
+        <td><var>target</var>'s <span data-x="concept-CanvasTextDrawingStyles-letter-spacing">letter spacing</span></td>
        </tr>
        <tr>
         <td><span>SVG text-rendering</span></td>
@@ -62899,7 +62926,7 @@ worker.postMessage(offscreenCanvas, [offscreenCanvas]);</code></pre>
        </tr>
        <tr>
         <td><span>'word-spacing'</span></td>
-        <td><var>target</var>'s <code data-x="dom-context-2d-wordSpacing">wordSpacing</code></td>
+        <td><var>target</var>'s <span data-x="concept-CanvasTextDrawingStyles-word-spacing">word spacing</span></td>
        </tr>
      </tbody>
     </table>