@@ -18,7 +18,7 @@ Abstract: This draft contains the features of CSS relating to borders and backgr
18
18
Test Suite : http://test.csswg.org/suites/css3-background/nightly-unstable/
19
19
At risk : animatability of 'box-shadow'
20
20
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
22
22
</pre>
23
23
<pre class="link-defaults">
24
24
spec:css2; type:type; text:<uri>
@@ -28,8 +28,8 @@ spec:css2; type:value; text:inline-table
28
28
spec:css2; type:value; text:table-cell
29
29
spec:css2; type:property; text:overflow
30
30
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
33
33
spec:selectors-3; type:selector; text: ::first-letter
34
34
spec:selectors-3; type:selector; text: ::first-line
35
35
spec:css-values-3; type:type; text:<position>
@@ -431,7 +431,7 @@ a comma-separated list of <attachment> keywords where
431
431
<dd> The background is fixed with regard to the element's contents:
432
432
if the element has a scrolling mechanism,
433
433
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=]
435
435
are relative to the scrollable area of the element rather than to the border framing them.
436
436
Because the scrollable area does not include the border area,
437
437
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
697
697
[[!CSS2]] .
698
698
699
699
<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=] .
701
701
702
702
<p> See the section <a href="#layering">“Layering multiple background
703
703
images”</a> for how ''background-clip'' interacts with other
@@ -1641,7 +1641,7 @@ the inner curve will not be a full quarter ellipse.</p>
1641
1641
by <em> adding</em> the corresponding margin thickness to each border radius.
1642
1642
However, in order to create a sharper corner when the border radius is small
1643
1643
(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,
1645
1645
the margin is multiplied by the proportion 1 + (<var> r</var> -1)<sup> 3</sup> ,
1646
1646
where <var> r</var> is the ratio of the border radius to the margin,
1647
1647
in calculating the corner radii of the margin box shape.
@@ -1960,7 +1960,7 @@ parts. Analogously for the top and bottom values.
1960
1960
<p> If the image must be sized to determine the slices
1961
1961
(for example, for SVG images with no [=natural dimensions=] ),
1962
1962
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=] .
1964
1964
1965
1965
<div class=figure>
1966
1966
<p><img src="images/slice.png" alt="Diagram: two horizontal cuts and two
@@ -2276,44 +2276,44 @@ Animation type: by computed value,
2276
2276
2277
2277
<p> The components of each <<shadow>> are interpreted as follows:
2278
2278
2279
- <dl>
2279
+ <dl dfn-type=dfn dfn-for=box-shadow noexport >
2280
2280
<dt> <dfn id="shadow-offset-x">1st <<length>></dfn>
2281
2281
<dd>
2282
- Specifies the <dfn>horizontal offset</dfn> of the shadow.
2282
+ Specifies the <dfn export >horizontal offset</dfn> of the shadow.
2283
2283
A positive value draws a shadow that is offset to the right of the box,
2284
2284
a negative length to the left.
2285
2285
2286
2286
<dt> <dfn id="shadow-offset-y">2nd <<length>></dfn>
2287
2287
<dd>
2288
- Specifies the <dfn>vertical offset</dfn> of the shadow.
2288
+ Specifies the <dfn export >vertical offset</dfn> of the shadow.
2289
2289
A positive value offsets the shadow down, a negative one up.
2290
2290
2291
2291
<dt> <dfn id="shadow-blur-radius">3rd <<length [0,∞]>></dfn>
2292
- <dd> Specifies the <dfn>blur radius</dfn> .
2292
+ <dd> Specifies the <dfn export >blur radius</dfn> .
2293
2293
Negative values are invalid.
2294
2294
If the blur value is zero, the shadow’s edge is sharp.
2295
2295
Otherwise, the larger the value, the more the shadow’s edge is blurred.
2296
2296
See <a href="#shadow-blur">Shadow Blurring</a> , below.
2297
2297
2298
2298
<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> .
2300
2300
Positive values cause the shadow to expand in all directions by the specified radius.
2301
2301
Negative values cause the shadow to contract.
2302
2302
See <a href="#shadow-shape">Shadow Shape</a> , below.
2303
2303
<p class="note"> Note that for inner shadows,
2304
2304
expanding the shadow (creating more shadow area)
2305
2305
means contracting the shadow’s perimeter shape.
2306
2306
2307
- <dt> <dfn value for=box-shadow id="shadow-color"><<color>></dfn>
2307
+ <dt> <dfn value id="shadow-color"><<color>></dfn>
2308
2308
<dd>
2309
2309
Specifies the color of the shadow.
2310
2310
If the color is absent, it defaults to ''currentColor'' .
2311
2311
2312
- <dt> <dfn value for=box-shadow id="shadow-inset">inset</dfn>
2312
+ <dt> <dfn value id="shadow-inset">inset</dfn>
2313
2313
<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>
2315
2315
(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>
2317
2317
(one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).
2318
2318
</dl>
2319
2319
@@ -2342,19 +2342,19 @@ Animation type: by computed value,
2342
2342
<h4 id="shadow-shape">
2343
2343
Shadow Shape, Spread, and Knockout</h4>
2344
2344
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.
2346
2346
Assuming a spread distance of zero, its perimeter has the exact same size and shape as the border box.
2347
2347
The shadow is drawn outside the border edge only:
2348
2348
it is clipped inside the border-box of the element.
2349
2349
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.
2351
2351
Assuming a spread distance of zero, its perimeter has the exact same size and shape as the padding box.
2352
2352
The shadow is drawn inside the padding edge only:
2353
2353
it is clipped outside the padding box of the element.
2354
2354
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=]
2358
2358
(and flooring the resulting width/height at zero).
2359
2359
2360
2360
<div class="example">
@@ -2455,17 +2455,17 @@ Shadow Shape, Spread, and Knockout</h4>
2455
2455
<p> To preserve the box's shape when spread is applied,
2456
2456
the corner radii of the shadow are also increased (decreased, for inner shadows)
2457
2457
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).
2459
2459
However, in order to create a sharper corner when the border radius is small
2460
2460
(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=]
2462
2462
(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=]
2465
2465
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=] ,
2467
2467
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),
2469
2469
the corner radius of the shadow shape will be 10px + 20px × (1 + (.5 - 1)<sup> 3</sup> ) = 27.5px
2470
2470
rather than 30px.
2471
2471
This adjustment is applied independently to the radii in each dimension.
@@ -2475,7 +2475,7 @@ Shadow Shape, Spread, and Knockout</h4>
2475
2475
<h4 id="shadow-blur">
2476
2476
Blurring Shadow Edges</h4>
2477
2477
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
2479
2479
be blurred, such as by a Gaussian filter. The exact algorithm is not
2480
2480
defined; however the resulting shadow must approximate (with each pixel
2481
2481
being within 5% of its expected value) the image that would be generated
@@ -2496,8 +2496,8 @@ Layering, Layout, and Other Details</h4>
2496
2496
Shadows do not influence layout and may overlap (or be overlapped by)
2497
2497
other boxes and text or their shadows.
2498
2498
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
2501
2501
(below the borders and border image, if any).
2502
2502
2503
2503
<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
2557
2557
<h2 id="changes">
2558
2558
Changes</h2>
2559
2559
2560
- <h3 id="changes-2020-12 ">
2560
+ <h3 id="changes-2024-02 ">
2561
2561
Changes since the 14 February 2024 Candidate Recommendation Snapshot</h3>
2562
2562
2563
2563
<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 < color> to the front of < final-bg-layer></a>
2565
2565
in the 'background' shorthand.
2566
2566
(<a href="https://github.com/w3c/csswg-drafts/issues/8496">Issue 8496</a> )
2567
2567
<li> Fixed an error in the Computed Value line of 'background-image' .
2568
2568
(<a href="https://github.com/w3c/csswg-drafts/issues/8604">Issue 8604</a> )
2569
+ <li> Removed the <box> definition
2570
+ (replacing it with a <<visual-box>> reference),
2571
+ as the Box Module now defines these terms.
2569
2572
</ul>
2570
2573
2571
2574
@@ -2600,15 +2603,15 @@ Changes since the 17 October 2017 Candidate Recommendation</h3>
2600
2603
<p> To preserve the box's shape when spread is applied,
2601
2604
the corner radii of the shadow are also increased (decreased, for inner shadows)
2602
2605
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).
2604
2607
However, in order to create a sharper corner when the border radius is small
2605
2608
<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=]
2607
2610
<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=]
2610
2613
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=] ,
2612
2615
in calculating the corner radii of the spread shadow shape.
2613
2616
</blockquote>
2614
2617
<li>
@@ -2811,11 +2814,9 @@ Candidate Recommendation</a>:
2811
2814
</blockquote>
2812
2815
<p> Changed <del> Equivalent</del> to <ins> Computes</ins> in
2813
2816
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.
2817
2818
<li> <a href="#the-background-position">Section 3.6</a> :
2818
- Renamed <bg-position> production to <i> <position> </i > for
2819
+ Renamed <bg-position> production to <<position> > for
2819
2820
easier re-use in other specifications and recast the grammar to be more
2820
2821
verbose but easier to understand.
2821
2822
<blockquote>
@@ -2889,3 +2890,11 @@ the box-shadow examples, and for proposing some
2889
2890
<a href="http://www.bradclicks.com/cssplay/border-image/Thinking_Outside_The_Box.html">radical changes</a>
2890
2891
to the 'border-image' property that solved a number of problems with
2891
2892
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