Skip to content

Commit 951bdee

Browse files
foolipfoolip
committed
Address progers feedback
1 parent 5aeb03b commit 951bdee

File tree

1 file changed

+55
-41
lines changed

1 file changed

+55
-41
lines changed

‎source‎

Lines changed: 55 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4033,6 +4033,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
40334033
<li>The <dfn data-x-href="https://drafts.csswg.org/css-text/#propdef-word-spacing">'word-spacing'</dfn> property</li>
40344034
</ul>
40354035

4036+
<p>The following features are defined in <cite>CSS Transforms</cite>: <ref>CSSTRANSFORMS</ref></p>
4037+
4038+
<ul class="brief">
4039+
<li>The <dfn data-x-href="https://drafts.csswg.org/css-transforms/#transform-property">'transform'</dfn> property</li>
4040+
<li>The <dfn data-x-href="https://drafts.csswg.org/css-transforms/#transform-origin-property">'transform-origin'</dfn> property</li>
4041+
<li>The <dfn data-x-href="https://drafts.csswg.org/css-transforms/#transformation-matrix">transformation matrix</dfn></li>
4042+
</ul>
4043+
40364044
<p>The following features are defined in <cite>CSS Writing Modes</cite>: <ref>CSSWM</ref></p>
40374045

40384046
<ul class="brief">
@@ -68431,7 +68439,7 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
6843168439
<p>The <dfn element-attr for="canvas"><code
6843268440
data-x="attr-canvas-layoutsubtree">layoutsubtree</code></dfn> attribute is a <span>boolean
6843368441
attribute</span>. If present, <span data-x="concept-tree-child">children</span> of the
68434-
<data>canvas</data> element are layed out, so that they can be drawn using <code
68442+
<data>canvas</data> element are laid out, so that they can be drawn using <code
6843568443
data-x="dom-context-2d-drawElementImage">drawElementImage()</code>.</p>
6843668444

6843768445
<p class="note">A <code>canvas</code> element can be sized arbitrarily by a style sheet, its
@@ -68561,11 +68569,12 @@ callback <dfn callback>BlobCallback</dfn> = undefined (<span>Blob</span>? blob);
6856168569

6856268570
<div algorithm>
6856368571
<p>To <dfn>get element transform</dfn> with an <code>HTMLCanvasElement</code> <var>canvas</var>,
68564-
an element <var>element</var>, and a tranformation matrix <var>T<sub>draw</sub></var>:</p>
68572+
an element <var>element</var>, and a transformation matrix <var>T<sub>draw</sub></var>:</p>
6856568573

6856668574
<ol>
6856768575
<li><p>Let <var>T<sub>origin</sub></var> be a translation matrix corresponding to the
68568-
<span>computed value</span> of the 'transform-origin' property of <var>element</var>.</p></li>
68576+
<span>computed value</span> of the <span>'transform-origin'</span> property of
68577+
<var>element</var>.</p></li>
6856968578

6857068579
<li><p>Let <var>T<sub>scale</sub></var> be a scaling matrix corresponding to the scale difference
6857168580
between <span data-x="'px'">CSS pixels</span> and <var>canvas</var>'s backing store's
@@ -69091,20 +69100,8 @@ interface mixin <dfn interface>CanvasText</dfn> {
6909169100

6909269101
interface mixin <dfn interface>CanvasDrawElementImage</dfn> {
6909369102
// drawing elements
69094-
DOMMatrix <span data-x="dom-context-2d-drawElementImage">drawElementImage</span>(<span>Element</span> element, unrestricted double x, unrestricted double y);
69095-
DOMMatrix <span data-x="dom-context-2d-drawElementImage">drawElementImage</span>(<span>Element</span> element, unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
69096-
};
69097-
69098-
dictionary <dfn dictionary>CanvasHitTestRect</dfn> {
69099-
double <dfn dict-member for="CanvasHitTestRect" data-x="dom-CanvasHitTestRect-x">x</dfn>;
69100-
double <dfn dict-member for="CanvasHitTestRect" data-x="dom-CanvasHitTestRect-y">y</dfn>;
69101-
double? <dfn dict-member for="CanvasHitTestRect" data-x="dom-CanvasHitTestRect-width">width</dfn>;
69102-
double? <dfn dict-member for="CanvasHitTestRect" data-x="dom-CanvasHitTestRect-height">height</dfn>;
69103-
};
69104-
69105-
dictionary <dfn dictionary>CanvasElementHitTestRegion</dfn> {
69106-
<span>Element</span> <dfn dict-member for="CanvasElementHitTestRegion" data-x="dom-CanvasElementHitTestRegion-element">element</dfn>;
69107-
<span>CanvasHitTestRect</span> <dfn dict-member for="CanvasElementHitTestRegion" data-x="dom-CanvasElementHitTestRegion-rect">rect</dfn>;
69103+
DOMMatrix <span data-x="dom-context-2d-drawElementImage">drawElementImage</span>(<span>Element</span> element, unrestricted double dx, unrestricted double dy);
69104+
DOMMatrix <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);
6910869105
};
6910969106

6911069107
interface mixin <dfn interface>CanvasDrawImage</dfn> {
@@ -73584,13 +73581,14 @@ try {
7358473581
<h6>Drawing elements</h6>
7358573582

7358673583
<dl class="domintro">
73587-
<dt><code data-x=""><var>transform</var> = <var>context</var>.<span subdfn data-x="dom-context-2d-drawElementImage">drawElementImage</span>(<var>element</var>, <var>x</var>, <var>y</var>)</code></dt>
73588-
<dt><code data-x=""><var>transform</var> = <var>context</var>.<span data-x="dom-context-2d-drawElementImage">drawElementImage</span>(<var>element</var>, <var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</code></dt>
73584+
<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>
73585+
<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>
7358973586

7359073587
<dd>
7359173588
<p>Draws the given element onto the canvas. Throws a <code>TypeError</code> if the element isn't
73592-
a descendant of the canvas. Returns a transform that can be applied to the CSS 'transform'
73593-
property on element to align it's location for hit testing with its drawn location.</p>
73589+
a descendant of the canvas. Returns a transform that can be applied to the
73590+
<span>'transform'</span> property on element to align its location for hit testing with its
73591+
drawn location.</p>
7359473592
</dd>
7359573593
</dl>
7359673594

@@ -73604,24 +73602,24 @@ try {
7360473602
<div algorithm>
7360573603
<p>The <code data-x="dom-context-2d-drawElementImage">drawElementImage(element, x, y)</code> method,
7360673604
when invoked, must <span>draw an element</span> with <span>this</span>, <var>element</var>,
73607-
<var>x</var>, <var>y</var>.</p>
73605+
<var>dx</var>, <var>dy</var>.</p>
7360873606
</div>
7360973607

7361073608
<div algorithm>
7361173609
<p>The <code data-x="dom-context-2d-drawElementImage">drawElementImage(element, x, y, w, h)</code>
7361273610
method, when invoked, must <span>draw an element</span> with <span>this</span>,
73613-
<var>element</var>, <var>x</var>, <var>y</var>, <var>w</var>, and <var>h</var>.</p>
73611+
<var>element</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, and <var>dh</var>.</p>
7361473612
</div>
7361573613

7361673614
<div algorithm>
7361773615
<p>To <dfn>draw an element</dfn>, with a <code>CanvasRenderingContext2D</code> <var>context</var>,
73618-
an element <var>element</var>, numbers <var>x</var> and <var>y</var>, and optional numbers
73619-
<var>w</var> and <var>h</var>:</p>
73616+
an element <var>element</var>, numbers <var>dx</var> and <var>dy</var>, and optional numbers
73617+
<var>dw</var> and <var>dh</var>:</p>
7362073618

7362173619
<ol>
73622-
<li><p>If <var>x</var> or <var>y</var> are infinite or NaN, then return.</p></li>
73620+
<li><p>If <var>dx</var> or <var>dy</var> are infinite or NaN, then return.</p></li>
7362373621

73624-
<li><p>If <var>w</var> and <var>h</var> are given and either are infinite or NaN, then
73622+
<li><p>If <var>dw</var> and <var>dh</var> are given and either are infinite or NaN, then
7362573623
return.</p></li>
7362673624

7362773625
<li><p>Let <var>canvas</var> be the <code>canvas</code> element to which <var>context</var> is
@@ -73636,18 +73634,31 @@ try {
7363673634

7363773635
<li><p>Let <var>borderBox</var> be <var>element</var>'s <span>border box</span>.</p></li>
7363873636

73639-
<li><p>If not given, <var>w</var> and <var>h</var> must default to the width and height of
73640-
<var>borderBox</var>.</p></li>
73637+
<li><p>Let <var>layoutWidth</var> and <var>layoutHeight</var> be the width and height of
73638+
<var>borderBox</var>, respectively.</p></li>
7364173639

73642-
<li><p>If either <var>w</var> or <var>h</var> are zero, then return.</p></li>
73640+
<li><p>If not given, <var>dw</var> and <var>dh</var> must default to the <var>layoutWidth</var>
73641+
and <var>layoutHeight</var>, respectively.</p></li>
7364373642

73644-
<li><p>Paint <var>element</var> to the specified rectangular area without using any
73645-
<span>sensitive information</span>. Instead, either paint nothing or use static information that
73646-
is the same for all users.</p></li>
73643+
<li><p>If either <var>dw</var> or <var>dh</var> are zero, then return.</p></li>
7364773644

73648-
<li><p>Let <var>T<sub>draw</sub></var> be the scale+translation matrix that transforms the box
73649-
(0, 0, width of <var>borderBox</var>, width of <var>borderBox</var>,) to
73650-
(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>).</p></li>
73645+
<li>
73646+
<p>Paint <var>element</var> to the specified rectangular area, ignoring <var>element</var>'s
73647+
<span>transformation matrix</span> and without using any <span>sensitive information</span>.
73648+
Instead, either paint nothing or use static information that is the same for all users.</p>
73649+
73650+
<p class="note">There is no requirement to synchronously rasterize into the backing store at
73651+
this point. As an optimization, implementations are free to instead store the information
73652+
required to rasterize later, as long as the difference is not observable.</p>
73653+
</li>
73654+
73655+
<li><p>Let <var>T<sub>draw</sub></var> be a copy of the <span>current transformation
73656+
matrix</span>.</p></li>
73657+
73658+
<li><p>Translate <var>T<sub>draw</sub></var> by (<var>dx</var>, <var>dy</var>).</p></li>
73659+
73660+
<li><p>Scale <var>T<sub>draw</sub></var> by (<var>dw</var> / <var>layoutWidth</var>,
73661+
<var>dh</var> / <var>layoutHeight</var>).</p></li>
7365173662

7365273663
<li><p>Return the result of <span>get element transform</span> with <var>context</var>'s
7365373664
<code>canvas</code> element, <var>element</var>, and <var>T<sub>draw</sub></var>.</p></li>
@@ -73687,8 +73698,9 @@ try {
7368773698

7368873699
<p>This example paints two elements with hit testing. Since all children are laid out at the
7368973700
top left, the 'transform' CSS property is used to make their position for hit testing match
73690-
the drawn order. In order redraw when needed, for example if text is selected a ResizeObserver
73691-
with the <code data-x="">fireOnEveryPaint</code> parameter.</p>
73701+
the drawn order. In order redraw when needed, for example if text is selected, a <code
73702+
data-x="">ResizeObserver</code> with the <code data-x="">fireOnEveryPaint</code> parameter is
73703+
used.</p>
7369273704

7369373705
<pre><code class="html">&lt;!doctype html>
7369473706
&lt;meta charset="utf-8" />
@@ -73753,8 +73765,7 @@ try {
7375373765
}
7375473766

7375573767
onload = () => {
73756-
const resizeObserver = new ResizeObserver((entries) => {
73757-
const entry = entries.find((entry) => entry.target === canvas);
73768+
const resizeObserver = new ResizeObserver(([entry]) => {
7375873769
canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
7375973770
canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
7376073771
draw();
@@ -146870,7 +146881,7 @@ legend[align=right i] {
146870146881

146871146882
<pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
146872146883

146873-
canvas[layoutsubtree] > * { isolation: isolate !important; contain: strict !important; }
146884+
canvas[layoutsubtree] > * { isolation: isolate !important; contain: paint !important; }
146874146885
iframe { border: 2px inset; }
146875146886
<span id="video-object-fit">video { object-fit: contain; }</span></code></pre>
146876146887

@@ -155521,6 +155532,9 @@ INSERT INTERFACES HERE
155521155532
<dt id="refsCSSTEXT">[CSSTEXT]</dt>
155522155533
<dd><cite><a href="https://drafts.csswg.org/css-text/">CSS Text</a></cite>, E. Etemad, K. Ishii. W3C.</dd>
155523155534

155535+
<dt id="refsCSSTRANSFORMS">[CSSTRANSFORMS]</dt>
155536+
<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>
155537+
155524155538
<dt id="refsCSSVALUES">[CSSVALUES]</dt>
155525155539
<dd><cite><a href="https://drafts.csswg.org/css-values/">CSS3 Values and Units</a></cite>, H. Lie, T. Atkins, E. Etemad. W3C.</dd>
155526155540

0 commit comments

Comments
 (0)