Skip to content

Commit 36bd2e4

Browse files
dirkschulzedirkschulze
committed
[css-transforms] do not affect Element Interface extensions
1 parent 888ab82 commit 36bd2e4

3 files changed

Lines changed: 48 additions & 24 deletions

File tree

‎css-transforms/ChangeLog‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
2013-10-15 Dirk Schulze <dschulze@adobe.com>
2+
Transforms do not affect Element Interface extensions.
3+
Perspective do not affect SVG object bounding box.
4+
15
2013-10-10 Dirk Schulze <dschulze@adobe.com>
26
Add 2D matrix interpolation algorithms.
37

‎css-transforms/Overview.html‎

Lines changed: 40 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
</a></p>
4545
<h1 class="p-name no-ref" id=title>CSS Transforms Module Level 1</h1>
4646
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
47-
<span class=dt-updated><span class=value-title title=20131010>10 October 2013</span></span></span></h2>
47+
<span class=dt-updated><span class=value-title title=20131015>15 October 2013</span></span></span></h2>
4848
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-transforms/>http://dev.w3.org/csswg/css-transforms/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-transforms/>http://www.w3.org/TR/css3-transforms/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-transforms/>http://dev.w3.org/csswg/css-transforms/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2012/WD-css3-transforms-20120911/ rel=previous>http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-transforms-20120403/ rel=previous>http://www.w3.org/TR/2012/WD-css3-transforms-20120403/</a>
4949
<dt>Feedback:</dt>
5050
<dd><a href="mailto:public-fx@w3.org?subject=%5Bcss-transforms%5D%20feedback">public-fx@w3.org</a>
@@ -169,8 +169,6 @@ <h2 class="heading settled heading" data-level=2 id=module-interactions><span cl
169169

170170
<p>Three-dimensional transforms can also affect the visual layering of elements, and thus override the back-to-front painting order described in <a href=http://www.w3.org/TR/CSS2/zindex.html title="Elaborate description of Stacking Contexts">Appendix E</a> of <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>.
171171

172-
<p>Transforms affect the results of the Element Interface extensions <a href=http://www.w3.org/TR/cssom-view/#dom-element-getclientrects>getClientRects()</a> and <a href=http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect>getBoundingClientRect()</a>, which are specified in <a data-biblio-type=informative data-link-type=biblio href=#cssom-view title=cssom-view>[CSSOM-VIEW]</a>.
173-
174172
<p>Transforms affect the rendering of backgrounds on elements with a value of <span class=css data-link-type=maybe title=fixed>fixed</span> for the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#background-attachment title=background-attachment>background-attachment</a> property, which is specified in <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>.
175173

176174
<h2 class="heading settled heading" data-level=3 id=css-values><span class=secno>3 </span><span class=content>CSS Values</span><a class=self-link href=#css-values></a></h2>
@@ -326,6 +324,8 @@ <h2 class="heading settled heading" data-level=6 id=transform-rendering><span cl
326324

327325
<p>Transforms apply to <a data-link-type=dfn href=#transformable-element title="transformable elements">transformable elements</a>.
328326

327+
<p class=note>Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions <a href=http://www.w3.org/TR/cssom-view/#dom-element-getclientrects>getClientRects()</a> and <a href=http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect>getBoundingClientRect()</a>, which are specified in <a data-biblio-type=informative data-link-type=biblio href=#cssom-view title=cssom-view>[CSSOM-VIEW]</a>.
328+
329329
<div class=example>
330330
<pre>div {
331331
transform: translate(100px, 100px);
@@ -853,12 +853,12 @@ <h2 class="heading settled heading" data-level=9 id=transform-style-property><sp
853853

854854
<p><ul>
855855
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow title=overflow>overflow</a>: any value other than <span class=css data-link-type=maybe title=visible>visible</span>.</li>
856-
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/filters/#effects title=filter>filter</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
857-
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#ClipProperty title=clip>clip</a>: any value other than <span class=css data-link-type=maybe title=auto>auto</span>.</li>
858-
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#clip-path title=clip-path>clip-path</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
856+
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/filters/#propdef-filter0 title=filter>filter</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
857+
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#propdef-clip title=clip>clip</a>: any value other than <span class=css data-link-type=maybe title=auto>auto</span>.</li>
858+
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#propdef-clip-path title=clip-path>clip-path</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
859859
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/compositing-1/#propdef-isolation title=isolation>isolation</a>: used value of <span class=css data-link-type=maybe title=isolate>isolate</span>.</li>
860-
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#mask-image title=mask-image>mask-image</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
861-
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#mask-box-image-source title=mask-box-image-source>mask-box-image-source</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
860+
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#propdef-mask-image title=mask-image>mask-image</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
861+
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#propdef-mask-box-image-source title=mask-box-image-source>mask-box-image-source</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
862862
<li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/compositing-1/#propdef-mix-blend-mode title=mix-blend-mode>mix-blend-mode</a>: any value other than <span class=css data-link-type=maybe title=normal>normal</span>.</li>
863863
</ul>
864864

@@ -906,6 +906,8 @@ <h2 class="heading settled heading" data-level=10 id=perspective-property><span
906906

907907
<p>The values of the <a class=property data-link-type=propdesc href=#propdef-perspective title=perspective>perspective</a> and <a class=property data-link-type=propdesc href=#propdef-perspective-origin title=perspective-origin>perspective-origin</a> properties are used to compute the <a data-link-type=dfn href=#perspective-matrix title="perspective matrix">perspective matrix</a>, as described above.
908908

909+
<p class=note>Note: While the <a data-link-type=dfn href=#bounding-box title="bounding box">bounding box</a> for SVG elements without an associated CSS layout box incorporate the result of the <a class=property data-link-type=propdesc href=#propdef-transform title=transform>transform</a> and <a class=property data-link-type=propdesc href=#propdef-transform-origin title=transform-origin>transform-origin</a> properties on descendants, the results of the <a class=property data-link-type=propdesc href=#propdef-perspective title=perspective>perspective</a> and <a class=property data-link-type=propdesc href=#propdef-perspective-origin title=perspective-origin>perspective-origin</a> properties are not taken into account.
910+
909911
<!--
910912
/$$$$$$ /$$$$$$ /$$$$$$ /$$$$$$$ /$$$$$$ /$$$$$$ /$$$$$$$
911913
/$$__ $$ /$$__ $$ /$$__ $$ /$$_____/ /$$__ $$ /$$__ $$ /$$_____/
@@ -2483,24 +2485,32 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
24832485
<li>3D matrix, <a href=#3d-matrix title="section 4">4</a>
24842486
<li>3D rendering context, <a href=#3d-rendering-context title="section 4">4</a>
24852487
<li>accumulated 3D transformation matrix, <a href=#accumulated-3d-transformation-matrix title="section 4">4</a>
2486-
<li>bottom (value), <a href=#valuedef-bottom0 title="section 8">8</a>
2487-
<li>bottom (value), <a href=#valuedef-bottom title="section 11">11</a>
2488-
<li>bounding box, <a href=#bounding-box title="section 4">4</a>
2489-
<li>center (value), <a href=#valuedef-center0 title="section 8">8</a>
2490-
<li>center (value), <a href=#valuedef-center title="section 11">11</a>
2491-
<li>current transformation matrix (CTM), <a href=#current-transformation-matrix-ctm title="section 4">4</a>
2488+
<li>backface-visibility, <a href=#propdef-backface-visibility title="section 12">12</a>
2489+
<li>bottom<ul><li>value for transform-origin, <a href=#valuedef-bottom0 title="section 8">8</a>
2490+
<li>value for perspective-origin, <a href=#valuedef-bottom title="section 11">11</a>
2491+
</ul><li>bounding box, <a href=#bounding-box title="section 4">4</a>
2492+
<li>center<ul><li>value for transform-origin, <a href=#valuedef-center0 title="section 8">8</a>
2493+
<li>value for perspective-origin, <a href=#valuedef-center title="section 11">11</a>
2494+
</ul><li>current transformation matrix (CTM), <a href=#current-transformation-matrix-ctm title="section 4">4</a>
24922495
<li>identity transform function, <a href=#identity-transform-function title="section 4">4</a>
2493-
<li>left (value), <a href=#valuedef-left0 title="section 8">8</a>
2494-
<li>left (value), <a href=#valuedef-left title="section 11">11</a>
2495-
<li>local coordinate system, <a href=#local-coordinate-system title="section 4">4</a>
2496+
<li>left<ul><li>value for transform-origin, <a href=#valuedef-left0 title="section 8">8</a>
2497+
<li>value for perspective-origin, <a href=#valuedef-left title="section 11">11</a>
2498+
</ul><li>local coordinate system, <a href=#local-coordinate-system title="section 4">4</a>
24962499
<li>matrix(), <a href=#funcdef-matrix title="section 15.1">15.1</a>
24972500
<li>matrix3d(), <a href=#funcdef-matrix3d title="section 15.2">15.2</a>
24982501
<li>none, <a href=#none title="section 10">10</a>
2502+
<li>perspective, <a href=#propdef-perspective title="section 10">10</a>
24992503
<li>perspective(), <a href=#funcdef-perspective title="section 15.2">15.2</a>
25002504
<li>perspective matrix, <a href=#perspective-matrix title="section 4">4</a>
2501-
<li>right (value), <a href=#valuedef-right0 title="section 8">8</a>
2502-
<li>right (value), <a href=#valuedef-right title="section 11">11</a>
2503-
<li>rotate(), <a href=#funcdef-rotate title="section 15.1">15.1</a>
2505+
<li>perspective-origin, <a href=#propdef-perspective-origin title="section 11">11</a>
2506+
<dl><dt>Property Values:<dd>top, <a href=#valuedef-top title="section 11">11</a>
2507+
<dd>right, <a href=#valuedef-right title="section 11">11</a>
2508+
<dd>bottom, <a href=#valuedef-bottom title="section 11">11</a>
2509+
<dd>left, <a href=#valuedef-left title="section 11">11</a>
2510+
<dd>center, <a href=#valuedef-center title="section 11">11</a>
2511+
</dl><li>right<ul><li>value for transform-origin, <a href=#valuedef-right0 title="section 8">8</a>
2512+
<li>value for perspective-origin, <a href=#valuedef-right title="section 11">11</a>
2513+
</ul><li>rotate(), <a href=#funcdef-rotate title="section 15.1">15.1</a>
25042514
<li>rotate3d(), <a href=#funcdef-rotate3d title="section 15.2">15.2</a>
25052515
<li>rotatex(), <a href=#funcdef-rotatex title="section 15.2">15.2</a>
25062516
<li>rotatey(), <a href=#funcdef-rotatey title="section 15.2">15.2</a>
@@ -2513,12 +2523,20 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
25132523
<li>skew(), <a href=#funcdef-skew title="section 15.1">15.1</a>
25142524
<li>skewx(), <a href=#funcdef-skewx title="section 15.1">15.1</a>
25152525
<li>skewy(), <a href=#funcdef-skewy title="section 15.1">15.1</a>
2516-
<li>top (value), <a href=#valuedef-top0 title="section 8">8</a>
2517-
<li>top (value), <a href=#valuedef-top title="section 11">11</a>
2526+
<li>top<ul><li>value for transform-origin, <a href=#valuedef-top0 title="section 8">8</a>
2527+
<li>value for perspective-origin, <a href=#valuedef-top title="section 11">11</a>
2528+
</ul><li>transform, <a href=#propdef-transform title="section 7">7</a>
25182529
<li>transformable element, <a href=#transformable-element title="section 4">4</a>
25192530
<li>transformation matrix, <a href=#transformation-matrix title="section 4">4</a>
25202531
<li>&lt;transform-function&gt;, <a href=#typedef-transform-function title="section 15">15</a>
25212532
<li>&lt;transform-list&gt;, <a href=#typedef-transform-list title="section 7">7</a>
2533+
<li>transform-origin, <a href=#propdef-transform-origin title="section 8">8</a>
2534+
<dl><dt>Property Values:<dd>top, <a href=#valuedef-top0 title="section 8">8</a>
2535+
<dd>right, <a href=#valuedef-right0 title="section 8">8</a>
2536+
<dd>bottom, <a href=#valuedef-bottom0 title="section 8">8</a>
2537+
<dd>left, <a href=#valuedef-left0 title="section 8">8</a>
2538+
<dd>center, <a href=#valuedef-center0 title="section 8">8</a>
2539+
</dl><li>transform-style, <a href=#propdef-transform-style title="section 9">9</a>
25222540
<li>translate(), <a href=#funcdef-translate title="section 15.1">15.1</a>
25232541
<li>translate3d(), <a href=#funcdef-translate3d title="section 15.2">15.2</a>
25242542
<li>translatex(), <a href=#funcdef-translatex title="section 15.1">15.1</a>

‎css-transforms/Overview.src.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,6 @@ <h2 id="module-interactions">Module Interactions</h2>
8686

8787
Three-dimensional transforms can also affect the visual layering of elements, and thus override the back-to-front painting order described in <a href="http://www.w3.org/TR/CSS2/zindex.html" title="Elaborate description of Stacking Contexts">Appendix E</a> of [[!CSS21]].
8888

89-
Transforms affect the results of the Element Interface extensions <a href="http://www.w3.org/TR/cssom-view/#dom-element-getclientrects">getClientRects()</a> and <a href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect()</a>, which are specified in [[CSSOM-VIEW]].
90-
9189
Transforms affect the rendering of backgrounds on elements with a value of ''fixed'' for the 'background-attachment' property, which is specified in [[!CSS3BG]].
9290

9391
<h2 id="css-values">CSS Values</h2>
@@ -244,6 +242,8 @@ <h2 id="transform-rendering">The Transform Rendering Model</h2>
244242

245243
Transforms apply to <i>transformable elements</i>.
246244

245+
Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions <a href="http://www.w3.org/TR/cssom-view/#dom-element-getclientrects">getClientRects()</a> and <a href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect()</a>, which are specified in [[CSSOM-VIEW]].
246+
247247
<div class="example">
248248
<pre>
249249
div {
@@ -891,6 +891,8 @@ <h2 id="perspective-property">The 'perspective' Property</h2>
891891

892892
The values of the 'perspective' and 'perspective-origin' properties are used to compute the <i>perspective matrix</i>, as described above.
893893

894+
Note: While the <i>bounding box</i> for SVG elements without an associated CSS layout box incorporate the result of the 'transform' and 'transform-origin' properties on descendants, the results of the 'perspective' and 'perspective-origin' properties are not taken into account.
895+
894896
<!--
895897
/$$$$$$ /$$$$$$ /$$$$$$ /$$$$$$$ /$$$$$$ /$$$$$$ /$$$$$$$
896898
/$$__ $$ /$$__ $$ /$$__ $$ /$$_____/ /$$__ $$ /$$__ $$ /$$_____/

0 commit comments

Comments
 (0)