Skip to content

Commit f1b985b

Browse files
committed
[css-backgrounds-3][editorial] Fix bikeshed errors.
1 parent 85ebab9 commit f1b985b

File tree

1 file changed

+50
-41
lines changed

1 file changed

+50
-41
lines changed

css-backgrounds-3/Overview.bs

+50-41
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Abstract: This draft contains the features of CSS relating to borders and backgr
1818
Test Suite: http://test.csswg.org/suites/css3-background/nightly-unstable/
1919
At risk: animatability of 'box-shadow'
2020
At risk: applicability of 'border' and its longhands to [=ruby base containers=] and [=ruby annotation containers=]
21-
Use <i> Autolinks: yes
21+
Ignored Vars: width of background positioning area, width of background image, height of background positioning area, height of background image, X, X', Li, Ltop, Lbottom, Lleft, Lright, Wside, Wleft, Wright, Wtop, Wbottom, spread distance
2222
</pre>
2323
<pre class="link-defaults">
2424
spec:css2; type:type; text:<uri>
@@ -28,8 +28,8 @@ spec:css2; type:value; text:inline-table
2828
spec:css2; type:value; text:table-cell
2929
spec:css2; type:property; text:overflow
3030
spec:css2; type:value; text:visible
31-
spec:css-color-3; type:property; text:color
32-
spec:css-color-3; type:value; text:transparent
31+
spec:css-color-4; type:property; text:color
32+
spec:css-color-4; type:value; text:transparent
3333
spec:selectors-3; type:selector; text: ::first-letter
3434
spec:selectors-3; type:selector; text: ::first-line
3535
spec:css-values-3; type:type; text:<position>
@@ -431,7 +431,7 @@ a comma-separated list of &lt;attachment&gt; keywords where
431431
<dd>The background is fixed with regard to the element's contents:
432432
if the element has a scrolling mechanism,
433433
the background scrolls with the element's contents,
434-
and the <i>background painting area</i> and <i>background positioning area</i>
434+
and the [=background painting area=] and [=background positioning area=]
435435
are relative to the scrollable area of the element rather than to the border framing them.
436436
Because the scrollable area does not include the border area,
437437
for scrollable elements the ''background-clip/border-box'' value of 'background-clip'
@@ -697,7 +697,7 @@ the border, if any. See “Elaborate description of Stacking Contexts” in
697697
[[!CSS2]].
698698

699699
<p>See the section on <a href="#corner-shaping">Corner Shaping</a>
700-
for how 'border-radius' affects the shape of the <i>background painting area</i>.
700+
for how 'border-radius' affects the shape of the [=background painting area=].
701701

702702
<p>See the section <a href="#layering">“Layering multiple background
703703
images”</a> for how ''background-clip'' interacts with other
@@ -1641,7 +1641,7 @@ the inner curve will not be a full quarter ellipse.</p>
16411641
by <em>adding</em> the corresponding margin thickness to each border radius.
16421642
However, in order to create a sharper corner when the border radius is small
16431643
(and thus ensure continuity between round and sharp corners),
1644-
when the <i>border radius</i> is less than the margin,
1644+
when the [=border radius=] is less than the margin,
16451645
the margin is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>,
16461646
where <var>r</var> is the ratio of the border radius to the margin,
16471647
in calculating the corner radii of the margin box shape.
@@ -1960,7 +1960,7 @@ parts. Analogously for the top and bottom values.
19601960
<p>If the image must be sized to determine the slices
19611961
(for example, for SVG images with no [=natural dimensions=]),
19621962
then it is sized using the <a href="https://www.w3.org/TR/css3-images/#default-sizing">default sizing algorithm</a>
1963-
with no <i>specified size</i> and the <i>border image area</i> as the <i>default object size</i>.
1963+
with no [=specified size=] and the [=border image area=] as the [=default object size=].
19641964

19651965
<div class=figure>
19661966
<p><img src="images/slice.png" alt="Diagram: two horizontal cuts and two
@@ -2276,44 +2276,44 @@ Animation type: by computed value,
22762276

22772277
<p>The components of each <<shadow>> are interpreted as follows:
22782278

2279-
<dl>
2279+
<dl dfn-type=dfn dfn-for=box-shadow noexport>
22802280
<dt><dfn id="shadow-offset-x">1st <<length>></dfn>
22812281
<dd>
2282-
Specifies the <dfn>horizontal offset</dfn> of the shadow.
2282+
Specifies the <dfn export>horizontal offset</dfn> of the shadow.
22832283
A positive value draws a shadow that is offset to the right of the box,
22842284
a negative length to the left.
22852285

22862286
<dt><dfn id="shadow-offset-y">2nd <<length>></dfn>
22872287
<dd>
2288-
Specifies the <dfn>vertical offset</dfn> of the shadow.
2288+
Specifies the <dfn export>vertical offset</dfn> of the shadow.
22892289
A positive value offsets the shadow down, a negative one up.
22902290

22912291
<dt><dfn id="shadow-blur-radius">3rd <<length [0,&infin;]>></dfn>
2292-
<dd>Specifies the <dfn>blur radius</dfn>.
2292+
<dd>Specifies the <dfn export>blur radius</dfn>.
22932293
Negative values are invalid.
22942294
If the blur value is zero, the shadow’s edge is sharp.
22952295
Otherwise, the larger the value, the more the shadow’s edge is blurred.
22962296
See <a href="#shadow-blur">Shadow Blurring</a>, below.
22972297

22982298
<dt><dfn id="shadow-spread-distance">4th <<length>></dfn>
2299-
<dd>Specifies the <dfn>spread distance</dfn>.
2299+
<dd>Specifies the <dfn export>spread distance</dfn>.
23002300
Positive values cause the shadow to expand in all directions by the specified radius.
23012301
Negative values cause the shadow to contract.
23022302
See <a href="#shadow-shape">Shadow Shape</a>, below.
23032303
<p class="note">Note that for inner shadows,
23042304
expanding the shadow (creating more shadow area)
23052305
means contracting the shadow’s perimeter shape.
23062306

2307-
<dt><dfn value for=box-shadow id="shadow-color"><<color>></dfn>
2307+
<dt><dfn value id="shadow-color"><<color>></dfn>
23082308
<dd>
23092309
Specifies the color of the shadow.
23102310
If the color is absent, it defaults to ''currentColor''.
23112311

2312-
<dt><dfn value for=box-shadow id="shadow-inset">inset</dfn>
2312+
<dt><dfn value id="shadow-inset">inset</dfn>
23132313
<dd>If present, the ''box-shadow/inset'' keyword changes the drop shadow
2314-
from an <dfn local-lt="outer shadow">outer box-shadow</dfn>
2314+
from an <dfn local-lt="outer shadow" export>outer box-shadow</dfn>
23152315
(one that shadows the box onto the canvas, as if it were lifted above the canvas)
2316-
to an <dfn local-lt="inner shadow">inner box-shadow</dfn>
2316+
to an <dfn local-lt="inner shadow" export>inner box-shadow</dfn>
23172317
(one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).
23182318
</dl>
23192319

@@ -2342,19 +2342,19 @@ Animation type: by computed value,
23422342
<h4 id="shadow-shape">
23432343
Shadow Shape, Spread, and Knockout</h4>
23442344

2345-
<p>An <i>outer box-shadow</i> casts a shadow as if the border-box of the element were opaque.
2345+
<p>An [=outer box-shadow=] casts a shadow as if the border-box of the element were opaque.
23462346
Assuming a spread distance of zero, its perimeter has the exact same size and shape as the border box.
23472347
The shadow is drawn outside the border edge only:
23482348
it is clipped inside the border-box of the element.
23492349

2350-
<p>An <i>inner box-shadow</i> casts a shadow as if everything outside the padding edge were opaque.
2350+
<p>An [=inner box-shadow=] casts a shadow as if everything outside the padding edge were opaque.
23512351
Assuming a spread distance of zero, its perimeter has the exact same size and shape as the padding box.
23522352
The shadow is drawn inside the padding edge only:
23532353
it is clipped outside the padding box of the element.
23542354

2355-
<p>If a <i>spread distance</i> is defined, the shadow perimeter defined above
2356-
is expanded outward (for <i>outer box-shadows</i>) or contracted inward (for <i>inner box-shadows</i>)
2357-
by outsetting (insetting, for inner shadows) the shadow's straight edges by the <i>spread distance</i>
2355+
<p>If a [=spread distance=] is defined, the shadow perimeter defined above
2356+
is expanded outward (for [=outer box-shadows=]) or contracted inward (for [=inner box-shadows=])
2357+
by outsetting (insetting, for inner shadows) the shadow's straight edges by the [=spread distance=]
23582358
(and flooring the resulting width/height at zero).
23592359

23602360
<div class="example">
@@ -2455,17 +2455,17 @@ Shadow Shape, Spread, and Knockout</h4>
24552455
<p>To preserve the box's shape when spread is applied,
24562456
the corner radii of the shadow are also increased (decreased, for inner shadows)
24572457
from the border-box (padding-box) radii by adding (subtracting)
2458-
the <i>spread distance</i> (and flooring at zero).
2458+
the [=spread distance=] (and flooring at zero).
24592459
However, in order to create a sharper corner when the border radius is small
24602460
(and thus ensure continuity between round and sharp corners),
2461-
when the <i>border radius</i> is less than the <i>spread distance</i>
2461+
when the [=border radius=] is less than the [=spread distance=]
24622462
(or in the case of an inner shadow,
2463-
less than the absolute value of a negative <i>spread distance</i>),
2464-
the <i>spread distance</i>
2463+
less than the absolute value of a negative [=spread distance=]),
2464+
the [=spread distance=]
24652465
is first multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>,
2466-
where <var>r</var> is the ratio of the border radius to the <i>spread distance</i>,
2466+
where <var>r</var> is the ratio of the border radius to the [=spread distance=],
24672467
in calculating the corner radii of the spread shadow shape.
2468-
For example, if the border radius is 10px and the <i>spread distance</i> is 20px (<var>r</var> = .5),
2468+
For example, if the border radius is 10px and the [=spread distance=] is 20px (<var>r</var> = .5),
24692469
the corner radius of the shadow shape will be 10px + 20px × (1 + (.5 - 1)<sup>3</sup>) = 27.5px
24702470
rather than 30px.
24712471
This adjustment is applied independently to the radii in each dimension.
@@ -2475,7 +2475,7 @@ Shadow Shape, Spread, and Knockout</h4>
24752475
<h4 id="shadow-blur">
24762476
Blurring Shadow Edges</h4>
24772477

2478-
<p>A non-zero <i>blur radius</i> indicates that the resulting shadow should
2478+
<p>A non-zero [=blur radius=] indicates that the resulting shadow should
24792479
be blurred, such as by a Gaussian filter. The exact algorithm is not
24802480
defined; however the resulting shadow must approximate (with each pixel
24812481
being within 5% of its expected value) the image that would be generated
@@ -2496,8 +2496,8 @@ Layering, Layout, and Other Details</h4>
24962496
Shadows do not influence layout and may overlap (or be overlapped by)
24972497
other boxes and text or their shadows.
24982498
In terms of stacking contexts and the painting order,
2499-
the <i>outer box-shadows</i> of an element are drawn immediately below the background of that element,
2500-
and the <i>inner shadows</i> of an element are drawn immediately above the background of that element
2499+
the [=outer box-shadows=] of an element are drawn immediately below the background of that element,
2500+
and the [=inner shadows=] of an element are drawn immediately above the background of that element
25012501
(below the borders and border image, if any).
25022502

25032503
<p>If an element has multiple boxes, all of them get drop shadows,
@@ -2557,15 +2557,18 @@ The lists below describe which features from this specification are in each leve
25572557
<h2 id="changes">
25582558
Changes</h2>
25592559

2560-
<h3 id="changes-2020-12">
2560+
<h3 id="changes-2024-02">
25612561
Changes since the 14 February 2024 Candidate Recommendation Snapshot</h3>
25622562

25632563
<ul>
2564-
<li>Reverted <a href="#bg-color-move">change moving <<color>> to the front of <<final-bg-layer>></a>
2564+
<li>Reverted <a href="#bg-color-move">change moving &lt;color> to the front of &lt;final-bg-layer></a>
25652565
in the 'background' shorthand.
25662566
(<a href="https://github.com/w3c/csswg-drafts/issues/8496">Issue 8496</a>)
25672567
<li>Fixed an error in the Computed Value line of 'background-image'.
25682568
(<a href="https://github.com/w3c/csswg-drafts/issues/8604">Issue 8604</a>)
2569+
<li>Removed the &lt;box> definition
2570+
(replacing it with a <<visual-box>> reference),
2571+
as the Box Module now defines these terms.
25692572
</ul>
25702573

25712574

@@ -2600,15 +2603,15 @@ Changes since the 17 October 2017 Candidate Recommendation</h3>
26002603
<p>To preserve the box's shape when spread is applied,
26012604
the corner radii of the shadow are also increased (decreased, for inner shadows)
26022605
from the border-box radii by adding (subtracting)
2603-
the <i>spread distance</i> (and flooring at zero).
2606+
the [=spread distance=] (and flooring at zero).
26042607
However, in order to create a sharper corner when the border radius is small
26052608
<ins>(and thus ensure continuity between round and sharp corners)</ins>,
2606-
when the <i>border radius</i> is less than the <i>spread distance</i>
2609+
when the [=border radius=] is less than the [=spread distance=]
26072610
<ins>(or in the case of an inner shadow,
2608-
less than the absolute value of a negative <i>spread distance</i>)</ins>,
2609-
the <i>spread distance</i>
2611+
less than the absolute value of a negative [=spread distance=])</ins>,
2612+
the [=spread distance=]
26102613
is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>,
2611-
where <var>r</var> is the ratio of the border radius to the <i>spread distance</i>,
2614+
where <var>r</var> is the ratio of the border radius to the [=spread distance=],
26122615
in calculating the corner radii of the spread shadow shape.
26132616
</blockquote>
26142617
<li>
@@ -2811,11 +2814,9 @@ Candidate Recommendation</a>:
28112814
</blockquote>
28122815
<p>Changed <del>Equivalent</del> to <ins>Computes</ins> in
28132816
definition of keywords.
2814-
<li><a href="#animations">Section 2.3</a> (and all property definitions):
2815-
Added a section about expected an expected animations module.
2816-
Added "Animation Type" line to property definition tables.
2817+
<li>Added "Animation Type" line to property definition tables.
28172818
<li><a href="#the-background-position">Section 3.6</a>:
2818-
Renamed &lt;bg-position&gt; production to <i>&lt;position&gt;</i> for
2819+
Renamed &lt;bg-position&gt; production to <<position>> for
28192820
easier re-use in other specifications and recast the grammar to be more
28202821
verbose but easier to understand.
28212822
<blockquote>
@@ -2889,3 +2890,11 @@ the box-shadow examples, and for proposing some
28892890
<a href="http://www.bradclicks.com/cssplay/border-image/Thinking_Outside_The_Box.html">radical changes</a>
28902891
to the 'border-image' property that solved a number of problems with
28912892
the earlier definition.</p>
2893+
2894+
<h2 id=privacy>Privacy Considerations</h2>
2895+
2896+
This specification introduces no new privacy considerations.
2897+
2898+
<h2 id=security>Security Considerations</h2>
2899+
2900+
This specification introduces no new security considerations.

0 commit comments

Comments
 (0)