From c49572b89513e3c6870ca75caa2729957b66a82b Mon Sep 17 00:00:00 2001 From: Fuqiao Xue Date: Mon, 10 Sep 2018 17:25:15 +0800 Subject: [PATCH 1/2] Update refs to the box model Follow-up of #3078. --- css-backgrounds-3/Overview.bs | 4 +- css-break-3/Overview.bs | 6 +- css-contain-1/Overview.bs | 1 - css-exclusions-1/Overview.bs | 5 +- css-page-3/Overview.bs | 4 +- css-regions-1/Overview.bs | 2 +- css-shapes-1/Overview.bs | 2 +- css-shapes-2/Overview.bs | 32 ++++---- css-ui-3/Overview.bs | 135 +++++++++++++++++----------------- css-ui-4/Overview.bs | 12 --- 10 files changed, 91 insertions(+), 112 deletions(-) diff --git a/css-backgrounds-3/Overview.bs b/css-backgrounds-3/Overview.bs index 49d6a823a0c..92f9494ebde 100644 --- a/css-backgrounds-3/Overview.bs +++ b/css-backgrounds-3/Overview.bs @@ -1804,7 +1804,7 @@ the 'color' property. The fact that the Percentages: Refer to corresponding dimension of the - border box. + border box. Computed value: two absolute <> or percentages @@ -1832,7 +1832,7 @@ the 'color' property. The fact that the Percentages: Refer to corresponding dimension of the - border box. + border box. Computed value: see individual properties diff --git a/css-break-3/Overview.bs b/css-break-3/Overview.bs index a58da8e00fa..a74afd8e7c1 100644 --- a/css-break-3/Overview.bs +++ b/css-break-3/Overview.bs @@ -114,11 +114,7 @@ Fragmentation Model and Terminology A box in continuous flow always consists of only one fragment. A box in a fragmented flow consists of one or more fragments. Each fragment has its own share of the box’s border, padding, and margin, - and therefore has its own - padding area, - border area, - and - margin area. + and therefore has its own padding area, border area, and margin area. (See 'box-decoration-break', which controls how these are affected by fragmentation.)
remaining fragmentainer extent
diff --git a/css-contain-1/Overview.bs b/css-contain-1/Overview.bs index eb502c19cd5..75ff38a74b6 100644 --- a/css-contain-1/Overview.bs +++ b/css-contain-1/Overview.bs @@ -23,7 +23,6 @@ spec: css2; urlPrefix: https://www.w3.org/TR/CSS2/ type: value; for: content; url: generate.html#value-def-close-quote; text: close-quote type: value; for: content; url: generate.html#value-def-no-open-quote; text: no-open-quote type: value; for: content; url: generate.html#value-def-no-close-quote; text: no-close-quote - type: dfn; url: box.html#padding-edge; text: padding edge spec: css-backgrounds-3; type: dfn; url: https://drafts.csswg.org/css-backgrounds-3/#corner-clipping; text: corner clipping diff --git a/css-exclusions-1/Overview.bs b/css-exclusions-1/Overview.bs index 5bbf9ff827d..3288dc8439e 100644 --- a/css-exclusions-1/Overview.bs +++ b/css-exclusions-1/Overview.bs @@ -62,7 +62,7 @@ Terminology
The area used for excluding inline flow content around an exclusion box. The exclusion area is equivalent to the - border box + border box for an exclusion box.

@@ -88,8 +88,7 @@ Terminology

Content area
- The content area - is normally used for layout of the inline flow content of a box. + The content area is normally used for layout of the inline flow content of a box.
Wrapping area
diff --git a/css-page-3/Overview.bs b/css-page-3/Overview.bs index 5f1fd442152..32e279852e4 100644 --- a/css-page-3/Overview.bs +++ b/css-page-3/Overview.bs @@ -1035,9 +1035,7 @@ Page-Margin Box Layout Terminology of the left and right page-margin boxes.
outer width -
The width of the - outer edge, - as defined in [[!CSS21]]. +
The width of the outer edge, as defined in [[!CSS-BOX-3]].
min-content width
Whichever of min-content block size diff --git a/css-regions-1/Overview.bs b/css-regions-1/Overview.bs index ce80af22c03..19cc1bc1190 100644 --- a/css-regions-1/Overview.bs +++ b/css-regions-1/Overview.bs @@ -1269,7 +1269,7 @@ The Region interface
The region's flow fragment content fits into the region's - content box. + content box. If the region is the last usable region in the region chain, it means that the content diff --git a/css-shapes-1/Overview.bs b/css-shapes-1/Overview.bs index 29481bb7553..6b382e1b250 100644 --- a/css-shapes-1/Overview.bs +++ b/css-shapes-1/Overview.bs @@ -114,7 +114,7 @@ Terminology to determine where content flows. By default, the float area is the float element's - margin box + margin box (note this can be different than the float area produced by the ''margin-box'' value, diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs index e49467a4193..87cdb7e967f 100644 --- a/css-shapes-2/Overview.bs +++ b/css-shapes-2/Overview.bs @@ -66,7 +66,7 @@ Terminology around an exclusion box. The exclusion area is equivalent to the - border box + border box for an exclusion box. This specification's 'shape-outside' property can be used to define arbitrary, @@ -84,14 +84,14 @@ Terminology By default, the float area is the float element's - margin box. + margin box. This specification's 'shape-outside' property can be used to define arbitrary, non-rectangular float areas. Content area - The content area + The content area is normally used for layout of the inline flow content of a box. @@ -143,14 +143,14 @@ Supported Shapes or ''evenodd''. Default value when omitted is ''nonzero''.
  • - The represents an - SVG Path data string. - The path data string must be conform - to the grammar and parsing rules of SVG 1.1. - The initial position is defined - by the first “move to” argument - in the path string. - For the initial direction follow SVG 1.1. + The represents an + SVG Path data string. + The path data string must be conform + to the grammar and parsing rules of SVG 1.1. + The initial position is defined + by the first “move to” argument + in the path string. + For the initial direction follow SVG 1.1.
    • @@ -339,8 +339,8 @@ The 'shape-inside' Property
    ''outside-shape''
    - The shape is computed based on - the shape defined by the shape-outside + The shape is computed based on + the shape defined by the shape-outside and shape-margin properties.
    @@ -391,8 +391,8 @@ The 'shape-inside' Property by 'shape-inside' and 'shape-padding' (as well as any other exclusion areas in the element's wrapping context). - In other words, - overflow continues outside + In other words, + overflow continues outside the rectangular bounds of the element.

    @@ -408,7 +408,7 @@ The 'shape-inside' Property

    - Issue: improve the illustration above, + Issue: improve the illustration above, using text to show overflow instead of greeked boxes. When a shape-inside has a definite size diff --git a/css-ui-3/Overview.bs b/css-ui-3/Overview.bs index 36ef50fea1f..25a4e7a5c10 100644 --- a/css-ui-3/Overview.bs +++ b/css-ui-3/Overview.bs @@ -81,7 +81,6 @@ spec:css2; type:property; text:background-image 
    -url: https://www.w3.org/TR/CSS2/box.html#border-edge; type: dfn; spec: CSS2; text: border edge
 url: https://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
     type: property; spec: CSS2; text: overflow
     type: value; spec: CSS2; text: visible; for: overflow
@@ -142,14 +141,14 @@ this specification links directly to these terms where relevant.
 
 
    Changing the Box Model: the 'box-sizing' property
    
 
-
     
-Name: box-sizing 
+
    +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 
-Computed value: specified value 
+Initial: content-box
+Applies to: all elements that accept width or height
+Inherited: no
+Percentages: N/A
+Computed value: specified value
 
    
 
 
    
@@ -292,55 +291,55 @@ The rendering of applying transforms to outlines is left explicitly undefined in
 
 
    Outlines Shorthand: the 'outline' property
    
 
-
     
-Name: outline 
+
    +Name: outline
 Value: [ <<'outline-color'>> || <<'outline-style'>> || <<'outline-width'>> ]
-Initial: see individual properties 
-Applies to: all elements 
-Inherited: no 
-Percentages: N/A 
-Computed value: see individual properties 
-Animation type: see individual properties 
+Initial: see individual properties
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: see individual properties
+Animation type: see individual properties
 
    
 
 
    Outline Thickness: the 'outline-width' property
    
 
-
     
-Name: outline-width 
+
    +Name: outline-width
 Value: <>
-Initial: medium 
-Applies to: all elements 
-Inherited: no 
-Percentages: N/A 
+Initial: medium
+Applies to: all elements
+Inherited: no
+Percentages: N/A
 Computed value: absolute length; ''0'' if the outline style is ''border-style/none''.
 Animation type: length
 
    
 
 
    Outline Patterns: the 'outline-style' property
    
 
-
     
-Name: outline-style 
-Value: auto | <'border-style'> 
-Initial: none 
-Applies to: all elements 
-Inherited: no 
-Percentages: N/A 
+
    +Name: outline-style
+Value: auto | <'border-style'>
+Initial: none
+Applies to: all elements
+Inherited: no
+Percentages: N/A
 Computed value: as specified
 
    
 
 
    Outline Colors: the 'outline-color' property
    
 
-
     
-Name: outline-color 
-Value: <> | invert 
-Initial: invert 
-Applies to: all elements 
-Inherited: no 
-Percentages: N/A 
+
    +Name: outline-color
+Value: <> | invert
+Initial: invert
+Applies to: all elements
+Inherited: no
+Percentages: N/A
 Computed value: The computed value for ''outline-color/invert'' is ''outline-color/invert'';
 	the computed value of ''outline-color/currentColor'' is ''outline-color/currentColor'' (See [[CSS-COLOR-3/#currentColor]]);
 	see the 'color' property for other <> values.
-Animation Type: color 
+Animation Type: color
 
    
 
 The outline created with the outline properties is drawn "over" a box,
@@ -460,15 +459,15 @@ it may well overlap other elements on the page.
 By default, the outline is drawn starting just outside the border edge.
 However, it is possible to offset the outline and draw it beyond the border edge.
 
-
     
-Name: outline-offset 
-Value: <> 
-Initial: 0 
-Applies to: all elements 
-Inherited: no 
-Percentages: N/A 
-Computed value: <> value in absolute units (px or physical). 
-Animation Type: length 
+
    +Name: outline-offset
+Value: <>
+Initial: 0
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: <> value in absolute units (px or physical).
+Animation Type: length
 
    
 
 If the computed value of 'outline-offset'
@@ -513,14 +512,14 @@ The 'resize' property allows the author
 to specify whether or not an element is resizable by the user,
 and if so, along which axis/axes.
 
-
     
-Name: resize 
-Value: none | both | horizontal | vertical 
-Initial: none 
+
    +Name: resize
+Value: none | both | horizontal | vertical
+Initial: none
 Applies to: elements with 'overflow' other than visible,
- and optionally replaced elements such as images, videos, and iframes 
-Inherited: no 
-Percentages: N/A 
+ and optionally replaced elements such as images, videos, and iframes
+Inherited: no
+Percentages: N/A
 Computed value: as specified
 
    
 
@@ -918,8 +917,8 @@ While the content is being scrolled, implementations may adjust their rendering
 
    Pointer interaction
    
 
 
    Styling the Cursor: the 'cursor' property
    
-
     
-Name: cursor 
+
    +Name: cursor
 Value: [ [<> [<x> <y>]?,]* 
    
  [ auto | default | none |
    
  context-menu | help | pointer | progress | wait | 
    
@@ -930,12 +929,12 @@ Value: [ [<> [<x> <y>]?,]* 
    
  col-resize | row-resize |
  all-scroll |
    
  zoom-in | zoom-out 
    
- ] ] 
-Initial: auto 
-Applies to: all elements 
-Inherited: yes 
-Percentages: N/A 
-Computed value: as specified, except with any relative URLs converted to absolute 
+ ] ]
+Initial: auto
+Applies to: all elements
+Inherited: yes
+Percentages: N/A
+Computed value: as specified, except with any relative URLs converted to absolute
 
    
 
 This property specifies the type of cursor to be displayed for the pointing device
@@ -1238,17 +1237,17 @@ boxes are generated for it and its cursor is used for the canvas.
 
    Insertion caret
    
 
 
    Coloring the Insertion Caret: the 'caret-color' property
    
-
     
-Name: caret-color 
-Value: auto | <> 
-Initial: auto 
+
    +Name: caret-color
+Value: auto | <>
+Initial: auto
 Applies to: all elements
-Inherited: yes 
-Percentages: N/A 
+Inherited: yes
+Percentages: N/A
 Computed value: The computed value for ''caret-color/auto'' is ''caret-color/auto'';
 	the computed value of ''caret-color/currentColor'' is ''cart-color/currentColor'' (See [[CSS-COLOR-3/#currentColor]]);
 	see the 'color' property for other <> values.
-Animation Type: color 
+Animation Type: color
 
    
 
 
    
diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index 6f9e600e9d3..bcb6871ab89 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -14,14 +14,6 @@ Coding style convention in this file:
 * Indent the content of 
     and 
    
 -->
 
-
    -spec: css2; urlPrefix: https://drafts.csswg.org/css2/
-    urlPrefix: box.html
-        type: dfn;
-            text: content edge;
-            text: padding edge;
-
    
-
 
     Title: CSS Basic User Interface Module Level 4
 ED: https://drafts.csswg.org/css-ui-4/
@@ -93,10 +85,6 @@ spec:css-backgrounds-3; type:property; text:background-image
 spec:css-backgrounds-3; type:property; text:border-width
 
    
 
-
    -url: https://www.w3.org/TR/CSS21/box.html#border-edge; type: dfn; spec: CSS21; text: border edge
-
    
-
 
 .awesome-table td {padding:5px}
 .awesome-table {color:#000;background:#fff;margin: auto;}

From d5e65f474a6564158bf80ce4505364f3fd4283e8 Mon Sep 17 00:00:00 2001
From: Fuqiao Xue 
Date: Thu, 13 Sep 2018 15:08:57 +0800
Subject: [PATCH 2/2] Revert changes to css-contain-1 and css-ui-3

---
 css-contain-1/Overview.bs | 1 +
 css-ui-3/Overview.bs      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/css-contain-1/Overview.bs b/css-contain-1/Overview.bs
index 75ff38a74b6..eb502c19cd5 100644
--- a/css-contain-1/Overview.bs
+++ b/css-contain-1/Overview.bs
@@ -23,6 +23,7 @@ spec: css2; urlPrefix: https://www.w3.org/TR/CSS2/
 	type: value; for: content; url: generate.html#value-def-close-quote; text: close-quote
 	type: value; for: content; url: generate.html#value-def-no-open-quote; text: no-open-quote
 	type: value; for: content; url: generate.html#value-def-no-close-quote; text: no-close-quote
+	type: dfn; url: box.html#padding-edge; text: padding edge
 
 spec: css-backgrounds-3;
 	type: dfn; url: https://drafts.csswg.org/css-backgrounds-3/#corner-clipping; text: corner clipping
diff --git a/css-ui-3/Overview.bs b/css-ui-3/Overview.bs
index 25a4e7a5c10..2ffa21fafa2 100644
--- a/css-ui-3/Overview.bs
+++ b/css-ui-3/Overview.bs
@@ -81,6 +81,7 @@ spec:css2; type:property; text:background-image
 
 
    +url: https://www.w3.org/TR/CSS2/box.html#border-edge; type: dfn; spec: CSS2; text: border edge
 url: https://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
     type: property; spec: CSS2; text: overflow
     type: value; spec: CSS2; text: visible; for: overflow