Skip to content

Commit ead6131

Browse files
fantasaifantasai
committed
[css-backgrounds-4] Switch to x-start/y-start format for axis-constrained keywords because this version looks a lot saner.
1 parent bd48687 commit ead6131

2 files changed

Lines changed: 66 additions & 248 deletions

File tree

‎css-backgrounds-4/Overview.bs‎

Lines changed: 30 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -46,96 +46,41 @@ Background Positioning: the 'background-position' shorthand property</h3>
4646

4747
<p>Where
4848
<pre class=prod><dfn><var>&lt;position&gt;</var></dfn> = [
49-
[ left | center | right | top | bottom | start | end | inline-start | inline-end | block-start | block-end | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
49+
[ left | center | right | top | bottom | start | end | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
5050
|
5151
[ left | center | right | start | end | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
5252
[ top | center | bottom | start | end | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
5353
|
54-
[ center | [ left | right | start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
55-
[ center | [ top | bottom | start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
54+
[ center | [ left | right | x-start | x-end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
55+
[ center | [ top | bottom | y-start | y-end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
5656
|
57-
[ center | [ inline-start | inline-end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
58-
[ center | [ block-start | block-end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] ]</pre>
59-
60-
If the value contains an ''inline-start'', ''inline-end'', ''block-start'', or ''block-end'' keyword,
61-
then the shorthand sets
62-
'background-position-inline' and 'background-position-block' to the specified values.
63-
64-
Otherwise
65-
the shorthand sets
66-
'background-position-x' and 'background-position-y' to the specified values.
67-
68-
Issue: Specify the value assignment in more detail.
57+
[ center | [ start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
58+
[ center | [ start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] ]</pre>
59+
60+
Values have the following meanings:
61+
<dl>
62+
<dt>One value
63+
<dd>
64+
If only one value is given,
65+
and that value is ''background-position/start'' or ''background-position/end'',
66+
then the keyword is duplicated;
67+
otherwise the second keyword defaults to ''background-position/center''.
68+
The resulting value is treated as a two-component value.
69+
70+
<dt>More than one value
71+
<dd>
72+
If the value contains a ''background-position/start'' or ''background-position/end'' keyword,
73+
then the shorthand sets
74+
'background-position-inline' and 'background-position-block' to the specified values.
75+
Otherwise
76+
the shorthand sets
77+
'background-position-x' and 'background-position-y' to the specified values.
78+
79+
Issue: Specify the value assignment in more detail. Should expand just like Level 3.
80+
</dl>
6981

7082
Issue: Specify what happens to set of properties that are not set. Maybe they're just not set?
7183

72-
<table class=data>
73-
<caption>Examples of 'background-position' values and their longhand assignments</caption>
74-
<thead>
75-
<tr>
76-
<th>'background-position'
77-
<th>x
78-
<th>y
79-
<th>inline
80-
<th>block
81-
<tbody>
82-
<tr>
83-
<td>''center''
84-
<td>''center''
85-
<td>''center''
86-
<td>--
87-
<td>--
88-
<tr>
89-
<td>''block-start''
90-
<td>--
91-
<td>--
92-
<td>''center''
93-
<td>''start''
94-
<tr>
95-
<td>''start''
96-
<td>''start''
97-
<td>''center''
98-
<td>--
99-
<td>--
100-
<tbody>
101-
<tr>
102-
<td>''start end''
103-
<td>''start''
104-
<td>''end''
105-
<td>--
106-
<td>--
107-
<tr>
108-
<td>''block-start inline-end''
109-
<td>--
110-
<td>--
111-
<td>''start'' = ''0%''
112-
<td>''end'' = ''100%''
113-
<tbody>
114-
<tr>
115-
<td>''center end 30px''
116-
<td>''center'' = ''50%''
117-
<td>''end 30px''
118-
<td>--
119-
<td>--
120-
<tr>
121-
<td>''block-start 30px center''
122-
<td>--
123-
<td>--
124-
<td>''center''
125-
<td>''start 30px'' = ''30px''
126-
<tr>
127-
<td>''start 30px end''
128-
<td>''start 30px''
129-
<td>''end''
130-
<td>--
131-
<td>--
132-
</table>
133-
134-
Issue: Would it make more sense to use position-dependent unprefixed start/end keywords for the logical properties
135-
(which would make them less awkward, and therefore more equal to physical positions),
136-
and do something special for the axis-constrained horizontal-start/vertical-start values?
137-
E.g. call them start-x/start-y or x-start/y-start?
138-
13984
<h4 id="background-position-longhands">
14085
Background Positioning Longhands: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties</h4>
14186

@@ -145,7 +90,7 @@ Background Positioning Longhands: the 'background-position-x', 'background-posit
14590

14691
<pre class='propdef'>
14792
Name: background-position-x
148-
Value: [ center | [ left | right | start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
93+
Value: [ center | [ left | right | x-start | x-end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
14994
Initial: left
15095
Applies to: all
15196
Inherited: no
@@ -158,7 +103,7 @@ Background Positioning Longhands: the 'background-position-x', 'background-posit
158103

159104
<pre class='propdef'>
160105
Name: background-position-y
161-
Value: [ center | [ top | bottom | start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
106+
Value: [ center | [ top | bottom | y-start | y-end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
162107
Initial: left
163108
Applies to: all
164109
Inherited: no
@@ -691,7 +636,7 @@ Additions Since Level 3</h3>
691636
<p class="issue">Additions are a work in progress... here's what we're planning to add. :)
692637

693638
<ul>
694-
<li>logical 'background-position' values (''start'', ''end'')
639+
<li>logical 'background-position' values (''background-position/start'', ''background-position/end'')
695640
<li>the ''extend'' keyword of 'background-repeat'
696641
<li>'corner-shape'
697642
<li>multiple borders per element

0 commit comments

Comments
 (0)