Skip to content

Commit

Permalink
[css-sizing] CSS21->CSS2
Browse files Browse the repository at this point in the history
  • Loading branch information
fantasai committed Jul 17, 2017
1 parent d05651c commit fddec46
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 35 deletions.
34 changes: 17 additions & 17 deletions css-sizing-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@ Introduction</h2>
Module interactions</h3>

<p>This module extends the 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', and 'column-width'
features defined in [[!CSS21]] chapter 10 and in [[!CSS3COL]]
features defined in [[!CSS2]] chapter 10 and in [[!CSS3COL]]

<h3 id="values">
Values</h3>

This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]].
This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]].
Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]].
Other CSS modules may expand the definitions of these value types.

Expand Down Expand Up @@ -85,7 +85,7 @@ Terminology</h2>
a measure of text (without consideration of line-wrapping),
a size of the <a>initial containing block</a>,
or a <<percentage>> or other formula
(such the <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">“stretch-fit” sizing of non-replaced blocks</a> [[CSS21]])
(such the <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">“stretch-fit” sizing of non-replaced blocks</a> [[CSS2]])
that is resolved solely against <a>definite</a> sizes.

Additionally, the size of the <a>containing block</a> of an absolutely positioned element is always <a>definite</a>
Expand All @@ -111,7 +111,7 @@ Terminology</h2>
<!--
<p>
The space <a>available</a> to a box is determined by the formatting context in which it participates.
In block, table, and inline formatting contexts [[!CSS21]],
In block, table, and inline formatting contexts [[!CSS2]],
the <a>available space</a> is infinite in the block-axis dimension.
<span class="issue">What, exactly, is the available space in the inline axis??? What about other formatting models?</span>
-->
Expand All @@ -128,7 +128,7 @@ Terminology</h2>

<p class='note'>
Note: This is the formula used to calculate the ''width/auto'' widths
of non-replaced blocks in normal flow in <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
of non-replaced blocks in normal flow in <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">CSS2.1§10.3.3</a>.

<dt><dfn lt="fallback|fallback size">fallback size</dfn>
<dd>
Expand All @@ -150,8 +150,8 @@ Auto Box Sizes</h3>
in the given axis.
(See [[#extrinsic]].)

Note: For the <a>inline axis</a>, this is called the “available width” in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
and computed by the rules in <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
Note: For the <a>inline axis</a>, this is called the “available width” in <a href="https://www.w3.org/TR/CSS2/visudet.html#float-width">CSS2.1§10.3.5</a>
and computed by the rules in <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">CSS2.1§10.3.3</a>.

: <dfn lt="max-content | max-content size">max-content size</dfn>
:: A box’s “ideal” <a>size</a> in a given axis when given infinite available space.
Expand All @@ -165,8 +165,8 @@ Auto Box Sizes</h3>
if <em>none</em> of the soft wrap opportunities within the box were taken.
(See [[#intrinsic]].)

Note: This is called the “preferred width” in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
and the “maximum cell width” in <a href="https://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>.
Note: This is called the “preferred width” in <a href="https://www.w3.org/TR/CSS2/visudet.html#float-width">CSS2.1§10.3.5</a>
and the “maximum cell width” in <a href="https://www.w3.org/TR/CSS2/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>.

: <dfn>max-content block size</dfn>
:: The box's “ideal” <a>size</a> in the <a>block axis</a>.
Expand All @@ -185,8 +185,8 @@ Auto Box Sizes</h3>
Roughly, the <a>inline size</a> that would fit around its contents
if <em>all</em> soft wrap opportunities within the box were taken.

Note: This is called the “preferred minimum width” in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
and the “minimum content width” in <a href="https://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>.
Note: This is called the “preferred minimum width” in <a href="https://www.w3.org/TR/CSS2/visudet.html#float-width">CSS2.1§10.3.5</a>
and the “minimum content width” in <a href="https://www.w3.org/TR/CSS2/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>.

: <dfn>min-content block size</dfn>
:: Equivalent to the <a>max-content block size</a>.
Expand All @@ -203,7 +203,7 @@ Auto Box Sizes</h3>
equal to <code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>stretch-fit size</a>))</code>.
Otherwise, equal to the <a>max-content size</a> in that axis.

Note: This is called the “shrink-to-fit” width in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
Note: This is called the “shrink-to-fit” width in <a href="https://www.w3.org/TR/CSS2/visudet.html#float-width">CSS2.1§10.3.5</a>
and <a href="https://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS Multi-column Layout § 3.4</a>.
</div>

Expand Down Expand Up @@ -260,7 +260,7 @@ New Keywords for 'width' and 'height'</h3>
as appropriate to the writing mode.

NOTE: This is the formula used to calculate ''width/auto'' widths
for non-replaced blocks in normal flow, see <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
for non-replaced blocks in normal flow, see <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
It allows re-using this formula for boxes that are otherwise shrink-wrapped,
like tables.

Expand Down Expand Up @@ -306,7 +306,7 @@ New Keywords for 'width' and 'height'</h3>
Note that percentages resolved against the intrinsic sizes
(''width/max-content'', ''width/min-content'', ''width/fit-content'')
will compute to ''width/auto'',
<a href="https://www.w3.org/TR/CSS21/visudet.html#the-height-property">as defined by CSS 2.1</a>. [[!CSS21]]
<a href="https://www.w3.org/TR/CSS2/visudet.html#the-height-property">as defined by CSS 2.1</a>. [[!CSS2]]

<h3 id='the-contain-floats-value'>
Containing Floats</h3>
Expand Down Expand Up @@ -389,7 +389,7 @@ Intrinsic Contributions</h3>
if that hypothetical float's containing block is zero-sized/infinitely-sized.

Note: This specification does not define how to determine these sizes.
Please refer to [[CSS21]],
Please refer to [[CSS2]],
the relevant CSS specification for that display type,
and/or existing implementations
for further details.
Expand Down Expand Up @@ -419,7 +419,7 @@ Stretch-fit Sizing</h3>


&hellip;less the box's <a>inline-axis</a> margins
(after any <a href="https://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin collapsing</a>, and treating ''margin/auto'' margins as zero),
(after any <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">margin collapsing</a>, and treating ''margin/auto'' margins as zero),
borders, and padding,
flooring at zero.

Expand Down Expand Up @@ -450,7 +450,7 @@ Stretch-fit Sizing</h3>
Note: See definition of percentage
<a href="https://www.w3.org/TR/CSS2/visudet.html#the-width-property"><css>width</css></a>
and <a href="https://www.w3.org/TR/CSS2/visudet.html#the-height-property"><css>height</css></a>
in [[CSS21]].
in [[CSS2]].

<h2 class=no-num id="changes">
Changes</h2>
Expand Down
36 changes: 18 additions & 18 deletions css-sizing/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,12 @@ Introduction</h2>
Module interactions</h3>

<p>This module extends the 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', and 'column-width'
features defined in [[!CSS21]] chapter 10 and in [[!CSS3COL]]
features defined in [[!CSS2]] chapter 10 and in [[!CSS3COL]]

<h3 id="values">
Values</h3>

This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]].
This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]].
Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]].
Other CSS modules may expand the definitions of these value types.

Expand Down Expand Up @@ -86,7 +86,7 @@ Terminology</h2>
a measure of text (without consideration of line-wrapping),
a size of the <a>initial containing block</a>,
or a <<percentage>> or other formula
(such the <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">“stretch-fit” sizing of non-replaced blocks</a> [[CSS21]])
(such the <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">“stretch-fit” sizing of non-replaced blocks</a> [[CSS2]])
that is resolved solely against <a>definite</a> sizes.

Additionally, the size of the <a>containing block</a> of an absolutely positioned element is always <a>definite</a>
Expand All @@ -111,7 +111,7 @@ Terminology</h2>
<!--
<p>
In block, table, and inline formatting contexts [[!CSS21]],
In block, table, and inline formatting contexts [[!CSS2]],
the <a>available space</a> is infinite in the block-axis dimension.
<span class="issue">What, exactly, is the available space in the inline axis??? What about other formatting models?</span>
-->
Expand All @@ -128,7 +128,7 @@ Terminology</h2>

<p class='note'>
Note: This is the formula used to calculate the ''width/auto'' widths
of non-replaced blocks in normal flow in <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
of non-replaced blocks in normal flow in <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">CSS2.1§10.3.3</a>.

<dt><dfn lt="fallback|fallback size">fallback size</dfn>
<dd>
Expand All @@ -150,8 +150,8 @@ Auto Box Sizes</h3>
in the given axis.
(See [[#extrinsic]].)

Note: For the <a>inline axis</a>, this is called the “available width” in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
and computed by the rules in <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
Note: For the <a>inline axis</a>, this is called the “available width” in <a href="https://www.w3.org/TR/CSS2/visudet.html#float-width">CSS2.1§10.3.5</a>
and computed by the rules in <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">CSS2.1§10.3.3</a>.

: <dfn lt="max-content | max-content size">max-content size</dfn>
:: A box’s “ideal” <a>size</a> in a given axis when given infinite available space.
Expand All @@ -165,8 +165,8 @@ Auto Box Sizes</h3>
if <em>none</em> of the soft wrap opportunities within the box were taken.
(See [[#intrinsic]].)

Note: This is called the “preferred width” in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
and the “maximum cell width” in <a href="https://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>.
Note: This is called the “preferred width” in <a href="https://www.w3.org/TR/CSS2/visudet.html#float-width">CSS2.1§10.3.5</a>
and the “maximum cell width” in <a href="https://www.w3.org/TR/CSS2/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>.

: <dfn>max-content block size</dfn>
:: The box's “ideal” <a>size</a> in the <a>block axis</a>.
Expand All @@ -185,8 +185,8 @@ Auto Box Sizes</h3>
Roughly, the <a>inline size</a> that would fit around its contents
if <em>all</em> soft wrap opportunities within the box were taken.

Note: This is called the “preferred minimum width” in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
and the “minimum content width” in <a href="https://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>.
Note: This is called the “preferred minimum width” in <a href="https://www.w3.org/TR/CSS2/visudet.html#float-width">CSS2.1§10.3.5</a>
and the “minimum content width” in <a href="https://www.w3.org/TR/CSS2/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>.

: <dfn>min-content block size</dfn>
:: Equivalent to the <a>max-content block size</a>.
Expand All @@ -203,7 +203,7 @@ Auto Box Sizes</h3>
equal to <code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>stretch-fit size</a>))</code>.
Otherwise, equal to the <a>max-content size</a> in that axis.

Note: This is called the “shrink-to-fit” width in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
Note: This is called the “shrink-to-fit” width in <a href="https://www.w3.org/TR/CSS2/visudet.html#float-width">CSS2.1§10.3.5</a>
and <a href="https://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS Multi-column Layout § 3.4</a>.
</div>

Expand Down Expand Up @@ -260,7 +260,7 @@ New Keywords for 'width' and 'height'</h3>
as appropriate to the writing mode.

NOTE: This is the formula used to calculate ''width/auto'' widths
for non-replaced blocks in normal flow, see <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
for non-replaced blocks in normal flow, see <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
It allows re-using this formula for boxes that are otherwise shrink-wrapped,
like tables.

Expand Down Expand Up @@ -304,7 +304,7 @@ New Keywords for 'width' and 'height'</h3>
Note that percentages resolved against the intrinsic sizes
(''width/max-content'', ''width/min-content'', ''width/fit-content'')
will compute to ''width/auto'',
<a href="https://www.w3.org/TR/CSS21/visudet.html#the-height-property">as defined by CSS 2.1</a>. [[!CSS21]]
<a href="https://www.w3.org/TR/CSS2/visudet.html#the-height-property">as defined by CSS 2.1</a>. [[!CSS2]]

<h3 id='the-contain-floats-value'>
Containing Floats</h3>
Expand Down Expand Up @@ -439,8 +439,8 @@ Intrinsic Sizes of Non-Replaced Blocks</h3>
The <a>min-content block size</a> and <a>max-content block size</a> of a <a>block container box</a>
is the content block-size as defined
(for horizontal writing modes)
in <a href="https://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a>
and <a href="https://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a>
in <a href="https://www.w3.org/TR/CSS2/visudet.html#normal-block">CSS2.1§10.6.3</a>
and <a href="https://www.w3.org/TR/CSS2/tables.html#height-layout">CSS2.1§17.5.3</a>
for elements with ''height: auto'',
and analogously for vertical writing modes.

Expand Down Expand Up @@ -576,7 +576,7 @@ Stretch-fit Sizing</h3>
</ul>
<p>
&hellip;less the box's <a>inline-axis</a> margins
(after any <a href="https://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin collapsing</a>, and treating ''margin/auto'' margins as zero),
(after any <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">margin collapsing</a>, and treating ''margin/auto'' margins as zero),
borders, and padding,
flooring at zero.

Expand Down Expand Up @@ -673,7 +673,7 @@ Percentage Sizing</h3>
Note: See definition of percentage
<a href="https://www.w3.org/TR/CSS2/visudet.html#the-width-property"><css>width</css></a>
and <a href="https://www.w3.org/TR/CSS2/visudet.html#the-height-property"><css>height</css></a>
in [[CSS21]].
in [[CSS2]].

<h2 class=no-num id="changes">
Changes</h2>
Expand Down
18 changes: 18 additions & 0 deletions css-sizing/Overview.bs.rej
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
--- Overview.bs
+++ Overview.bs
@@ -303,15 +308,6 @@ New Keywords for 'width' and 'height'</h3>
this is true automatically.
For Block layout, this means using ''display: flow-root;''.

- <p class="issue">
- Right now all of these except ''width/fill'' mean the same thing
- for block-sizes. This may or may not be ideal.
-
- <p class='issue'>
- If the inline-size is ''width/auto'',
- we could have min-content block-size imply a max-content inline-size,
- and vice versa.
-
<p class='note'>
Note that percentages resolved against the intrinsic sizes
(''width/max-content'', ''width/min-content'', ''width/fit-content'')

0 comments on commit fddec46

Please sign in to comment.