Merge pull request #16 from frivoal/florian/box-sizing

Florian/box sizing

Author: tantek

css-ui/Overview.bs

@@ -22,6 +22,10 @@ Abstract: This specification describes user interface related selectors,
 Deadline: 2012-02-14
 Link Defaults: css-color-3 (property) color
 Link Defaults: selectors-4 (selector) :indeterminate
+Link Defaults: css21 (property) min-width
+Link Defaults: css21 (property) min-height
+Link Defaults: css21 (property) max-width
+Link Defaults: css21 (property) max-height
 Ignored Terms: outline-top
 Ignored Terms: outline-left
 Ignored Terms: nav-index
@@ -125,16 +129,16 @@ border-box
 <tr><th>Animatable:</th><td>no</td></tr>
 </tbody></table>
 
-<dl>
-<dt>content-box</dt>
+<dl dfn-type=value dfn-for=box-sizing>
+<dt><dfn>content-box</dfn></dt>
 <dd>This is the behavior of width and height as specified by CSS2.1.
 The specified width and height (and respective min/max properties)
 apply to the width and height respectively of the content box of the element.
 The padding and border of the element are laid out
 and drawn outside the specified width and height.</dd>
-<dt>padding-box</dt>
+<dt><dfn>padding-box</dfn></dt>
 <dd>
-The specified width and height (and respective min/max properties)
+Length and percentages values for width and height (and respective min/max properties)
 on this element determine the padding box of the element.
 That is, any padding specified on the element is laid out
 and drawn inside this specified width and height.
@@ -146,10 +150,11 @@ As the content width and height
 <a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">
 cannot be negative</a> ([[!CSS21]], section 10.2),
 this computation is floored at 0.
+Used values, as exposed for instance through {{getComputedStyle()}}, also refer to the padding box.
 </dd>
 <dt>border-box</dt>
-<dd>The specified width and height (and respective min/max properties) on this element
-determine the border box of the element.
+<dd>Length and percentages values for width and height (and respective min/max properties)
+on this element determine the border box of the element.
 That is, any padding or border specified on the element
 is laid out and drawn inside this specified width and height.
 The content width and height are calculated
@@ -159,12 +164,57 @@ and 'height' properties.
 As the content width and height
 <a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">cannot be negative</a> ([[!CSS21]], section 10.2),
 this computation is floored at 0.
+Used values, as exposed for instance through {{getComputedStyle()}}, also refer to the border box.
 
 Note: This is the behavior of width and height as commonly implemented
 by legacy HTML user agents for replaced elements and input elements.
 </dd>
 </dl>
 
+Note: In contrast to the length and percentage values,
+the ''auto'' value of the 'width' and 'height' properties
+(as well as other keyword values introduced by later specifications,
+unless otherwise specified)
+is not influenced by the 'box-sizing' property,
+and always sets the size of the content box.
+
+The following terms, whose definitions vary based on the computed value of 'box-sizing' are introduced:
+
+<table border="1">
+<tr><th><th>''box-sizing: content-box''<th>''box-sizing: padding-box''<th>''box-sizing: border-box''
+<tr><td><dfn>min inner width</dfn><td>'min-width'<td>max(0, 'min-width' &minus; 'padding-left' &minus; 'padding-right')<td>max(0, 'min-width' &minus; 'padding-left' &minus; 'padding-right' &minus; 'border-left-width' &minus; 'border-right-width')
+<tr><td><dfn>max inner width</dfn><td>'max-width'<td>max(0, 'max-width' &minus; 'padding-left' &minus; 'padding-right')<td>max(0, 'max-width' &minus; 'padding-left' &minus; 'padding-right' &minus; 'border-left-width' &minus; 'border-right-width')
+<tr><td><dfn>min inner height</dfn><td>'min-height'<td>max(0, 'min-height' &minus; 'padding-top' &minus; 'padding-bottom')<td>max(0, 'min-height' &minus; 'padding-top' &minus; 'padding-bottom' &minus; 'border-top-width' &minus; 'border-bottom-width')
+<tr><td><dfn>max inner height</dfn><td>'max-height'<td>max(0, 'max-height' &minus; 'padding-top' &minus; 'padding-bottom')<td>max(0, 'max-height' &minus; 'padding-top' &minus; 'padding-bottom' &minus; 'border-top-width' &minus; 'border-bottom-width')
+</table>
+
+The <a href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> of [[!CSS21]] are written assuming ''box-sizing: content-box''. The following disambiguations are made to clarify the behavior for all values of 'box-sizing':
+
+<ol>
+<li>In <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>, the second <q>width</q> in the following phrase is to be interpreted as <a spec="css21">content width</a>: <q>If 'width' is not ''auto'' and 'border-left-width' + 'padding-left' + 'width' + [...]</q>
+
+<li>In <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">10.3.7</a>, <q>width</q> is to be interpreted as <a spec="css21">content width</a> in the following equation: <q>'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + [...]</q>
+
+<li>In <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">10.4</a>, <q>width</q>, <q>height</q>, <q>min-width</q>, <q>max-width</q>, <q>min-height</q> and <q>max-height</q> are respectively to be interpreted as <a spec="css21">content width</a>, <a spec="css21">content height</a>, <a>min inner width</a>, <a>max inner width</a>, <a>min inner height</a> and <a>max inner height</a> in the following phrases:
+  <ol>
+  <li><q>The tentative used width is calculated [...]</q>
+  <li><q>If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.</q>
+  <li><q>If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.</q>
+  <li><q>Select from the table the resolved height and width values for the appropriate constraint violation. Take the max-width and max-height as max(min, max) so that min ≤ max holds true. In this table w and h stand for the results of the width and height computations [...]</q>
+  <li>All instances of these words in the table
+  <li><q>Then apply the rules under "Calculating widths and margins" above, as if 'width' were computed as this value.</q>
+  </ol>
+
+<li>In <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">10.6.4</a>, <q>height</q> is to be interpreted as <a spec="css21">content height</a> in the following equation: <q>'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + [...]</q>
+
+<li>In <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">10.7</a>, <q>width</q>, <q>height</q>, <q>min-height</q> and <q>max-height</q> are respectively to be interpreted as <a spec="css21">content width</a>, <a spec="css21">content height</a>, <a>min inner height</a> and <a>max inner height</a> in the following phrases:
+  <ol>
+  <li><q>The tentative used height is calculated [...]</q>
+  <li><q>If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.</q>
+  <li><q>If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.</q>
+  <li><q>[...] use the algorithm under Minimum and maximum widths above to find the used width and height. Then apply the rules under "Computing heights and margins" above, using the resulting width and height as if they were the computed values.</q>
+  </ol>
+</ol>
 
 <div class="example"><p style="display:none">Example(s):
 <h4 id="box-sizing-example" class="no-num no-toc">Using box-sizing to evenly share space</h4>
@@ -201,7 +251,7 @@ demonstration of sample CSS and HTML:
 </div>
 </div>
 
-Note: The ''padding-box'' value is at risk.
+Note: The ''box-sizing/padding-box'' value is at risk.
 
 Issue: <a href="https://wiki.csswg.org/spec/css3-ui#issue-69">69</a> box-sizing insufficiently specified for replaced elements.