-
Notifications
You must be signed in to change notification settings - Fork 709
/
Copy pathOverview.bs
207 lines (170 loc) · 7.56 KB
/
Overview.bs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<pre class='metadata'>
Title: CSS Backgrounds Module Level 4
Shortname: css-backgrounds
Level: 4
Status: ED
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-backgrounds-4/
Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about/, w3cid 52258
Editor: Sebastian Zartner, Invited Expert, sebastianzartner@gmail.com, w3cid 64937
Abstract: This module contains the features of CSS relating to the backgrounds of boxes on the page.
Ignored Terms: total width
Warning: Not Ready
</pre>
<pre class="link-defaults">
spec:css-text-4; type:value; text:collapse
spec:css-shapes-2; type:function; text:path()
</pre>
<link rel="stylesheet" href="style.css" />
<h2 id="intro">
Introduction</h2>
<p class="issue">
This module is currently maintained as a diff against
the parts related to backgrounds of
CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].
We will fold in the text once it's all formatted up and in CR again,
as this will reduce the effort of keeping them in sync
(source diffs will be accurate in reflecting the differences).
<h2 id="backgrounds">
Backgrounds</h2>
<h3 id="the-background-position">
Background Positioning: the 'background-position' shorthand property</h3>
<pre class="propdef shorthand">
Name: background-position
Value: <<bg-position>>#
</pre>
See [[CSS3BG]] for definition.
<p>Where
<pre class=prod><dfn><bg-position></dfn> = [
[ left | center | right | top | bottom | start | end | <<length-percentage>> ]
|
[ left | center | right | x-start | x-end | <<length-percentage>> ]
[ top | center | bottom | y-start | y-end | <<length-percentage>> ]
|
[ center | [ left | right | x-start | x-end ] <<length-percentage>>? ] &&
[ center | [ top | bottom | y-start | y-end ] <<length-percentage>>? ]
|
[ center | [ start | end ] <<length-percentage>>? ]
[ center | [ start | end ] <<length-percentage>>? ] ]</pre>
Values have the following meanings:
<dl>
<dt>One value
<dd>
If only one value is given,
and that value is ''background-position/start'' or ''background-position/end'',
then the keyword is duplicated;
otherwise the second keyword defaults to ''background-position/center''.
The resulting value is treated as a two-component value.
<dt>More than one value
<dd>
If the value contains a ''background-position/start'' or ''background-position/end'' keyword,
then the shorthand sets
'background-position-inline' and 'background-position-block' to the specified values.
Otherwise
the shorthand sets
'background-position-x' and 'background-position-y' to the specified values.
Issue: Specify the value assignment in more detail. Should expand just like Level 3.
</dl>
Issue: Specify what happens to set of properties that are not set. Maybe they're just not set?
<h4 id="background-position-longhands">
Background Positioning Longhands: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties</h4>
Issue: This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.
<pre class="propdef">
Name: background-position-x
Value: [ center | [ [ left | right | x-start | x-end ]? <<length-percentage>>? ]! ]#
Initial: 0%
Inherited: no
Logical property group: background-position
Percentages: refer to width of background positioning area <em>minus</em> width of background image
Computed value: A list, each item consisting of: an offset given as a computed <<length-percentage>> value, plus an origin keyword
Animation type: repeatable list
</pre>
This property specifies the background position's horizontal component.
An omitted origin keyword is assumed to be ''left''.
<pre class="propdef">
Name: background-position-y
Value: [ center | [ [ top | bottom | y-start | y-end ]? <<length-percentage>>? ]! ]#
Initial: 0%
Inherited: no
Logical property group: background-position
Percentages: refer to height of background positioning area <em>minus</em> height of background image
Computed value: A list, each item consisting of: an offset given as a computed <<length-percentage>> value, plus an origin keyword
Animation type: repeatable list
</pre>
This property specifies the background position's vertical component.
An omitted origin keyword is assumed to be ''top''.
<pre class="propdef">
Name: background-position-inline
Value: [ center | [ start | end ]? <<length-percentage>>? ]#
Initial: 0%
Inherited: no
Logical property group: background-position
Percentages: refer to inline-size of background positioning area <em>minus</em> inline-size of background image
Computed value: A list, each item consisting of: an offset given as a computed <<length-percentage>> value, plus an origin keyword
Animation type: repeatable list
</pre>
This property specifies the background position's inline-axis component.
An omitted origin keyword is assumed to be ''background-position-inline/start''.
<pre class="propdef">
Name: background-position-block
Value: [ center | [ start | end ]? <<length-percentage>>? ]#
Initial: 0%
Inherited: no
Logical property group: background-position
Percentages: refer to size of background positioning area <em>minus</em> size of background image
Computed value: A list, each item consisting of: an offset given as a computed <<length-percentage>> value, plus an origin keyword
Animation type: repeatable list
</pre>
This property specifies the background position's block-axis component.
An omitted origin keyword is assumed to be ''background-position-block/start''.
<h3 id='background-clip'>
Painting Area: the 'background-clip' property</h3>
<pre class="propdef">
Name: background-clip
Value: <<bg-clip>>#
Initial: border-box
Inherited: no
Animation type: repeatable list
</pre>
Determines the <dfn export>background painting area</dfn>,
which determines the area within which the background is painted.
The syntax of the property is given with
<pre class=prod>
<dfn><bg-clip></dfn> = <<box>> | border | text
</pre>
Issue: Or should this be defining the <css>-webkit-background-clip</css> property,
saying that all the values are identical,
with this additional ''text'' value?
<dl dfn-type=value dfn-for="background-clip, <bg-clip>">
<dt><dfn><<box>></dfn>
<dd>
The background is painted within (clipped to)
the specified box of the element.
<dt><dfn>text</dfn>
<dd>
The background is painted within (clipped to)
the intersection of the border box
and the geometry of the text in the element and its in-flow and floated descendants.
<dt><dfn>border</dfn></dt>
<dd>
The background is clipped to the area painted by the border, taking 'border-width' and 'border-style' into account but ignoring any transparency introduced by 'border-color'.
</dd>
</dl>
Issue: Should a <a href="https://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html">'background-repeat: extend'</a> be added?
<h2 id="changes">
Changes</h2>
<h3 id="level-changes">
Additions since [[CSS3BG]]</h3>
* turned 'background-position' into a shorthand and added physical and logical longhands
* added logical keywords to <<bg-position>>
* added 'background-clip'
<h2 id="acknowledgments">Acknowledgments</h2>
<p>In addition to the many contributors to the [[CSS1]], [[CSS21]],
and [[CSS3BG]] predecessors to this module,
the editors would like to thank
Tab Atkins,
and Håkon Wium Lie
for their suggestions and feedback specifically for this Level 4.