From f485e5f27b2b4c9b1021914d05717fe7ac9486cb Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Wed, 6 Jun 2018 10:47:10 +0900 Subject: [PATCH 1/5] [css-sizing-3] Add more guidance on usage of ambiguous sizing terms --- css-sizing-3/Overview.bs | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/css-sizing-3/Overview.bs b/css-sizing-3/Overview.bs index 4ffa28be7e8..df6ab959d59 100644 --- a/css-sizing-3/Overview.bs +++ b/css-sizing-3/Overview.bs @@ -625,17 +625,30 @@ Box Edges for Sizing: the 'box-sizing' property default to ''border-box'' behavior. See HTML for details on which elements have this behavior. - In the CSS specifications, + In legacy CSS specifications, the terms width, height, minimum (min) width, minimum (min) height, maximum (max) width, and maximum (max) height - refer to the inner size + generally refer to the inner size (content-box size) of a box unless otherwise indicated. + Note: [[CSS-UI-3#box-sizing]] provides an explicit disambiguation of these terms + for the Visual formatting model details section of [[CSS2]]. + +
To avoid ambiguities, + specification authors should avoid ambiguous terms such as width or height without further qualification, + and should explicitely refer and link to + the inner size, + the outer size, + the size of the border-box, + the computed value of the sizing properties, + etc, + as appropriate for each case. +
-

+

Box Edges for Sizing: the 'box-sizing' property

From c5c14122aeda1514b29951718d0bc0b9d7affe8c Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Wed, 6 Jun 2018 11:10:10 +0900 Subject: [PATCH 4/5] [css-sizing-3][css-ui-4] Drop box-sizing from css-ui in favor of css-sizing Closes #2458 --- css-sizing-3/Overview.bs | 2 + css-ui-4/Overview.bs | 188 +-------------------------------------- 2 files changed, 5 insertions(+), 185 deletions(-) diff --git a/css-sizing-3/Overview.bs b/css-sizing-3/Overview.bs index aec21e25fd5..bc4e96115d2 100644 --- a/css-sizing-3/Overview.bs +++ b/css-sizing-3/Overview.bs @@ -53,6 +53,8 @@ Module interactions

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

The definition of the 'box-sizing' property in module supersedes the one in [[CSS-UI-3]]. +

Values

diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs index f2320bc3bf4..2ebf929af74 100644 --- a/css-ui-4/Overview.bs +++ b/css-ui-4/Overview.bs @@ -140,196 +140,14 @@ which itself replaced and superseded the following: User Interface for CSS3 (16 February 2000) [[CSS-UI-3]] +One feature previously defined in [[CSS-UI-3]] has been moved to [[CSS-SIZING-3]] rather than this specification.

Box Model addition

Changing the Box Model: the 'box-sizing' property

-
-Name: box-sizing
-Value: content-box | border-box
-Initial: content-box
-Applies to: all elements that accept width or height
-Inherited: no
-Percentages: N/A
-Media: visual
-Computed value: specified value
-
- -
-
content-box -
- 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. - -
border-box -
- 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 - by subtracting the border and padding widths of the respective sides - from the specified 'width' - and 'height' properties. - As the content width and height - cannot be negative ([[!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. -
- -Note: In contrast to the length and percentage values, -the ''width/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: - - - - - - - -
- ''box-sizing: content-box'' - ''box-sizing: border-box'' - -
min inner width - 'min-width' - max(0, 'min-width' − 'padding-left' − 'padding-right' − 'border-left-width' − 'border-right-width') - -
max inner width - 'max-width' - max(0, 'max-width' − 'padding-left' − 'padding-right' − 'border-left-width' − 'border-right-width') - -
min inner height - 'min-height' - max(0, 'min-height' − 'padding-top' − 'padding-bottom' − 'border-top-width' − 'border-bottom-width') - -
max inner height - 'max-height' - max(0, 'max-height' − 'padding-top' − 'padding-bottom' − 'border-top-width' − 'border-bottom-width') -
- -The Visual formatting model details of [[!CSS21]] are written assuming ''box-sizing: content-box''. The following disambiguations are made to clarify the behavior for all values of 'box-sizing': - -
    -
  1. - In 10.3.3, - the second width in the following phrase is to be interpreted as content width: - If 'width' is not ''width/auto'' and 'border-left-width' + 'padding-left' + 'width' + [...] - -
  2. - In 10.3.7, - width is to be interpreted as content width in the following equation: - 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + [...] - -
  3. - In 10.4, - width, height, min-width, max-width, min-height and max-height - are respectively to be interpreted as - content width, content height, min inner width, max inner width, min inner height and max inner height in the following phrases: - -
      -
    1. - The tentative used width is calculated [...] - -
    2. - 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'. - -
    3. - 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'. - -
    4. - 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 [...] - -
    5. - All instances of these words in the table - -
    6. - Then apply the rules under "Calculating widths and margins" above, as if 'width' were computed as this value. -
    - -
  4. - In 10.6.4, - height is to be interpreted as content height in the following equation: - 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + [...] - -
  5. - In 10.7, - width, height, min-height and max-height - are respectively to be interpreted as - content width, content height, min inner height and max inner height in the following phrases: - -
      -
    1. - The tentative used height is calculated [...] - -
    2. - 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'. - -
    3. - 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'. - -
    4. - [...] 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. -
    -
- -
-

Using box-sizing to evenly share space

- - This example uses box-sizing to evenly horizontally split - two divs with fixed size borders inside a div container, - which would otherwise require additional markup. - - sample CSS: - 

-	div.container {
-		width:38em;
-		border:1em solid black;
-	}
-
-	div.split {
-		box-sizing:border-box;
-		width:50%;
-		border:1em silver ridge;
-		float:left;
-	}
-
- - sample HTML fragment: - 

-	<div class="container">
-	<div class="split">This div occupies the left half.</div>
-	<div class="split">This div occupies the right half.</div>
-	</div>
-
- - demonstration of sample CSS and HTML: -
This div should occupy the left half.
This div should occupy the right half.
The two divs above should appear side by side, each (including borders) 50% of the content width of their container. If instead they are stacked one on top of the other then your browser does not support 'box-sizing'.
-
- +The 'box-sizing' property was previously defined in this section of the specification, +but has been moved to the [[CSS-SIZING-3#box-sizing]].

Outline properties

From 1cc1811a850a7c2d1c3d9b896c0644b186214369 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Fri, 8 Jun 2018 12:03:07 +0900 Subject: [PATCH 5/5] [css-ui-4][css-sizing-3] Phrasing improvements --- css-sizing-3/Overview.bs | 4 ++-- css-ui-4/Overview.bs | 20 +++++++++++++------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/css-sizing-3/Overview.bs b/css-sizing-3/Overview.bs index bc4e96115d2..e8583d2fad3 100644 --- a/css-sizing-3/Overview.bs +++ b/css-sizing-3/Overview.bs @@ -670,11 +670,11 @@ Box Edges for Sizing: the 'box-sizing' property of a box unless otherwise indicated. - Note: [[CSS-UI-3#box-sizing]] provides an explicit disambiguation of these terms + Refer to [[CSS-UI-3#box-sizing]] for an explicit disambiguation of these terms for the Visual formatting model details section of [[CSS2]].
To avoid ambiguities, - specification authors should avoid ambiguous terms such as width or height without further qualification, + specification authors should avoid ambiguous uses of terms such as width or height without further qualification, and should explicitely refer and link to the inner size, the outer size, diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs index 2ebf929af74..f349ff70ac1 100644 --- a/css-ui-4/Overview.bs +++ b/css-ui-4/Overview.bs @@ -140,14 +140,20 @@ which itself replaced and superseded the following: User Interface for CSS3 (16 February 2000) [[CSS-UI-3]] -One feature previously defined in [[CSS-UI-3]] has been moved to [[CSS-SIZING-3]] rather than this specification. - -

Box Model addition

- -

Changing the Box Model: the 'box-sizing' property

- +Note: + + + + + + + + + + + The 'box-sizing' property was previously defined in this section of the specification, -but has been moved to the [[CSS-SIZING-3#box-sizing]]. +but has been moved to [[CSS-SIZING-3#box-sizing]].

Outline properties