Skip to content

Commit

Permalink
[css-position-3] Fix computed value lines, add animation type, update…
Browse files Browse the repository at this point in the history 
… offset-* to inset-*
  • Loading branch information
@fantasai
fantasai committed Sep 26, 2018
1 parent a7856ae commit 6516a86
Showing 1 changed file with 46 additions and 38 deletions.
84 changes: 46 additions & 38 deletions css-position-3/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -733,7 +733,8 @@ Choosing a positioning scheme: 'position' property</h3>
Inherited: no
Animatable: no
Percentages: N/A
Computed value: specified value
Computed value: specified keyword
Animation type: discrete
</pre>

The values of this property have the following meanings:
Expand Down Expand Up @@ -843,7 +844,8 @@ Box offsets: 'top', 'right', 'bottom', 'left'</h3>
Inherited: no
Animation type: length or percentage
Percentages: refer to height of <a>containing block</a>
Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''top/auto''.<br/> Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''top/auto''.
Computed value: the keyword ''top/auto'' or an absolute length and/or percentage expression
Animation type: by computed value
</pre>

This property specifies how far an absolutely positioned box’s top margin
Expand All @@ -868,7 +870,8 @@ Box offsets: 'top', 'right', 'bottom', 'left'</h3>
Inherited: no
Animation type: length or percentage
Percentages: refer to height of <a>containing block</a>
Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''right/auto''.<br/> Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''right/auto''.
Computed value: the keyword ''right/auto'' or an absolute length and/or percentage expression
Animation type: by computed value
</pre>

Similar to 'top', but specifies how far a box’s right margin edge is offset
Expand All @@ -893,7 +896,8 @@ Box offsets: 'top', 'right', 'bottom', 'left'</h3>
Inherited: no
Animation type: length or percentage
Percentages: refer to height of <a>containing block</a>
Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''bottom/auto''.<br/> Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''bottom/auto''.
Computed value: the keyword ''bottom/auto'' or an absolute length and/or percentage expression
Animation type: by computed value
</pre>

Similar to 'top', but specifies how far a box’s bottom margin edge is offset
Expand All @@ -918,7 +922,8 @@ Box offsets: 'top', 'right', 'bottom', 'left'</h3>
Inherited: no
Animation type: length or percentage
Percentages: refer to height of <a>containing block</a>
Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''left/auto''. Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''left/auto''.
Computed value: the keyword ''left/auto'' or an absolute length and/or percentage expression
Animation type: by computed value
</pre>

Similar to 'top', but specifies how far a box’s left margin edge is offset
Expand Down Expand Up @@ -971,11 +976,11 @@ Box offsets: 'top', 'right', 'bottom', 'left'</h3>
<!-- End section: Box offsets: 'top', 'right', 'bottom', 'left' -->

<h3 id="logical-box-offsets-beaso">
Logical box offsets: 'offset-before', 'offset-end', 'offset-after' and 'offset-start'</h3>
Logical box insets: 'inset-before', 'inset-end', 'inset-after' and 'inset-start'</h3>

Issue: See [[!CSS-LOGICAL-1]]; this section is not up-to-date.

Logical offset properties allow for offsetting positioned boxes based on the
Logical offset properties allow for insetting positioned boxes based on the
'writing-mode' and 'direction' properties. When both the physical property and
equivalent logical property (based on 'writing-mode' and 'direction') are
specified the physical property computes to the computed value of the corresponding
Expand All @@ -986,14 +991,15 @@ Logical box offsets: 'offset-before', 'offset-end', 'offset-after' and 'offset-s
and 'direction' of the <a>containing block</a>:

<pre class="propdef">
Name: offset-before, offset-after, offset-start, offset-end
Name: inset-before, inset-after, inset-start, inset-end
Value: auto | <<length-percentage>>
Initial: auto
Applies to: positioned elements
Inherited: no
Animation type: length or percentage
Percentages: refer to height of <a>containing block</a>
Computed value: For ''position: relative'', see Relative positioning.<br/> For ''position: sticky'', see Sticky positioning.<br/> For ''position: static'', ''top/auto''.<br/> Otherwise: if specified as a <<length>>, the corresponding absolute length; if specified as a <<percentage>>, the specified value; otherwise, ''top/auto''.
Computed value: the keyword ''inset-before/auto'' or an absolute length and/or percentage expression
Animation type: by computed value
</pre>

For an absolutely positioned box this property specifies how far the corresponding
Expand Down Expand Up @@ -1029,59 +1035,59 @@ Logical box offsets: 'offset-before', 'offset-end', 'offset-after' and 'offset-s
<tr>
<td rowspan="4"><div>Edge</div></td>
<td>top</td>
<td>offset-before</td>
<td>offset-before</td>
<td>offset-start</td>
<td>offset-end</td>
<td>offset-start</td>
<td>offset-end</td>
<td>inset-before</td>
<td>inset-before</td>
<td>inset-start</td>
<td>inset-end</td>
<td>inset-start</td>
<td>inset-end</td>
</tr>
<tr>
<td>right</td>
<td>offset-end</td>
<td>offset-start</td>
<td>offset-before</td>
<td>offset-before</td>
<td>offset-after</td>
<td>offset-after</td>
<td>inset-end</td>
<td>inset-start</td>
<td>inset-before</td>
<td>inset-before</td>
<td>inset-after</td>
<td>inset-after</td>
</tr>
<tr>
<td>bottom</td>
<td>offset-after</td>
<td>offset-after</td>
<td>offset-end</td>
<td>offset-start</td>
<td>offset-end</td>
<td>offset-start</td>
<td>inset-after</td>
<td>inset-after</td>
<td>inset-end</td>
<td>inset-start</td>
<td>inset-end</td>
<td>inset-start</td>
</tr>
<tr>
<td>left</td>
<td>offset-start</td>
<td>offset-end</td>
<td>offset-after</td>
<td>offset-after</td>
<td>offset-before</td>
<td>offset-before</td>
<td>inset-start</td>
<td>inset-end</td>
<td>inset-after</td>
<td>inset-after</td>
<td>inset-before</td>
<td>inset-before</td>
</tr>
</tbody>
</table>
<p class="caption">
Relationship of physical offset edges and the logical properties per
Relationship of physical inset edges and the logical properties per
'writing-mode' and 'direction'.
</p>
</div>

<p class="issue">The logical property definitions should move to the Logical Properties module.</p>

For relatively positioned boxes, the offset is with respect to the property’s
For relatively positioned boxes, the inset is with respect to the property’s
corresponding physical reference edge of the box itself (i.e., the box is given a
position in the <a>normal flow</a>, and then offset from that position according
to the property).

<p class="issue">This needs to be defined for sticky positioning.</p>

For absolutely positioned elements whose <a>containing block</a>
is based on a block-level element, this property is an offset from the corresponding
is based on a block-level element, this property is an inset from the corresponding
padding edge of that element.

<p class="note">
Expand Down Expand Up @@ -1111,6 +1117,7 @@ Inherited: no
Animatable: no
Percentages: n/a
Computed value: specified value, but see prose
Animation type: discrete
</pre>
The values of this property have the following meanings:
Expand Down Expand Up @@ -1502,7 +1509,7 @@ Auto heights for block formatting context roots</h3>
the bottommost block-level child box.

Absolutely positioned children are ignored, and relatively positioned boxes are
considered without their offset. Note that the child box may be an <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">anonymous block box</a>.
considered without their inset. Note that the child box may be an <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">anonymous block box</a>.

In addition, if the element has any floating descendants whose bottom margin edge
is below the element’s bottom content edge, then the height is increased to
Expand Down Expand Up @@ -1941,7 +1948,8 @@ Layered presentation</h2>
Inherited: no
Animatable: &lt;integer>
Percentages: N/A
Computed value: as specified
Computed value: the keyword ''z-index/auto'' or an integer
Animation type: per computed value
</pre>

For a positioned box, the 'z-index' property specifies:
Expand Down

0 comments on commit 6516a86

Please sign in to comment.