Skip to content

Commit abd0a2d

Browse files
fantasaifantasai
committed
[css-box-3] Publication fixes.
1 parent 5f63bd7 commit abd0a2d

2 files changed

Lines changed: 2422 additions & 1765 deletions

File tree

‎css-box-3/Overview.bs‎

Lines changed: 61 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,21 @@
1-
<!doctype html public "-//W3C//DTD Bikeshed 2016-09//EN">
2-
<meta content="text/html; charset=utf-8" http-equiv=content-type>
3-
<title>CSS basic box model</title>
4-
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
5-
<link href="../default.css" rel="stylesheet" type="text/css">
6-
<style type="text/css">
7-
ol.stack p {margin-top: 0}
8-
img.small {max-width: 100%}
9-
.minidiagram {height: 6em; vertical-align: middle}
10-
dt {display: inline}
11-
dt + dt::before {content: ", "}
12-
/* Undo the max-width in the 2012 style for editor's drafts: */
13-
14-
/* maybe replace this with using default.css's class=data? */
15-
.equiv-table {margin: 0.5em 0; border-collapse: collapse;
16-
border-bottom: hidden; empty-cells: show}
17-
.equiv-table th, .equiv-table td {padding: 0.3em 1em;
18-
border-bottom: thin solid #666}
19-
.equiv-table th {text-align: left}
20-
/* .equiv-table th:first-child {text-align: right} */
21-
.equiv-table caption {margin: 0.5em 0 0 0}
22-
.equiv-table td > p:first-child, .equiv-table th > p:first-child {
23-
margin-top: 0}
24-
.equiv-table tr {vertical-align: baseline}
25-
.equiv-table img {max-width: 100%}
26-
27-
/* The TR postprocessor already inserted quotes: */
28-
.css::before, .property::before, .descriptor::before {content: none}
29-
.css::after, .property::after, .descriptor::after {content: none}
30-
31-
@media screen {
32-
#annoying-warning:not(:checked) + * + * {position: fixed; z-index: 2;
33-
bottom: 2em; left: 0; right: 0; text-align: center;
34-
padding: 0.5em 0.5em 1em 0.5em; box-shadow: 0 2px 8px black;
35-
border-top: thin solid; border-bottom: thin solid;
36-
background: hsla(40,100%,50%,0.9); color: black}
37-
#annoying-warning:not(:checked) + * + * p {margin: 0}
38-
#annoying-warning, #annoying-warning + * {position: fixed; z-index: 3}
39-
#annoying-warning {font-size: 1em; bottom: 2.3em; right: 0.5em; margin: 0}
40-
#annoying-warning + * {font-size: 80%; bottom: 2.5em; right: 2.3em}
41-
#annoying-warning:checked, #annoying-warning:checked + * {display: none}
42-
html {margin-bottom: 15em}
43-
}
44-
</style>
45-
<link href="https://www.w3.org/StyleSheets/TR/W3C-ED.css" rel="stylesheet"
46-
title="Default" type="text/css">
47-
<link rel=contents href="#contents">
48-
<link rel=index href="#index">
49-
501
<!-- TODO: cross-references aren't automatically generated by
512
Bikeshed. Is there a better way than to add <a> around every
523
<span> and <em>? -->
534
545
<!-- TODO: bibliography still doesn't show the dated specs. -->
556
567
<pre class=metadata>
57-
Title: CSS basic box model
58-
Shortname: css-box
59-
Level: 3
8+
Title: CSS Basic Box Model Level 3
9+
Shortname: css3-box
10+
Level: none
6011
Status: ED
6112
Work Status: rewriting
62-
Previous version: http://www.w3.org/TR/2007/WD-css3-box-20070809/
63-
TR: https://www.w3.org/TR/css-box-3/
64-
ED: http://dev.w3.org/csswg/css-box/
13+
Previous version: https://www.w3.org/TR/2018/WD-css3-box-20180731/
14+
TR: https://www.w3.org/TR/css3-box/
15+
ED: https://drafts.csswg.org/css-box-3/
6516
Group: csswg
6617
Editor: Bert Bos, W3C, mailto:bert@w3.org, w3cid 3343
6718
Editor: Anton Prowse, Invited Expert, mailto:prowse@moonhenge.net, w3cid 48426
68-
Default Biblio Status: dated
6919
Markup Shorthands: markdown no, markup yes
7020
Abstract:
7121
<![CDATA[<p><abbr title="Cascading Style Sheets">CSS</abbr> describes the
@@ -109,6 +59,46 @@ spec:css-display-3; type:value; for:display; text:list-item
10959
spec:css-display-3; type:value; for:display; text:table
11060
</pre>
11161
62+
<style>
63+
ol.stack p {margin-top: 0}
64+
img.small {max-width: 100%}
65+
.minidiagram {height: 6em; vertical-align: middle}
66+
dt {display: inline}
67+
dt + dt::before {content: ", "}
68+
/* Undo the max-width in the 2012 style for editor's drafts: */
69+
70+
/* maybe replace this with using default.css's class=data? */
71+
.equiv-table {margin: 0.5em 0; border-collapse: collapse;
72+
border-bottom: hidden; empty-cells: show}
73+
.equiv-table th, .equiv-table td {padding: 0.3em 1em;
74+
border-bottom: thin solid #666}
75+
.equiv-table th {text-align: left}
76+
/* .equiv-table th:first-child {text-align: right} */
77+
.equiv-table caption {margin: 0.5em 0 0 0}
78+
.equiv-table td > p:first-child, .equiv-table th > p:first-child {
79+
margin-top: 0}
80+
.equiv-table tr {vertical-align: baseline}
81+
.equiv-table img {max-width: 100%}
82+
83+
/* The TR postprocessor already inserted quotes: */
84+
.css::before, .property::before, .descriptor::before {content: none}
85+
.css::after, .property::after, .descriptor::after {content: none}
86+
87+
@media screen {
88+
#annoying-warning:not(:checked) + * + * {position: fixed; z-index: 2;
89+
bottom: 2em; left: 0; right: 0; text-align: center;
90+
padding: 0.5em 0.5em 1em 0.5em; box-shadow: 0 2px 8px black;
91+
border-top: thin solid; border-bottom: thin solid;
92+
background: hsla(40,100%,50%,0.9); color: black}
93+
#annoying-warning:not(:checked) + * + * p {margin: 0}
94+
#annoying-warning, #annoying-warning + * {position: fixed; z-index: 3}
95+
#annoying-warning {font-size: 1em; bottom: 2.3em; right: 0.5em; margin: 0}
96+
#annoying-warning + * {font-size: 80%; bottom: 2.5em; right: 2.3em}
97+
#annoying-warning:checked, #annoying-warning:checked + * {display: none}
98+
html {margin-bottom: 15em}
99+
}
100+
</style>
101+
112102
<!--=================================================================-->
113103
114104
<!--
@@ -1299,7 +1289,7 @@ of ''auto'' is different, because there it also has an effect on the
12991289
<p class=issue>One idea to distribute boxes better than with 'auto'
13001290
(which only works in the inline direction and fails to distribute
13011291
negative space) is to add a “fill” keyword, possibly combined with a
1302-
minimum margin: ''fill'' or ''1.2em + fill'' or ''calc(1.2em +
1292+
minimum margin: <css>fill</css> or ''1.2em + fill'' or ''calc(1.2em +
13031293
fill)''). “Fill” could also be a unit, so that some fills can get more
13041294
space than others: ''margin: 0.5fill'' or ''margin: 2fill''.
13051295

@@ -1355,7 +1345,7 @@ Percentages: refer to width of containing block
13551345
Computed value: the specified keyword; or the specified
13561346
percentage (with ''border-box'' or ''content-box'' if present); or
13571347
the absolute length (with ''border-box'' or ''content-box'' if
1358-
present); or ''auto'' if the property does not apply; (also see
1348+
present); or ''width/auto'' if the property does not apply; (also see
13591349
prose under &lt;percentage>)
13601350
Canonical order: the length or percentage before the
13611351
keyword, if both are present
@@ -1373,7 +1363,7 @@ Animatable: yes
13731363
Percentages: see prose
13741364
Computed value: the specified keywords, the specified
13751365
percentage (see prose under &lt;percentage>) or the absolute
1376-
length; ''auto'' if the property does not apply
1366+
length; ''height/auto'' if the property does not apply
13771367
Canonical order: the length or percentage before the
13781368
keyword, if both are present
13791369
</pre>
@@ -1416,13 +1406,13 @@ area</em> or <em>border area</em> (depending on
14161406
properties. See <a href="#Calculating">Calculating widths, heights
14171407
and margins</a> below.
14181408

1419-
<dt>complex <dd>(Only on 'height'.) The same as ''auto'', except
1409+
<dt>complex <dd>(Only on 'height'.) The same as ''heght/auto'', except
14201410
that elements with a <a>complex aspect ratio</a> (defined below) are
14211411
considered to
14221412
have an <a>intrinsic ratio</a>. More precisely: for the purposes
14231413
of the section on <a href="#Calculating">“Calculating widths,
14241414
heights and margins,”</a> the element is treated as if its height
1425-
was ''auto'' and it had an <a>intrinsic ratio</a>.
1415+
was ''height/auto'' and it had an <a>intrinsic ratio</a>.
14261416
</dl>
14271417

14281418
<p class=issue>Another possible value is
@@ -1752,7 +1742,7 @@ margin is <var>M</var> - <var>N</var>, where <var>M</var> is the maximum of
17521742
the adjoining margins that are positive, or zero if there are none; and
17531743
<var>N</var> is the minimum of the adjoining margins that are negative, or
17541744
zero if there are none. But if any of the margins is
1755-
<a>''fill''</a>, then the resulting margin is also ''fill''.
1745+
''fill'', then the resulting margin is also ''fill''.
17561746

17571747
<p>We call an element or box <dfn>collapsed through</dfn> if two of
17581748
its margins collapse with each other.
@@ -2448,15 +2438,15 @@ calculated from the computed values, with any ''auto'' values replaced
24482438
by 0.
24492439
24502440
<p>If the <a>block flow dimension</a> is ''auto'', the used value
2451-
is defined by <a href="#root-height">“''Auto'' heights for flow
2441+
is defined by <a href="#root-height">“<css>auto</css> heights for flow
24522442
roots.”</a> Otherwise, the used value is evaluated from the computed
24532443
value.
24542444
24552445
<p>Apply the rules for <a>inline-start</a> margin, <a>inline-start</a>
24562446
padding, <a>measure,</a> <a>inline-end</a> padding and
24572447
<a>inline-end</a> margin as given above in <a href="#blockwidth">
2458-
“Block-level, non-replaced elements in normal flow when 'overflow'
2459-
computes to ''visible''.”</a>
2448+
“Block-level, non-replaced elements in normal flow when <css>overflow</css>
2449+
computes to <css>visible</css>.”</a>
24602450
24612451
24622452
@@ -2474,10 +2464,10 @@ same as for ''fit-content''. Otherwise the computed value is evaluated
24742464
to give the used value.
24752465
24762466
<p>If the computed value of 'height' is ''auto'', the used value is
2477-
defined by <a href="#root-height">“''Auto'' heights for flow roots.”
2467+
defined by <a href="#root-height">“<css>auto</css> heights for flow roots.”
24782468
</a> If it contains a percentage and the height of the containing
24792469
block is not known (depends on this element), then the used value is
2480-
also defined by <a href="#root-height">“''Auto'' heights for flow
2470+
also defined by <a href="#root-height">“<css>auto</css> heights for flow
24812471
roots.”</a> Otherwise it is calculated by evaluating the computed
24822472
value.
24832473
@@ -2603,7 +2593,7 @@ that value. If the values are over-constrained, ignore the value for
26032593
<ol>
26042594
<li>'top' and 'height' are ''auto'' and 'bottom' is not ''auto'':
26052595
The used value of 'bottom' is its computed value. The used height is
2606-
defined by <a href="#root-height">“''Auto'' heights for flow roots.”
2596+
defined by <a href="#root-height">“<css>auto</css> heights for flow roots.”
26072597
</a> The used values of 'margin-top' and 'margin-bottom' are their
26082598
computed values, except that any ''auto'' gives a used value of 0.
26092599
Finally, the constraint gives the used value of 'top'.
@@ -2615,7 +2605,7 @@ that value. If the values are over-constrained, ignore the value for
26152605
the constraint gives the used value for 'bottom'.
26162606
26172607
<li>'height' and 'bottom' are ''auto'' and 'top' is not ''auto'':
2618-
The used height is defined by <a href="#root-height">“''Auto''
2608+
The used height is defined by <a href="#root-height">“<css>auto</css>
26192609
heights for flow roots.”</a> The used values of 'margin-top' and
26202610
'margin-bottom' are their computed values, except that any ''auto''
26212611
gives a used value of 0. Finally, the constraint gives the used
@@ -2717,7 +2707,7 @@ except that if 'width' is computed as ''auto'', the used value is the
27172707
same as for ''fit-content''.
27182708
27192709
<p>If the computed value of 'height' is ''auto'', the used value is
2720-
given by <a href="#root-height">“''Auto'' heights for flow roots.”
2710+
given by <a href="#root-height">“<css>auto</css> heights for flow roots.”
27212711
</a> If the computed value includes a percentage and the height of the
27222712
containing block is not known (depends on this element), then the used
27232713
value is computed as if the computed value were ''auto''. Otherwise
@@ -3326,7 +3316,7 @@ similar to 'clear-after: both', e.g., this documents looks the same whether it c
33263316
<p class=caption>The DIV's border goes around the floating box.
33273317
</div>
33283318
3329-
<p>But in more complex cases, the fact that 'overflow: hidden' affects
3319+
<p>But in more complex cases, the fact that ''overflow: hidden'' affects
33303320
overflow and creates a <a>flow root</a> can be visible. This is the
33313321
same document, but now there is a floating box <em>before</em> the
33323322
DIV:

0 commit comments

Comments
 (0)