8000 2012-01-29 simon.fraser@apple.com · xfq/csswg-drafts@163bac1 · GitHub
Skip to content

Commit 163bac1

Browse files
smfrsmfr
committed
2012-01-29 simon.fraser@apple.com
 Minor edits in various places. Made the issue-markers float:left and clear:both, so they don't overlap. Fix missing 'the': https://www.w3.org/Bugs/Public/show_bug.cgi?id=15757
1 parent ccc1bf3 commit 163bac1

3 files changed

Lines changed: 73 additions & 71 deletions

File tree

‎css3-transforms/ChangeLog‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
2012-01-29 simon.fraser@apple.com
2+
Minor edits in various places.
3+
Made the issue-markers float:left and clear:both, so they don't overlap.
4+
Fix missing 'the': https://www.w3.org/Bugs/Public/show_bug.cgi?id=15757
5+
16
2012-01-27 simon.fraser@apple.com
27
Add in 3D transform functions in their own section.
38
Move the basic 2D rendering examples up into the rendering model section.

‎css3-transforms/Overview.html‎

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,20 @@
2222
.term {
2323
font-style: italic;
2424
}
25-
25+
2626
div.issue-marker {
27-
position: absolute;
27+
float: left;
2828
width: 20ex;
2929
margin-left: -26ex;
3030
padding-right: 0.5em;
3131
font-weight: normal;
3232
font-size: 11px;
3333
text-align: right;
34-
background-color: white;
34+
background-color: transparent;
3535
font-size: 90%;
3636
padding-top: 0px;
3737
padding-bottom: 0px;
38+
clear: both;
3839
}
3940

4041
div.issue-marker a {
@@ -73,15 +74,15 @@
7374

7475
<h1>CSS Transforms</h1>
7576

76-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 January
77+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 January
7778
2012</h2>
7879

7980
<dl>
8081
<dt>This version:
8182

8283
<dd> <a
83-
href="http://www.w3.org/TR/2012/ED-css3-transforms-20120128/">http://dev.w3.org/csswg/css3-transforms/</a>
84-
<!--http://www.w3.org/TR/2012/WD-css3-transforms-20120128-->
84+
href="http://www.w3.org/TR/2012/ED-css3-transforms-20120129/">http://dev.w3.org/csswg/css3-transforms/</a>
85+
<!--http://www.w3.org/TR/2012/WD-css3-transforms-20120129-->
8586

8687
<dt>Latest version:
8788

@@ -468,10 +469,11 @@ <h2 id=transform-rendering><span class=secno>5. </span>The Transform
468469
}
469470
</pre>
470471

471-
<p>Move the element by 80 pixels in both the X and Y directions, then
472-
scale the element by 150%, then rotate it 45 degrees clockwise about the
473-
Z axis. Note that the scale and rotate operate about the center of the
474-
element, since the element has the default transform-origin of 50% 50%.</p>
472+
<p>This transform moves the element by 80 pixels in both the X and Y
473+
directions, then scales the element by 150%, then rotates it 45&deg;
474+
clockwise about the Z axis. Note that the scale and rotation operate
475+
about the center of the element, since the element has the default
476+
transform-origin of 50% 50%.</p>
475477

476478
<div class=figure> <img alt="The transform specified above"
477479
src="compound_transform.png"></div>
@@ -490,9 +492,9 @@ <h2 id=transform-rendering><span class=secno>5. </span>The Transform
490492
<!-- This "in the HTML namespace" is awkward. Is there a better way? -->
491493

492494
<p> In the HTML namespace, the transform property does not affect the flow
493-
of the content surrounding the transformed element. However, the value of
495+
of the content surrounding the transformed element. However, the extent of
494496
the overflow area takes into account transformed elements. This behavior
495-
is similar to what happens when elements are translated via relative
497+
is similar to what happens when elements are offset via relative
496498
positioning. Therefore, if the value of the <span
497499
class=prop-name>&lsquo;<code class=property>overflow</code>&rsquo;</span>
498500
property is <span class=prop-value>&lsquo;<code
@@ -519,16 +521,16 @@ <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform
519521
same plane as their containing block. Often this is the plane shared by
520522
the rest of the page. Two-dimensional transform functions can alter the
521523
appearance of an element, but that element is still rendered into the same
522-
plane as the containing block.
524+
plane as its containing block.
523525

524526
<p> Three-dimensional transforms can result in transformation matrices with
525527
a non-zero Z component<!-- clarify -->, potentially lifting them off the
526528
plane of their containing block. Because of this, elements with
527529
three-dimensional transformations could potentially render in an
528530
front-to-back order that different from the normal CSS rendering order,
529531
and intersect with each other. Whether they do so depends on whether the
530-
element is a member of a <span class=term>3D rendering context</span> or
531-
not, as described below.
532+
element is a member of a <span class=term>3D rendering context</span>, as
533+
described below.
532534

533535
<div class="issue issue-marker">
534536
<p class=desc>This description does not exactly match what WebKit
@@ -609,34 +611,20 @@ <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform
609611
given element, as described below.
610612
<!-- More detail required, probably with matrices -->
611613

612-
<p> A <span class=term>3D rendering context</span> is established via the
613-
following:
614-
615-
<ul>
616-
<li> A transformable element has a value for the <a href="#perspective"
617-
type=prop-name>perspective</a> property which is not &lsquo;<code
618-
class=property>none</code>&rsquo; and greater than 0, and which is not
619-
itself part of a 3D rendering context.</li>
620-
<!-- Part of is wooly. Need to clarify. -->
621-
622-
<li> An transformable element whose computed value of <a
623-
href="#transform-style" type=prop-name>transform-style</a> is <span
624-
class=prop-value>&lsquo;<code class=css>perserve-3d</code>&rsquo;</span>,
625-
and which itself is not part of a 3D rendering context.
626-
</ul>
627-
628-
<div class="issue issue-marker">
629-
<p class=desc>Should intersection behavior be normative?</p>
630-
</div>
614+
<p> A <span class=term>3D rendering context</span> is <em>established</em>
615+
by a a transformable element which has a computed value of <a
616+
href="#transform-style" type=prop-name>transform-style</a> is <span
617+
class=prop-value>&lsquo;<code class=css>preserve-3d</code>&rsquo;</span>,
618+
and which itself is not part of a 3D rendering context. Note that such an
619+
element is always a containing block.
631620

632621
<p> An element whose computed value for <a href="#transform-style"
633622
type=prop-name>transform-style</a> is <span style=prop-value>&lsquo;<code
634623
class=css>preserve-3d</code>&rsquo;</span>, and which is itself a member
635624
of a <span class=term>3D rendering context</span>, extends the 3D
636-
rendering context of which it is a member to the elements for which it
637-
acts as a containing block.
625+
rendering context of which it is a member.
638626

639-
<p> An element participates in a <span class=term>3D rendering
627+
<p> An element <em>participates</em> in a <span class=term>3D rendering
640628
context</span> if its containing block establishes or extends a <span
641629
class=term>3D rendering context</span>.</p>
642630
<!-- Need more exposition here on establishes vs. participates -->
@@ -652,8 +640,9 @@ <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform
652640
perspective, multiply that into the matrix, taking perspective-origin
653641
into account.
654642

655-
<li>For each ancestor of the element in question, compute a transformation
656-
matrix by:
643+
<li>For each containing block between the root of the <span class=term>3D
644+
rendering context</span> and the element in question, compute a
645+
transformation matrix by:
657646
<ol>
658647
<li>applying perpsective and perspective-origin, if any
659648

@@ -665,6 +654,10 @@ <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform
665654
</ol>
666655
The target matrix is then multiplied with the matrix for this ancestor.
667656
</ol>
657+
658+
<div class="issue issue-marker">
659+
<p class=desc>Should intersection behavior be normative?</p>
660+
</div>
668661
<!-- Discuss whether an element that establishes a 3D rendering context also participates in it; notably,
669662
does the foreground/background of the element intersect with transformed members of the 3D rendering context? -->
670663
<!-- Discuss whether non-transformed memebers of the <span class="term">3D rendering context</span> participate in intersection -->
@@ -814,7 +807,12 @@ <h2 id=transform-property><span class=secno>6. </span> The <span
814807
as a two-dimensional matrix with no loss of information, then a matrix()
815808
value is returned, otherwise a matrix3d() value. For elements with no
816809
transform applied, the computed value is &lsquo;<code
817-
class=property>none</code>&rsquo;.</p>
810+
class=property>none</code>&rsquo;.
811+
812+
<p>Any value other than &lsquo;<code class=property>none</code>&rsquo; for
813+
the transform results in the creation of both a stacking context and a
814+
containing block. The object acts as a containing block for fixed
815+
positioned descendants.</p>
818816
<!-- ======================================================================================================= -->
819817

820818
<h3 id=svg-transform><span class=secno>6.1. </span>The SVG transform
@@ -1126,6 +1124,10 @@ <h2 id=perspective-property><span class=secno>9. </span> The <span
11261124
<td> Same as specified value.
11271125
</table>
11281126

1127+
<div class=issue>
1128+
<p>Does perspective establish a containing block?
1129+
</div>
1130+
11291131
<p> If the value is <span class=prop-value>&lsquo;<code
11301132
class=property>none</code>&rsquo;</span>, less than or equal to 0 no
11311133
perspective transform is applied.
@@ -1547,7 +1549,7 @@ <h2 id=animation><span class=secno>14. </span> Transitions and animations
15471549
<ul>
15481550
<li> Each transform function is animated with its corresponding
15491551
destination function in isolation using the rules described above. The
1550-
individual values are then applied as a list to produce resulting
1552+
individual values are then applied as a list to produce the resulting
15511553
transform value.
15521554
</ul>
15531555

‎css3-transforms/Transforms.src.html‎

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,20 @@
1818
.term {
1919
font-style: italic;
2020
}
21-
21+
2222
div.issue-marker {
23-
position: absolute;
23+
float: left;
2424
width: 20ex;
2525
margin-left: -26ex;
2626
padding-right: 0.5em;
2727
font-weight: normal;
2828
font-size: 11px;
2929
text-align: right;
30-
background-color: white;
30+
background-color: transparent;
3131
font-size: 90%;
3232
padding-top: 0px;
3333
padding-bottom: 0px;
34+
clear: both;
3435
}
3536

3637
div.issue-marker a {
@@ -284,7 +285,7 @@ <h2 id="transform-rendering">The Transform Rendering Model</h2>
284285
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
285286
}
286287
</pre>
287-
<p>Move the element by 80 pixels in both the X and Y directions, then scale the element by 150%, then rotate it 45 degrees clockwise about the Z axis. Note that the scale and rotate operate about the center of the element, since the element has the default transform-origin of 50% 50%.</p>
288+
<p>This transform moves the element by 80 pixels in both the X and Y directions, then scales the element by 150%, then rotates it 45&deg; clockwise about the Z axis. Note that the scale and rotation operate about the center of the element, since the element has the default transform-origin of 50% 50%.</p>
288289
<div class="figure">
289290
<img src="compound_transform.png" alt="The transform specified above">
290291
</div>
@@ -303,9 +304,9 @@ <h2 id="transform-rendering">The Transform Rendering Model</h2>
303304
<!-- This "in the HTML namespace" is awkward. Is there a better way? -->
304305
<p>
305306
In the HTML namespace, the transform property does not affect the flow of the content
306-
surrounding the transformed element. However, the value of the overflow
307+
surrounding the transformed element. However, the extent of the overflow
307308
area takes into account transformed elements. This behavior is similar
308-
to what happens when elements are translated via relative positioning.
309+
to what happens when elements are offset via relative positioning.
309310
Therefore, if the value of the <span class="prop-name">'overflow'</span>
310311
property is <span class="prop-value">'scroll'</span> or <span
311312
class="prop-value">'auto'</span>, scrollbars will appear as needed to
@@ -329,15 +330,15 @@ <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
329330
Normally, elements render as flat planes, and are rendered into the same plane
330331
as their containing block. Often this is the plane shared by the rest of the page.
331332
Two-dimensional transform functions can alter the appearance of an element, but
332-
that element is still rendered into the same plane as the containing block.
333+
that element is still rendered into the same plane as its containing block.
333334
</p>
334335
<p>
335336
Three-dimensional transforms can result in transformation matrices with a non-zero
336337
Z component<!-- clarify -->, potentially lifting them off the plane of their
337338
containing block. Because of this, elements with three-dimensional transformations
338339
could potentially render in an front-to-back order that different from the normal CSS rendering order,
339340
and intersect with each other. Whether they do so depends on whether the element is a member
340-
of a <span class="term">3D rendering context</span> or not, as described below.
341+
of a <span class="term">3D rendering context</span>, as described below.
341342
</p>
342343
<div class="issue issue-marker">
343344
<p class="desc">This description does not exactly match what WebKit implements. Perhaps
@@ -411,32 +412,18 @@ <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
411412
</p>
412413

413414
<p>
414-
A <span class="term">3D rendering context</span> is established via the following:
415+
A <span class="term">3D rendering context</span> is <em>established</em> by a
416+
a transformable element which has a computed value of <span type="prop-name">transform-style</span> is
417+
<span class="prop-value">'preserve-3d'</span>, and which itself is not part of a 3D rendering context.
418+
Note that such an element is always a containing block.
415419
</p>
416-
<ul>
417-
<li>
418-
A transformable element has a value for the <span type="prop-name">perspective</span> property
419-
which is not 'none' and greater than 0, and which is not itself part of a 3D rendering context.
420-
</li>
421-
<!-- Part of is wooly. Need to clarify. -->
422-
<li>
423-
An transformable element whose computed value of <span type="prop-name">transform-style</span> is
424-
<span class="prop-value">'perserve-3d'</span>, and which itself is not part of a 3D rendering context.
425-
</li>
426-
</ul>
427-
428-
<div class="issue issue-marker">
429-
<p class="desc">Should intersection behavior be normative?</p>
430-
</div>
431420
<p>
432421
An element whose computed value for <span type="prop-name">transform-style</span> is
433422
<span style="prop-value">'preserve-3d'</span>, and which is itself a member of a
434-
<span class="term">3D rendering context</span>, extends the 3D rendering context of which it is a member
435-
to the elements for which it acts as a containing block.
423+
<span class="term">3D rendering context</span>, extends the 3D rendering context of which it is a member.
436424
</p>
437-
438425
<p>
439-
An element participates in a <span class="term">3D rendering context</span> if its containing block
426+
An element <em>participates</em> in a <span class="term">3D rendering context</span> if its containing block
440427
establishes or extends a <span class="term">3D rendering context</span>.
441428
</p>
442429

@@ -451,7 +438,8 @@ 938D <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
451438
<li>Start with the identity matrix</li>
452439
<li>If the root of the <span class="term">3D rendering context</span> has perspective, multiply that into
453440
the matrix, taking perspective-origin into account.</li>
454-
<li>For each ancestor of the element in question, compute a transformation matrix by:
441+
<li>For each containing block between the root of the <span class="term">3D rendering context</span>
442+
and the element in question, compute a transformation matrix by:
455443
<ol>
456444
<li>applying perpsective and perspective-origin, if any</li>
457445
<li>applying a translation equivalent to the horizontal and vertical offset of the element relative to
@@ -462,6 +450,10 @@ <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
462450
</li>
463451
</ol>
464452

453+
<div class="issue issue-marker">
454+
<p class="desc">Should intersection behavior be normative?</p>
455+
</div>
456+
465457
<!-- Discuss whether an element that establishes a 3D rendering context also participates in it; notably,
466458
does the foreground/background of the element intersect with transformed members of the 3D rendering context? -->
467459
<!-- Discuss whether non-transformed memebers of the <span class="term">3D rendering context</span> participate in intersection -->
@@ -632,6 +624,8 @@ <h2 id="transform-property">
632624
</div>
633625
<p>The computed value of the transform property is a matrix() or matrix3d() value that describes the matrix that results from concatenating the individual transform functions. If the resulting matrix can be represented as a two-dimensional matrix with no loss of information, then a matrix() value is returned, otherwise a matrix3d() value. For elements with no transform applied, the computed value is 'none'.</p>
634626

627+
<p>Any value other than 'none' for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.</p>
628+
635629
<!-- ======================================================================================================= -->
636630

637631
<h3 id="svg-transform">The SVG transform attribute</h3>
@@ -983,6 +977,7 @@ <h2 id="perspective-property">
983977
</tbody>
984978
</table>
985979

980+
<div class="issue"><p>Does perspective establish a containing block?</p></div>
986981
<p>
987982
If the value is <span
988983
class="prop-value">'none'</span>, less than or equal to 0 no perspective transform is applied.
@@ -1441,7 +1436,7 @@ <h2 id="animation">
14411436
<li>
14421437
Each transform function is animated with its corresponding
14431438
destination function in isolation using the rules described above.
1444-
The individual values are then applied as a list to produce
1439+
The individual values are then applied as a list to produce the
14451440
resulting transform value.
14461441
</li>
14471442
</ul>

0 commit comments

Comments
 (0)