Skip to content

Update refs to the box model #3090

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 21, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions css-backgrounds-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1804,7 +1804,7 @@ the 'color' property. The fact that the
<tr>
<th>Percentages:
<td>Refer to corresponding dimension of the
<a href="https://www.w3.org/TR/CSS2/box.html#box-dimensions">border box</a>.
<a>border box</a>.
<tr>
<th>Computed value:
<td>two absolute <<length>> or percentages
Expand Down Expand Up @@ -1832,7 +1832,7 @@ the 'color' property. The fact that the
<tr>
<th>Percentages:
<td>Refer to corresponding dimension of the
<a href="https://www.w3.org/TR/CSS2/box.html#box-dimensions">border box</a>.
<a>border box</a>.
<tr>
<th>Computed value:
<td>see individual properties
Expand Down
6 changes: 1 addition & 5 deletions css-break-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,7 @@ Fragmentation Model and Terminology</h2>
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
<a href="https://www.w3.org/TR/CSS2/box.html#box-padding-area">padding area</a>,
<a href="https://www.w3.org/TR/CSS2/box.html#box-border-area">border area</a>,
and
<a href="https://www.w3.org/TR/CSS2/box.html#box-margin-area">margin area</a>.
and therefore has its own <a>padding area</a>, <a>border area</a>, and <a>margin area</a>.
(See 'box-decoration-break', which controls how these are affected by fragmentation.)
<dt><dfn>remaining fragmentainer extent</dfn></dt>
<dd>
Expand Down
5 changes: 2 additions & 3 deletions css-exclusions-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ Terminology</h2>
<dd>
The area used for excluding inline flow content around an exclusion box. The
<span>exclusion area</span> is equivalent to the
<a href="https://www.w3.org/TR/CSS2/box.html#box-dimensions">border box</a>
<a>border box</a>
for an exclusion box.

<p class="note">
Expand All @@ -88,8 +88,7 @@ Terminology</h2>

<dt><dfn>Content area</dfn>
<dd>
The <a href="https://www.w3.org/TR/CSS2/box.html#box-dimensions">content area</a>
is normally used for layout of the inline flow content of a box.
The <a>content area</a> is normally used for layout of the inline flow content of a box.

<dt><dfn>Wrapping area</dfn>
<dd>
Expand Down
4 changes: 1 addition & 3 deletions css-page-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1035,9 +1035,7 @@ Page-Margin Box Layout Terminology</h4>
of the left and right page-margin boxes.

<dt><dfn>outer width</dfn>
<dd>The width of the
<a href="https://www.w3.org/TR/CSS21/box.html#outer-edge">outer edge</a>,
as defined in [[!CSS21]].
<dd>The width of the <a>outer edge</a>, as defined in [[!CSS-BOX-3]].

<dt><dfn>min-content width</dfn>
<dd>Whichever of <a spec=css-sizing>min-content block size</a>
Expand Down
2 changes: 1 addition & 1 deletion css-regions-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1269,7 +1269,7 @@ The Region interface</h3>
<dd>
The region's flow fragment content
fits into the region's
<a href="https://www.w3.org/TR/CSS21/box.html#box-dimensions">content box</a>.
<a>content box</a>.
If the region is the <a>last usable region</a>
in the <a>region chain</a>,
it means that the content
Expand Down
2 changes: 1 addition & 1 deletion css-shapes-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ Terminology</h3>
to determine where content flows.
By default,
the <a>float area</a> is the float element's
<a href="https://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>
<a>margin box</a>
(note this can be different than
the <a>float area</a> produced
by the ''margin-box'' value,
Expand Down
32 changes: 16 additions & 16 deletions css-shapes-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ Terminology</h2>
around an exclusion box.
The <span>exclusion area</span>
is equivalent to the
<a href="https://www.w3.org/TR/CSS2/box.html#box-dimensions">border box</a>
<a>border box</a>
for an exclusion box.
This specification's 'shape-outside' property
can be used to define arbitrary,
Expand All @@ -84,14 +84,14 @@ Terminology</h2>
By default,
the float area is
the float element's
<a href="https://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>.
<a>margin box</a>.
This specification's 'shape-outside' property
can be used to define arbitrary,
non-rectangular float areas.

<dfn>Content area</dfn>

The <a href="https://www.w3.org/TR/CSS2/box.html#box-dimensions">content area</a>
The <a>content area</a>
is normally used for layout of the inline flow content of a box.


Expand Down Expand Up @@ -143,14 +143,14 @@ Supported Shapes</h3>
or ''evenodd''.
Default value when omitted is ''nonzero''.</li>
<li>
The <string> represents an
<a href="https://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path data string</a>.
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 <string> represents an
<a href="https://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path data string</a>.
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.
</li>
</ul>
</dd>
Expand Down Expand Up @@ -339,8 +339,8 @@ The 'shape-inside' Property</h4>
<dl>
<dt><dfn for=shape-inside>''outside-shape''</dfn></dt>
<dd>
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.
</dd>
</dl>
Expand Down Expand Up @@ -391,8 +391,8 @@ The 'shape-inside' Property</h4>
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.</p>

<div class='figure'>
Expand All @@ -408,7 +408,7 @@ The 'shape-inside' Property</h4>
</p>
</div>

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
Expand Down
134 changes: 67 additions & 67 deletions css-ui-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -142,14 +142,14 @@ this specification links directly to these terms where relevant.

<h3 id="box-sizing" caniuse="css3-boxsizing">Changing the Box Model: the 'box-sizing' property</h3>

<pre class="propdef">
Name: box-sizing
<pre class="propdef">
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
</pre>

<dl dfn-type=value dfn-for=box-sizing>
Expand Down Expand Up @@ -292,55 +292,55 @@ The rendering of applying transforms to outlines is left explicitly undefined in

<h3 id="outline">Outlines Shorthand: the 'outline' property</h3>

<pre class="propdef">
Name: outline
<pre class="propdef">
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
</pre>

<h3 id="outline-width">Outline Thickness: the 'outline-width' property</h3>

<pre class="propdef">
Name: outline-width
<pre class="propdef">
Name: outline-width
Value: <<line-width>>
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: <a href="https://drafts.csswg.org/css3-transitions/#animtype-length">length</a>
</pre>

<h3 id="outline-style">Outline Patterns: the 'outline-style' property</h3>

<pre class="propdef">
Name: outline-style
Value: auto | <'border-style'>
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
<pre class="propdef">
Name: outline-style
Value: auto | <'border-style'>
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: as specified
</pre>

<h3 id="outline-color">Outline Colors: the 'outline-color' property</h3>

<pre class="propdef">
Name: outline-color
Value: <<color>> | invert
Initial: invert
Applies to: all elements
Inherited: no
Percentages: N/A
<pre class="propdef">
Name: outline-color
Value: <<color>> | 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 <<color>> values.
Animation Type: <a href="https://drafts.csswg.org/css3-transitions/#animtype-color">color</a>
Animation Type: <a href="https://drafts.csswg.org/css3-transitions/#animtype-color">color</a>
</pre>

The outline created with the outline properties is drawn "over" a box,
Expand Down Expand Up @@ -460,15 +460,15 @@ it may well overlap other elements on the page.
By default, the outline is drawn starting just outside the <a>border edge</a>.
However, it is possible to offset the outline and draw it beyond the <a>border edge</a>.

<pre class="propdef">
Name: outline-offset
Value: <<length>>
Initial: 0
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: <<length>> value in absolute units (px or physical).
Animation Type: <a href="https://drafts.csswg.org/css3-transitions/#animtype-length">length</a>
<pre class="propdef">
Name: outline-offset
Value: <<length>>
Initial: 0
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: <<length>> value in absolute units (px or physical).
Animation Type: <a href="https://drafts.csswg.org/css3-transitions/#animtype-length">length</a>
</pre>

If the computed value of 'outline-offset'
Expand Down Expand Up @@ -513,14 +513,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.

<pre class="propdef">
Name: resize
Value: none | both | horizontal | vertical
Initial: none
<pre class="propdef">
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
</pre>

Expand Down Expand Up @@ -918,8 +918,8 @@ While the content is being scrolled, implementations may adjust their rendering
<h3 id="pointer-interaction">Pointer interaction</h3>

<h4 id="cursor" caniuse="css3-cursors">Styling the Cursor: the 'cursor' property</h4>
<pre class="propdef">
Name: cursor
<pre class="propdef">
Name: cursor
Value: [ [<<url>> [&lt;x&gt; &lt;y&gt;]?,]* <br>
[ auto | default | none |<br>
context-menu | help | pointer | progress | wait | <br>
Expand All @@ -930,12 +930,12 @@ Value: [ [<<url>> [&lt;x&gt; &lt;y&gt;]?,]* <br>
col-resize | row-resize |
all-scroll |<br>
zoom-in | zoom-out <br>
] ]
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
</pre>

This property specifies the type of cursor to be displayed for the pointing device
Expand Down Expand Up @@ -1238,17 +1238,17 @@ boxes are generated for it and its cursor is used for the canvas.
<h3 id="insertion-caret">Insertion caret</h3>

<h4 id="caret-color" caniuse="css-caret-color">Coloring the Insertion Caret: the 'caret-color' property</h4>
<pre class="propdef">
Name: caret-color
Value: auto | <<color>>
Initial: auto
<pre class="propdef">
Name: caret-color
Value: auto | <<color>>
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 <<color>> values.
Animation Type: <a href="https://drafts.csswg.org/css3-transitions/#animtype-color">color</a>
Animation Type: <a href="https://drafts.csswg.org/css3-transitions/#animtype-color">color</a>
</pre>

<dl>
Expand Down
12 changes: 0 additions & 12 deletions css-ui-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,6 @@ Coding style convention in this file:
* Indent the content of <div class=note> and <div class=example>
-->

<pre class="anchors">
spec: css2; urlPrefix: https://drafts.csswg.org/css2/
urlPrefix: box.html
type: dfn;
text: content edge;
text: padding edge;
</pre>

<pre class='metadata'>
Title: CSS Basic User Interface Module Level 4
ED: https://drafts.csswg.org/css-ui-4/
Expand Down Expand Up @@ -93,10 +85,6 @@ spec:css-backgrounds-3; type:property; text:background-image
spec:css-backgrounds-3; type:property; text:border-width
</pre>

<pre class="anchors">
url: https://www.w3.org/TR/CSS21/box.html#border-edge; type: dfn; spec: CSS21; text: border edge
</pre>

<style>
.awesome-table td {padding:5px}
.awesome-table {color:#000;background:#fff;margin: auto;}
Expand Down