Add HTML-in-Canvas APIs

source

@@ -4036,6 +4036,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-text/#propdef-word-spacing">'word-spacing'</dfn> property</li>
     </ul>
 
+    <p>The following features are defined in <cite>CSS Transforms</cite>: <ref>CSSTRANSFORMS</ref></p>
+
+    <ul class="brief">
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css-transforms/#transform-property">'transform'</dfn> property</li>
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css-transforms/#transform-origin-property">'transform-origin'</dfn> property</li>
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css-transforms/#transformation-matrix">transformation matrix</dfn></li>
+    </ul>
+
     <p>The following features are defined in <cite>CSS Writing Modes</cite>: <ref>CSSWM</ref></p>
 
     <ul class="brief">
@@ -68480,6 +68488,7 @@ dictionary <dfn dictionary>AssignedNodesOptions</dfn> {
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-canvas-width">width</code></dd>
    <dd><code data-x="attr-canvas-height">height</code></dd>
+   <dd><code data-x="attr-canvas-layoutsubtree">layoutsubtree</code></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
    <dd><a href="https://w3c.github.io/html-aria/#el-canvas">For authors</a>.</dd>
@@ -68500,6 +68509,9 @@ interface <dfn interface>HTMLCanvasElement</dfn> : <span>HTMLElement</span> {
   USVString <span data-x="dom-canvas-toDataURL">toDataURL</span>(optional DOMString type = "image/png", optional any quality);
   undefined <span data-x="dom-canvas-toBlob">toBlob</span>(<span>BlobCallback</span> _callback, optional DOMString type = "image/png", optional any quality);
   <span>OffscreenCanvas</span> <span data-x="dom-canvas-transferControlToOffscreen">transferControlToOffscreen</span>();
+
+  [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn data-x="dom-canvas-layoutSubtree">layoutSubtree</dfn>;
+  <span>DOMMatrix</span> <span data-x="dom-canvas-getElementTransform">getElementTransform</span>(Element element, <span>DOMMatrix</span> drawTransform);
 };
 
 callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);</code></pre>
@@ -68588,6 +68600,12 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
   <p>The user agent must use a square pixel density consisting of one pixel of image data per
   coordinate space unit for the bitmaps of a <code>canvas</code> and its rendering contexts.</p>
 
+  <p>The <dfn element-attr for="canvas"><code
+  data-x="attr-canvas-layoutsubtree">layoutsubtree</code></dfn> attribute is a <span>boolean
+  attribute</span>. If present, <span data-x="concept-tree-child">children</span> of the
+  <code>canvas</code> element are laid out, so that they can be drawn using <code
+  data-x="dom-context-2d-drawElementImage">drawElementImage()</code>.</p>
+
   <p class="note">A <code>canvas</code> element can be sized arbitrarily by a style sheet, its
   bitmap is then subject to the <span>'object-fit'</span> CSS property.</p>
 
@@ -68704,6 +68722,31 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
   the same defaults.</p>
   </div>
 
+  <div algorithm>
+  <p><code>HTMLCanvasElement</code>'s <dfn method for="HTMLCanvasElement"><code
+  data-x="dom-canvas-getElementTransform">getElementTransform(<var>element</var>,
+  <var>drawTransform</var>)</code></dfn> method steps are to <span>get element transform</span>
+  with <span>this</span>, <var>element</var>, and <var>drawTransform</var>.</p>
+  </div>
+
+  <div algorithm>
+  <p>To <dfn>get element transform</dfn> with an <code>HTMLCanvasElement</code> <var>canvas</var>,
+  an element <var>element</var>, and a transformation matrix <var>T<sub>draw</sub></var>:</p>
+
+  <ol>
+   <li><p>Let <var>T<sub>origin</sub></var> be a translation matrix corresponding to the
+   <span>computed value</span> of the <span>'transform-origin'</span> property of
+   <var>element</var>.</p></li>
+
+   <li><p>Let <var>T<sub>scale</sub></var> be a scaling matrix corresponding to the scale difference
+   between <span data-x="'px'">CSS pixels</span> and <var>canvas</var>'s backing store's
+   pixels.</p></li>
+
+   <li><p>Return a <code>DOMMatrix</code> initialized to
+   <var>T<sub>origin</sub></var><sup>-1</sup>&sdot;<var>T<sub>scale</sub></var><sup>-1</sup>&sdot;<var>T<sub>draw</sub></var>&sdot;<var>T<sub>scale</sub></var>&sdot;<var>T<sub>origin</sub></var>.</p></li>
+  </ol>
+  </div>
+
   </div>
 
   <hr>
@@ -69097,6 +69140,7 @@ interface <dfn interface>CanvasRenderingContext2D</dfn> {
 <span>CanvasRenderingContext2D</span> includes <span>CanvasDrawPath</span>;
 <span>CanvasRenderingContext2D</span> includes <span>CanvasUserInterface</span>;
 <span>CanvasRenderingContext2D</span> includes <span>CanvasText</span>;
+<span>CanvasRenderingContext2D</span> includes <span>CanvasDrawElementImage</span>;
 <span>CanvasRenderingContext2D</span> includes <span>CanvasDrawImage</span>;
 <span>CanvasRenderingContext2D</span> includes <span>CanvasImageData</span>;
 <span>CanvasRenderingContext2D</span> includes <span>CanvasPathDrawingStyles</span>;
@@ -69216,6 +69260,12 @@ interface mixin <dfn interface>CanvasText</dfn> {
   <span>TextMetrics</span> <span data-x="dom-context-2d-measureText">measureText</span>(DOMString text);
 };
 
+interface mixin <dfn interface>CanvasDrawElementImage</dfn> {
+  // drawing elements
+  <span>DOMMatrix</span> <span data-x="dom-context-2d-drawElementImage">drawElementImage</span>(<span>Element</span> element, unrestricted double dx, unrestricted double dy);
+  <span>DOMMatrix</span> <span data-x="dom-context-2d-drawElementImage">drawElementImage</span>(<span>Element</span> element, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
+};
+
 interface mixin <dfn interface>CanvasDrawImage</dfn> {
   // drawing images
   undefined <span data-x="dom-context-2d-drawImage">drawImage</span>(<span>CanvasImageSource</span> image, unrestricted double dx, unrestricted double dy);
@@ -73689,6 +73739,206 @@ try {
 
   </div>
 
+
+  <h6>Drawing elements</h6>
+
+  <dl class="domintro">
+   <dt><code data-x=""><var>transform</var> = <var>context</var>.<span subdfn data-x="dom-context-2d-drawElementImage">drawElementImage</span>(<var>element</var>, <var>dx</var>, <var>dy</var>)</code></dt>
+   <dt><code data-x=""><var>transform</var> = <var>context</var>.<span data-x="dom-context-2d-drawElementImage">drawElementImage</span>(<var>element</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>dh</var>)</code></dt>
+
+   <dd>
+    <p>Draws the given element onto the canvas. Throws a <code>TypeError</code> if the element isn't
+    a descendant of the canvas. Returns a transform that can be applied to the
+    <span>'transform'</span> property on element to align its location for hit testing with its
+    drawn location.</p>
+   </dd>
+  </dl>
+
+  <div w-nodev>
+
+  <p>Objects that implement the <code>CanvasDrawElementImage</code> interface have the <dfn method
+  for="CanvasDrawElementImage"><code
+  data-x="dom-context-2d-drawElementImage">drawElementImage()</code></dfn> method to draw
+  elements.</p>
+
+  <div algorithm>
+  <p>The <code data-x="dom-context-2d-drawElementImage">drawElementImage(element, x, y)</code> method,
+  when invoked, must <span>draw an element</span> with <span>this</span>, <var>element</var>,
+  <var>dx</var>, <var>dy</var>.</p>
+  </div>
+
+  <div algorithm>
+  <p>The <code data-x="dom-context-2d-drawElementImage">drawElementImage(element, x, y, w, h)</code>
+  method, when invoked, must <span>draw an element</span> with <span>this</span>,
+  <var>element</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, and <var>dh</var>.</p>
+  </div>
+
+  <div algorithm>
+  <p>To <dfn>draw an element</dfn>, with a <code>CanvasRenderingContext2D</code> <var>context</var>,
+  an element <var>element</var>, numbers <var>dx</var> and <var>dy</var>, and optional numbers
+  <var>dw</var> and <var>dh</var>:</p>
+
+  <ol>
+   <li><p>If <var>dx</var> or <var>dy</var> are infinite or NaN, then return.</p></li>
+
+   <li><p>If <var>dw</var> and <var>dh</var> are given and either are infinite or NaN, then
+   return.</p></li>
+
+   <li><p>Let <var>canvas</var> be the <code>canvas</code> element to which <var>context</var> is
+   bound.</p></li>
+
+   <li><p>If <var>element</var>'s <span>parent</span> is not <var>canvas</var>, then throw a
+   <code>TypeError</code>.</p></li>
+
+   <li><p>If <var>canvas</var> does not have a <code
+   data-x="attr-canvas-layoutsubtree">layoutsubtree</code> attribute specified, then throw a
+   <code>TypeError</code>.</p></li>
+
+   <li><p>Let <var>borderBox</var> be <var>element</var>'s <span>border box</span>.</p></li>
+
+   <li><p>Let <var>layoutWidth</var> and <var>layoutHeight</var> be the width and height of
+   <var>borderBox</var>, respectively.</p></li>
+
+   <li><p>If not given, <var>dw</var> and <var>dh</var> must default to the <var>layoutWidth</var>
+   and <var>layoutHeight</var>, respectively.</p></li>
+
+   <li><p>If either <var>dw</var> or <var>dh</var> are zero, then return.</p></li>
+
+   <li>
+    <p>Paint <var>element</var> to the specified rectangular area, ignoring <var>element</var>'s
+    <span>transformation matrix</span> and without using any <span>sensitive information</span>.
+    Instead, either paint nothing or use static information that is the same for all users.</p>
+
+    <p class="note">There is no requirement to synchronously rasterize into the backing store at
+    this point. As an optimization, implementations are free to instead store the information
+    required to rasterize later, as long as the difference is not observable.</p>
+   </li>
+
+   <li><p>Let <var>T<sub>draw</sub></var> be a copy of the <span>current transformation
+   matrix</span>.</p></li>
+
+   <li><p>Translate <var>T<sub>draw</sub></var> by (<var>dx</var>, <var>dy</var>).</p></li>
+
+   <li><p>Scale <var>T<sub>draw</sub></var> by (<var>dw</var> / <var>layoutWidth</var>,
+   <var>dh</var> / <var>layoutHeight</var>).</p></li>
+
+   <li><p>Return the result of <span>get element transform</span> with <var>context</var>'s
+   <code>canvas</code> element, <var>element</var>, and <var>T<sub>draw</sub></var>.</p></li>
+  </ol>
+  </div>
+
+  <p>When drawing elements to a <code>canvas</code>, <dfn export>sensitive information</dfn> is any
+  information that isn't otherwise observable to author code. When drawing, follow all of the rules
+  that apply below to ensure that <span>sensitive information</span> is not revealed:</p>
+
+  <dl>
+   <dt>All content
+   <dd>Do not use any <span>CORS-cross-origin</span> data.
+   <dd>Do not use user-configurable system colors, themes, or preferences. Instead use a default appearance that will be the same for all users on the given operating system.
+   <dd>Do not draw spelling or grammar markers.
+   <dd>Do not draw matching text from search-in-page.
+
+   <dt><span data-x="form-associated element">Form-associated elements</span>
+   <dd>Do not draw pending autofill suggestions.
+
+   <dt><code>a</code> and <code>area</code> elements
+   <dd>Do not use visited link information.
+  </dl>
+
+  </div>
+
+
+  <h6>Hit testing</h6>
+
+
+  <p>Descendants of a <code>canvas</code> element with the <code
+  data-x="attr-canvas-layoutsubtree">layoutsubtree</code> attribute specified participate in hit
+  testing.</p>
+
+
+  <div class="example" id="hitTestingExample">
+
+   <p>This example paints two elements with hit testing. Since all children are laid out at the
+   top left, the 'transform' CSS property is used to make their position for hit testing match
+   the drawn order. In order redraw when needed, for example if text is selected, a <code
+   data-x="">ResizeObserver</code> with the <code data-x="">fireOnEveryPaint</code> parameter is
+   used.</p>
+
+   <pre><code class="html">&lt;!doctype html>
+&lt;meta charset="utf-8" />
+&lt;title>Hit testing in canvas&lt;/title>
+
+&lt;style>
+  canvas {
+    width: 720px;
+    height: 405px;
+  }
+  canvas > div {
+    background: white;
+    width: 300px;
+    height: 325px;
+    padding: 1em;
+    box-sizing: border-box;
+  }
+  canvas img {
+    max-width: 100%;
+  }
+&lt;/style>
+
+&lt;canvas layoutsubtree>
+  &lt;div id="left">
+    &lt;h1>Left side&lt;/h1>
+    &lt;p>Interactive content like &lt;a href="">links&lt;/a> work.
+       A long paragraph eventually breaks.&lt;/p>
+  &lt;/div>
+  &lt;div id="right">
+    &lt;h1>Right side&lt;/h1>
+    &lt;p>You wouldn't download a wolf:&lt;/p>
+    &lt;img src="wolf.jpg">&lt;/img>
+  &lt;/div>
+&lt;/canvas>
+
+&lt;script>
+  const canvas = document.querySelector('canvas');
+  const leftElm = document.getElementById('left');
+  const rightElm = document.getElementById('right');
+
+  const ctx = canvas.getContext('2d');
+  function draw() {
+    ctx.reset();
+
+    ctx.fillStyle = '#e0e0dd';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    let x = 40;
+    let y = 40;
+    let transform = ctx.drawElementImage(leftElm, x * devicePixelRatio, y * devicePixelRatio);
+    leftElm.style.transform = transform;
+
+    // purple circle goes in between the elements
+    ctx.fillStyle = 'purple';
+    ctx.beginPath();
+    ctx.arc(canvas.width / 2, canvas.height - 40, 140, 0, 2 * Math.PI);
+    ctx.fill();
+
+    x+= 340;
+    transform = ctx.drawElementImage(rightElm, x * devicePixelRatio, y * devicePixelRatio);
+    rightElm.style.transform = transform;
+  }
+
+  onload = () => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
+      canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+      draw();
+    });
+    resizeObserver.observe(canvas, {box: ['device-pixel-content-box'],
+      fireOnEveryPaint: true});
+  }
+&lt;/script></code></pre>
+  </div>
+
+
   <h6>Drawing images</h6>
 
   <p>Objects that implement the <code>CanvasDrawImage</code> interface have the <dfn method
@@ -147045,8 +147295,18 @@ legend[align=right i] {
   <p>A <code>canvas</code> element that <span>represents</span> <span>embedded content</span> is
   <span>expected</span> to be treated as a <span>replaced element</span>; the contents of such
   elements are the element's bitmap, if any, or else a <span>transparent black</span> bitmap with
-  the same <span>natural dimensions</span> as the element. Other <code>canvas</code> elements are
-  <span>expected</span> to be treated as ordinary elements in the rendering model.</p>
+  the same <span>natural dimensions</span> as the element. A <code>canvas</code> element that
+  <span>represents</span> <span>embedded content</span> and has a <code
+  data-x="attr-canvas-layoutsubtree">layoutsubtree</code> attribute specified is additionally
+  <span>expected</span> to be treated as 👋replaced element with subtree layout👋, where children are
+  laid out but not rendered. Additionally, children are exposed to assistive technologies (ATs).</p>
+
+  <p class="XXX">This needs to be reconciled with the definition of <span
+  data-x="replaced element">replaced elements</span>, which says that the content of replaced
+  elements is not considered in the CSS formatting model.</p>
+
+  <p>Other <code>canvas</code> elements are <span>expected</span> to be treated as ordinary elements
+  in the rendering model.</p>
 
   <p>An <code>object</code> element that <span>represents</span> an image, plugin, or its
   <span>content navigable</span> is <span>expected</span> to be treated as a <span>replaced
@@ -147096,6 +147356,7 @@ legend[align=right i] {
 
   <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
 
+canvas[layoutsubtree] > * { isolation: isolate !important; contain: paint !important; }
 iframe { border: 2px inset; }
 <span id="video-object-fit">video { object-fit: contain; }</span></code></pre>
 
@@ -153581,6 +153842,11 @@ interface <dfn interface>External</dfn> {
           <code data-x="attr-track-label">track</code>
      <td> User-visible label
      <td> <a href="#attribute-text">Text</a>
+    <tr>
+     <th> <code data-x="">layoutsubtree</code>
+     <td> <code data-x="attr-canvas-layoutsubtree">canvas</code>
+     <td> Whether to layout descendants
+     <td> <span>Boolean attribute</span>
     <tr>
      <th> <code data-x="">lang</code>
      <td> <span data-x="attr-lang">HTML elements</span>
@@ -155835,6 +156101,9 @@ INSERT INTERFACES HERE
    <dt id="refsCSSTEXT">[CSSTEXT]</dt>
    <dd><cite><a href="https://drafts.csswg.org/css-text/">CSS Text</a></cite>, E. Etemad, K. Ishii. W3C.</dd>
 
+   <dt id="refsCSSTRANSFORMS">[CSSTRANSFORMS]</dt>
+   <dd><cite><a href="https://drafts.csswg.org/css-transforms/">CSS Transforms</a></cite>, L. Baron, S. Fraser, D. Jackson, T. O'Connor, D. Schulze. W3C.</dd>
+
    <dt id="refsCSSVALUES">[CSSVALUES]</dt>
    <dd><cite><a href="https://drafts.csswg.org/css-values/">CSS3 Values and Units</a></cite>, H. Lie, T. Atkins, E. Etemad. W3C.</dd>