Skip to content

Bikeshed improvements related to CSS Backgrounds 4 property values #232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 24, 2016
Merged

Bikeshed improvements related to CSS Backgrounds 4 property values #232

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 37 additions & 104 deletions css-backgrounds-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,9 @@ Backgrounds</h2>
<h3 id="the-background-position">
Background Positioning: the 'background-position' shorthand property</h3>

<pre class='propdef'>
<pre class="propdef shorthand">
Name: background-position
Value: <<position>>#
Initial: top left
Applies to: all
Inherited: no
Percentages: refer to size of background positioning area <em>minus</em> size of background image
Media: visual
Computed value: A list, each item consisting of: a pair of offsets and an origin, each offset given as a combination of an absolute length and a percentage
</pre>

See [[CSS3BG]] for definition.
Expand Down Expand Up @@ -86,56 +80,48 @@ Background Positioning Longhands: the 'background-position-x', 'background-posit

Issue: This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.

<pre class='propdef'>
<pre class="propdef">
Name: background-position-x
Value: [ center | [ left | right | x-start | x-end ]? [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
Value: [ center | [ left | right | x-start | x-end ]? <<length-percentage>>? ]#
Initial: left
Applies to: all
Inherited: no
Percentages: refer to width of background positioning area <em>minus</em> width of background image
Media: visual
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
</pre>

This property specifies the background position's horizontal component.
An omitted origin keyword is assumed to be ''left''.

<pre class='propdef'>
<pre class="propdef">
Name: background-position-y
Value: [ center | [ top | bottom | y-start | y-end ]? [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
Value: [ center | [ top | bottom | y-start | y-end ]? <<length-percentage>>? ]#
Initial: left
Applies to: all
Inherited: no
Percentages: refer to height of background positioning area <em>minus</em> height of background image
Media: visual
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
</pre>

This property specifies the background position's vertical component.
An omitted origin keyword is assumed to be ''top''.

<pre class='propdef'>
<pre class="propdef">
Name: background-position-inline
Value: [ center | [ start | end ]? [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
Value: [ center | [ start | end ]? <<length-percentage>>? ]#
Initial: not applicable (initial value comes from physical property)
Applies to: all
Inherited: no
Percentages: refer to inline-size of background positioning area <em>minus</em> inline-size of background image
Media: visual
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
</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'>
<pre class="propdef">
Name: background-position-block
Value: [ center | [ start | end ]? [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
Value: [ center | [ start | end ]? <<length-percentage>>? ]#
Initial: not applicable (initial value comes from physical property)
Applies to: all
Inherited: no
Percentages: refer to size of background positioning area <em>minus</em> size of background image
Media: visual
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
</pre>

Expand All @@ -148,35 +134,25 @@ Corners</h2>
<h3 id=corner-sizing>
Corner Sizing: the 'border-radius property</h3>

<pre class='propdef'>
Name: border-radius
Value: [ <<length>> | <<percentage>> ]{1,4} [ / [ <<length>> | <<percentage>> ]{1,4} ]?
Initial: 0
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
Inherited: no
Percentages: n/a
Media: visual
Computed value: specified value
Animatable: no
Canonical order: n/a
<pre class="propdef">
Name: border-radius
Value: <<length-percentage>>{1,4} [ / <<length-percentage>>{1,4} ]?
Initial: 0
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
Inherited: no
</pre>

See [[CSS3BG]].

<h3 id=corner-shaping>
Corner Shaping: the 'corner-shape' property</h3>

<pre class='propdef'>
<pre class="propdef">
Name: corner-shape
Value: [round | bevel | scoop | notch]{1,4}
Value: [ round | bevel | scoop | notch ]{1,4}
Initial: round
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
Inherited: no
Percentages: n/a
Media: visual
Computed value: specified value
Animatable: no
Canonical order: n/a
</pre>

By default, non-zero border-radii define
Expand Down Expand Up @@ -219,15 +195,9 @@ Corner Shaping: the 'corner-shape' property</h3>
<h3 id="corners-shorthand">
Corner Shape and Size: the 'corners' shorthand</h3>

<pre class='propdef'>
<pre class="propdef shorthand">
Name: corners
Value: <<'corner-shape'>> || <<'border-radius'>>
Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Media: visual
Computed value: see individual properties
</pre>

The 'corners' shorthand sets 'corner-shape' and 'border-radius' in the same declaration.
Expand Down Expand Up @@ -266,34 +236,15 @@ Partial borders</h2>
<h3 id="border-limit">
Partial Borders: the 'border-limit' property</h3>

<table class=propdef>
<tr>
<th>Name:
<td><dfn>border-limit</dfn>
<tr>
<th>Value:
<td>all | [ sides | corners ] [ &lt;length&gt; | &lt;percentage&gt; ]?
| [ top | right | bottom | left ] [ &lt;length&gt; | &lt;percentage&gt; ]
<tr>
<th>Initial:
<td>round
<tr>
<th>Applies to:
<td>all elements, except table element when 'border-collapse' is
''collapse''
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>relative to border-box
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>as specified
</table>
<pre class="propdef">
Name: border-limit
Value: all | [ sides | corners ] <<length-percentage>>?
| [ top | right | bottom | left ] <<length-percentage>>
Initial: round
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
Inherited: no
Percentages: relative to border-box
</pre>

<p>By default, the entire border is drawn. However, border rendering can be
limited to only part of a border. The keyword specifies which part, and
Expand Down Expand Up @@ -341,34 +292,16 @@ Partial Borders: the 'border-limit' property</h3>
<h3 id="border-clip">
The 'border-clip' properties</h3>

<table class=propdef>
<tr>
<th>Name:
<td><dfn>border-clip</dfn>, <dfn>border-clip-top</dfn>, <dfn>border-clip-right</dfn>, <dfn>border-clip-bottom</dfn>, <dfn>border-clip-left</dfn>
<tr>
<th>Value:
<td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; ]+
<tr>
<th>Initial:
<td>normal
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>refer to length of border-edge side
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed&nbsp;value:
<td>''border-clip/normal'', or a list consisting of absolute lengths, or percentages as specified
</table>

<p class=issue>Should these properties be simplified to only accept <code>normal | [ &lt;length&gt; | &lt;percentage&gt; ] +</code>?
<pre class="propdef">
Name: border-clip, border-clip-top, border-clip-right, border-clip-bottom, border-clip-left
Value: normal | [ <<length-percentage>> | <<fraction>> ]+
Initial: normal
Inherited: no
Percentages: refer to length of border-edge side
Computed value: ''border-clip/normal'', or a list consisting of absolute lengths, or percentages as specified
</pre>

<p class=issue>Should these properties be simplified to only accept <code>normal | <<length-percentage>>+</code>?

<p>These properties split their respective borders into parts along
the border edge. The first part is visible, the second is invisible,
Expand Down