Skip to content

Commit

Permalink
[cssom][css-grid][css-transforms] Make 'transform-origin' and 'perspe…
Browse files Browse the repository at this point in the history
…ctive-origin' resolved value like 'height'

Also mention that 'grid-template-rows' and 'grid-template-columns'
are resolved value special case properties (no normative change).

Fixes #392.
  • Loading branch information
zcorpan committed Mar 9, 2017
1 parent d99abee commit 2317722
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 11 deletions.
3 changes: 3 additions & 0 deletions css-grid/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1720,6 +1720,9 @@ Flexible Lengths: the ''fr'' unit</h4>
<h4 id='resolved-track-list'>
Resolved Values</h4>

The 'grid-template-rows' and 'grid-template-columns' properties are
<a>resolved value special case properties</a>. [[!CSSOM]]

When an element's 'display' is ''grid'' or ''inline-grid'' and it generates a box,
the <a href="https://www.w3.org/TR/cssom/#resolved-values">resolved value</a>
of the 'grid-template-rows' and 'grid-template-columns' properties is the used value,
Expand Down
10 changes: 5 additions & 5 deletions css-transforms-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ Abstract: This spec add new tranform functions and properties for three-dimensio

<pre class="link-defaults">
spec:css-2d-transforms-1;
type:property;
type:property;
text:transform
text:transform-origin
type:dfn;
type:dfn;
text: transformation matrix
text: transformable element
</pre>
Expand Down Expand Up @@ -50,7 +50,7 @@ Module Interactions {#module-interactions}
The '3D transform functions' here extend the set of functions for the 'transform' property.

Some values of 'perspective', 'transform-style' and 'backface-visibility' result in the creation of a <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>, and/or the creation of a <a spec="css21">stacking context</a>.

Three-dimensional transforms affect the visual layering of elements, and thus override the back-to-front painting order described in <a href="https://www.w3.org/TR/CSS2/zindex.html">Appendix E</a> of [[!CSS21]].


Expand Down Expand Up @@ -137,7 +137,7 @@ Three-dimensional transform functions extend this coordinate space into three di

<p id="transformation-matrix-computation">
The <a>transformation matrix</a> is computed from the 'transform' and 'transform-origin' properties as follows:

1. Start with the identity matrix.
2. Translate by the computed X, Y and Z of 'transform-origin'
3. Multiply by each of the transform functions in 'transform' property from left to right
Expand Down Expand Up @@ -733,7 +733,7 @@ The values for 'perspective-origin' represent an offset of the perspective origi

</dl>

'perspective-origin' is a <a>resolved value special case property</a>. The <a>resolved value</a> of 'perspective-origin' is the <a>used value</a> (i.e., percentages are resolved to absolute lengths).
The 'perspective-origin' property is a <a>resolved value special case property like 'height'</a>. [[!CSSOM]]

The 'backface-visibility' Property {#backface-visibility-property}
==================================
Expand Down
12 changes: 6 additions & 6 deletions css-transforms/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ spec:css-display-3; type:value; for:display
text: table-footer-group
text: table-cell
text: table-caption

spec:css-overflow-4; type:property;
text:overflow
text:overflow

spec:css-backgrounds-3; type:property
text: background-attachment
Expand Down Expand Up @@ -118,7 +118,7 @@ When used in this specification, terms have the meanings assigned in this sectio
:: A transformable element is an element in one of these categories:
* an element whose layout is governed by the CSS box model which is either a <a href="https://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a> or <a href="https://www.w3.org/TR/CSS2/visuren.html#x13">atomic inline-level element</a>, or whose 'display' property computes to ''table-row'', ''table-row-group'', ''table-header-group'', ''table-footer-group'', ''table-cell'', or ''table-caption'' [[!CSS21]]
* an element in the SVG namespace and not governed by the CSS box model which has the attributes 'transform', <{pattern/patternTransform}> or <{linearGradient/gradientTransform}> [[!SVG11]].

: <dfn>transformed element</dfn>
:: An element with a computed value other than ''transform/none'' for the 'transform' property.

Expand Down Expand Up @@ -153,7 +153,7 @@ The coordinate space is a coordinate system with two axes: the X axis increases

<p id="transformation-matrix-computation">
The [=transformation matrix=] is computed from the 'transform' and 'transform-origin' properties as follows:

1. Start with the identity matrix.
2. Translate by the computed X and Y of 'transform-origin'
3. Multiply by each of the transform functions in 'transform' property from left to right
Expand Down Expand Up @@ -315,7 +315,7 @@ If two or more values are defined and either no value is a keyword, or the only
:: Computes to ''50%'' (''left 50%'') for the horizontal position if the horizontal position is not otherwise specified, or ''50%'' (''top 50%'') for the vertical position if it is.
</dl>

'transform-origin' is a <a>resolved value special case property</a>. The <a href="https://www.w3.org/TR/cssom/#resolved-value">resolved value</a> of 'transform-origin' is the [=used value=] (i.e., percentages are resolved to absolute lengths).
The 'transform-origin' property is a <a>resolved value special case property like 'height'</a>. [[!CSSOM]]


Transform reference box: the 'transform-box' property {#transform-box}
Expand Down Expand Up @@ -344,7 +344,7 @@ All transformations defined by the 'transform' and 'transform-origin' property a

: <dfn dfn-type=value>view-box</dfn>
:: Uses the nearest <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> as reference box.

If a {{viewBox}} attribute is specified for the <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> creating element:
* The reference box is positioned at the origin of the coordinate system established by the {{viewBox}} attribute.
* The dimension of the reference box is set to the <em>width</em> and <em>height</em> values of the {{viewBox}} attribute.
Expand Down
3 changes: 3 additions & 0 deletions cssom/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -2702,6 +2702,7 @@ as follows:
<dt>'color'
<dt>'line-height'
<dt>'outline-color'
<dt>A <dfn export>resolved value special case property like 'color'</dfn> defined in another specification
<dd>The <a>resolved value</a> is the <a>used value</a>.

<dt>'block-size'
Expand All @@ -2724,6 +2725,7 @@ as follows:
<dt>'padding-right'
<dt>'padding-top'
<dt>'width'
<dt>A <dfn export>resolved value special case property like 'height'</dfn> defined in another specification
<dd>If the property applies to the element or pseudo-element and the <a>resolved value</a> of the
'display' property is not ''display/none'' or ''display/contents'', then the <a>resolved value</a>
is the <a>used value</a>. Otherwise the <a>resolved value</a> is the <a>computed value</a>.
Expand All @@ -2736,6 +2738,7 @@ as follows:
<dt>'offset-inline-start'
<dt>'right'
<dt>'top'
<dt>A <dfn export>resolved value special case property like 'top'</dfn> defined in another specification
<dd>If the property applies to a positioned element and the <a>resolved value</a> of the 'display'
property is not ''display/none'' or ''display/contents'', and the property is not over-constrained,
then the <a>resolved value</a> is the <a>used value</a>. Otherwise the <a>resolved value</a> is the
Expand Down

0 comments on commit 2317722

Please sign in to comment.