drafts: css-backgrounds-4/Overview.bs@5be73fbc8592 (annotated)

css-backgrounds-4/Overview.bs@5be73fbc8592 (annotated)

css-backgrounds-4/Overview.bs

Sun, 31 Jan 2016 15:42:31 -0800

author: Peter Linss <[email protected]>
date: Sun, 31 Jan 2016 15:42:31 -0800
changeset 16986: 5be73fbc8592
parent 16545: 022a9eb33b39
child 16989: 255258410d1b
permissions: -rw-r--r--

change //dev.w3.org/csswg/ urls to //drafts.csswg.org/

 <h1>CSS Backgrounds and Borders Module Level 4</h1>
 <pre class='metadata'>
 Shortname: css-backgrounds
 Level: 4
 Status: ED
 Work Status: Exploring
 Group: csswg
 TR: http://www.w3.org/TR/css-backgrounds-4/
 ED: https://drafts.csswg.org/css-backgrounds-4/
 Editor: Bert Bos, W3C, [email protected]
 Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact
 Editor: Lea Verou, Invited Expert, http://lea.verou.me/about/
 Abstract: This module contains the features of CSS relating to the borders and backgrounds of boxes on the page. It includes and extends the functionality of <a href="http://www.w3.org/TR/css3-background/">CSS Backgrounds and Borders Level&nbsp;3</a>. [[CSS3BG]] The main extensions compared to level&nbsp;3 are shaping ('corner-shape') and clipping borders ('border-clip'), logical background positions ('background-position'), and the ''extend'' ability of 'background-repeat'.
 Ignored Terms:
 Warning: Not Ready
 </pre>
 <h2 id="intro">
 Introduction</h2>
 	<p class="issue">
 		This module is currently maintained as a diff against Level 3.
 		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'>
 		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.
 	<p>Where
 	<pre class=prod><dfn><var>&lt;position&gt;</var></dfn> = [
 	  [ left | center | right | top | bottom | start | end | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
 	|
 	  [ left | center | right | x-start | x-end | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
 	  [ top | center | bottom | y-start | y-end | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
 	|
 	  [ center | [ left | right | x-start | x-end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
 	  [ center | [ top | bottom | y-start | y-end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
 	|
 	  [ center | [ start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
 	  [ center | [ start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]	]</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 ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
 		Initial: left
 		Applies to: all
 		Inherited: no
 		Percentages: refer to width 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 horizontal component.
 	<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> ]? ]#
 		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.
 	<pre class='propdef'>
 		Name: background-position-inline
 		Value: [ center | [ start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
 		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.
 	<pre class='propdef'>
 		Name: background-position-block
 		Value: [ center | [ start | end ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
 		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>
 	This property specifies the background position's block-axis component.
 <h2 id="corners">
 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>
 	See [[CSS3BG]].
 <h3 id=corner-shaping>
 Corner Shaping: the 'corner-shape' property</h3>
 	<pre class='propdef'>
 		Name:            corner-shape
 		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
 	a quarter-ellipse that rounds the affected corners.
 	However in some cases, other corner shapes are desired.
 	The 'corner-shape' property specifies a reinterpretation of the radii
 	to define other corner shapes.
 	<dl dfn-type="value" dfn-for="corner-shape">
 		<dt><dfn>''round''</dfn>
 		<dd>Border radii define a convex elliptical curve at the corner.
 		<dt><dfn>''bevel''</dfn>
 		<dd>Border radii define a diagonal slice at the corner.
 		<dt><dfn>''scoop''</dfn>
 		<dd>Border radii define a concave elliptical curve at the corner.
 		<dt><dfn>''notch''</dfn>
 		<dd>Border radii define a concave rectangular notch at the corner.
 	</dl>
 	<div class="example">
 		For example, the following declarations create a right-pointing next button.
 		<pre>
 			a {
 				border-radius: 0 2em 2em 0;
 				corner-shape: bevel;
 				padding: 0.5em 2em 0.5em 0.5em;
 		</pre>
 		As a fallback in UAs that don't support 'border-radius',
 		the right side would be rounded rather than pointy.
 	</div>
 	<p class="issue">
 		For ''scoop'' and ''notch'', how do the color/style/width transitions work?
 		Do they transition once in the middle, or alternate to match the topness/sideness of that segment of the border?
 	<p class="issue">
 		Add a ''cubic-bezier()'' function for random other shapes?
 		Or some other functions?
 <h3 id="corners-shorthand">
 Corner Shape and Size: the 'corners' shorthand</h3>
 	<pre class='propdef'>
 		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.
 	If either is omitted, it is reset to its initial value.
 	<div class="example">
 		For example, the following declaration creates a diamond shape.
 		<pre>corners: bevel 50%;</pre>
 		In UAs that don't support 'corner-shape', the declaration is ignored
 		(falls back to a rectangle).
 	</div>
 	<div class="example">
 		In this example, the first declaration creates tabs with vertical sides and rounded corners using 'border-radius',
 		while the second example makes them trapezoid-shaped in UAs that support 'corners'.
 		<pre>
 			border-radius: 0.25em 0.25em 0 0;
 			corners: bevel 0.25em 0.25em 0 0 / 50% 50% 0 0;
 		</pre>
 	</div>
 <h2 id="partial-borders">
 Partial borders</h2>
 	<p>CSS borders traditionally cover an entire border edge. Sometimes,
 	however, it can be useful to hide some parts of the border.
 	<p class="issue">
 		Here are two proposals for doing this:
 		the second one is from GCPM, the first one is an attempt to recast it more readably.
 		The names are terrible, known problem, proposals accepted.
 		There is a problem with conceiving this as clipping:
 		if you have dotted borders, you want whole dots always, not parts of dots.
 		So it should be a drawing limit, not a clip.
 <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>
 	<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
 		the length or percentage specifies how much.
 	<dl dfn-type="value" dfn-for="border-limit">
 		<dt><dfn>''sides''</dfn>
 			<dd>The sides are drawn up to but not including the corners (as defined
 			by the border radii). A length or percentage is measured from the center
 			of each side: ''50%'' draws the middle 50% of the border; by default the
 			entire side is drawn.
 		<dt><dfn>''corners''</dfn>
 			<dd>The corners are drawn plus the specified distance into the sides if
 			specified. A length is measured from the closest edge of the corner area.
 			A percentage is measured from the absolute corner of the border box.
 		<dt><dfn>''left''</dfn>
 		<dt><dfn>''right''</dfn>
 			<dd>For the left and right (vertical) sides, draws the entire side and
 			corner. For the top and bottom (horizontal) sides, draws the left/right
 			portion, as specified. Distances are measured as for ''corners''.
 		<dt><dfn>''top''</dfn>
 		<dt><dfn>''bottom''</dfn>
 			<dd>For the top and bottom (horizontal) sides, draws the entire side and
 			corner. For the left and right (vertical) sides, draws the top/bottom
 			portion, as specified. Distances are measured as for ''corners''.
 	</dl>
 	<div class="example">
 		<p>The following example draws only the middle 50% of the sides.</p>
 		<pre>box { border: solid; border-parts: sides 50% }</pre>
 		<p>The following example draws only the curved parts of the corners.</p>
 		<pre>box { border: solid; border-radius: 1em 2em; border-parts: corners; }</pre>
 		<p>The following example draws only the left 4em of the top border.</p>
 		<pre>box { border-top: solid; border-parts: left 4em; }
 		<p>The following example draws only the first 10px of each corner:</p>
 		<pre>box { border: solid; border-parts: corners 10px; }</pre>
 		<p>The following example draws the curved part of the corner plus 5px
 		along ths sides:</p>
 		<pre>box { border: solid; border-radius: 5px; border-shape: scoop; border-parts: corners 5px; }</pre>
 		<p>The following example draws the curved part of the corner and all of
 		the side except the middle 40%.</p>
 		<pre>box { border: solid; border-radius: 5px; border-shape: scoope; border-parts: corners 30%; }</pre>
 	</div>
 <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>?
 		<p>These properties split their respective borders into parts along
 		the border edge. The first part is visible, the second is invisible,
 		the third part is visible, etc. Parts can be specified with lengths,
 		percentages, or fractions (expressed by the ''fr'' unit, as per
 		[[CSS3GRID]] or its <a href="https://drafts.csswg.org/css3-grid/">editor's
 		edition</a>).
 		The ''border-clip/normal'' value means
 		that the border is not split, but shown normally.
 		<p>'border-clip' is a shorthand property for the four individual properties.
 		<p>If the listed parts are shorter than the border, any remaining
 		border is split proportionally between the specified fractions. If
 		there are no fractions, the behavior is as if ''1fr'' had been
 		specified at the end of the list.
 		<p>If the listed parts are longer than the border, the specified parts
 		will be shown in full until the end of the border. In this case, all
 		fractions will be zero.
 		<p>For horizontal borders, parts are listed from left to right. For
 		vertical borders, parts are listed from top to bottom.
 		<p>The exact border parts are determined by laying out the specified border
 		parts with all fractions initially set to zero. Any remaining border is
 		split proportionally between the fractions specified.
 		<div class="example">
 			<pre>border-clip: 10px 1fr 10px;</pre>
 			<div style="position: relative; width: 250px; height: 150px; background: white;">
 				<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
 					<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
 					<div style="position: absolute; background: white; left: -5px; top: 15px; height: 70px; width: 210px"></div>
 				</div>
 			</div>
 		</div>
 		<div class="example">
 			<pre>
 				border-clip-top: 10px 1fr 10px;
 				border-clip-bottom: 10px 1fr 10px;
 				border-clip-right: 5px 1fr 5px;
 				border-clip-left: 5px 1fr 5px;
 			</pre>
 			<div style="position: relative; width: 250px; height: 150px; background: white;">
 				<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
 					<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
 					<div style="position: absolute; background: white; left: -5px; top: 5px; height: 90px; width: 210px"></div>
 				</div>
 			</div>
 		</div>
 		<div class="example">
 			<p>By making the first part have zero length, the inverse border of
 			the previous example can easily be created:
 			<pre>
 				border-clip-top: 0 10px 1fr 10px;
 				border-clip-bottom: 0 10px 1fr 10px;
 				border-clip-right: 0 5px 1fr 5px;
 				border-clip-left: 0 5px 1fr 5px;
 			</pre>
 		<div style="position: relative; width: 250px; height: 150px; background: white;">
 			<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
 				<div style="position: absolute; background: white; left: -5px; top: -5px; height: 10px; width: 15px"></div>
 				<div style="position: absolute; background: white; right: -5px; top: -5px; height: 10px; width: 15px"></div>
 				<div style="position: absolute; background: white; left: -5px; top: 95px; height: 10px; width: 15px"></div>
 				<div style="position: absolute; background: white; right: -5px; top: 95px; height: 10px; width: 15px"></div>
 			</div>
 		</div>
 	</div>
 		<div class="example">
 			<pre>
 				border: thin solid black;
 				border-clip: 0 1fr; /* hide borders */
 				border-clip-top: 10px 1fr 10px; /* make certain borders visible */
 				border-clip-bottom: 10px 1fr 10px;
 			</pre>
 			<div style="position: relative; width: 250px; height: 150px; background: white;">
 				<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
 					<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
 					<div style="position: absolute; background: white; left: -5px; top: 0px; height: 100px; width: 210px"></div>
 				</div>
 			</div>
 	</div>
 	<div class="example">
 		<pre>
 	<!-- -->border-top: thin solid black;
 	<!-- -->border-bottom: thin solid black;
 	<!-- -->border-clip-top: 10px;
 	<!-- -->border-clip-bottom: 10px;
 	<!-- --></pre>
 		<div style="position: relative; width: 250px; height: 150px; background: white;">
 			<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
 				<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div>
 				<div style="position: absolute; background: white; left: -5px; top: 0px; height: 100px; width: 210px"></div>
 			</div>
 		</div>
 	</div>
 	<div class="example">
 		<pre>
 			border-top: thin solid black;
 			border-clip: 10px;
 		</pre>
 		<div style="position: relative; width: 250px; height: 150px; background: white;">
 			<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
 				<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div>
 				<div style="position: absolute; background: white; left: -5px; top: 0px; height: 110px; width: 210px"></div>
 			</div>
 		</div>
 	</div>
 	<div class="example">
 		<p>This rendering:
 		<div style="background: white; padding: 0.2em 0.5em">
 			<pre style="margin-left: 0">
 				A sentence consists of words&#xB9;.
 			</pre>
 			<div style="width: 3em; height: 2px; background: black"></div>
 			<pre style="margin-left: 0">
 				&#xB9; Most often.
 			</pre>
 		</div>
 		can be achieved with this style sheet:
 		<pre>
 			@footnote {
 				border-top: thin solid black;
 				border-clip: 4em;
 			}
 		</pre>
 	</div>
 	<div class="example">
 		<pre>
 			border: 2px solid black;
 			border-top-parts: repeat(10px 10px);
 		</pre>
 		<p>In this example, the repeat pattern is shown five times and there is, by coincidence,	no remaining border.
 		<div style="position: relative; width: 100px; background: white; padding: 20px">
 			<div style="border: 2px solid black; height: 40px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 30px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 50px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 70px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 90px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 110px"></div>
 		</div>
 	</div>
 	<div class="example">
 		<pre>
 			border: 2px solid black;
 			border-top-parts: repeat(10px 10px);
 		</pre>
 		<p>In this example, the repeat pattern is shown five times. The box in this example is slightly wider than the box in the previous example. The remaining border is taken up by a fraction, as if this code had been specified:
 		<pre>
 			border: 2px solid black;
 			border-top-parts: repeat(10px 10px) 1fr;
 		</pre>
 		<div style="position: relative; width: 105px; background: white; padding: 20px">
 			<div style="border: 2px solid black; height: 40px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 30px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 50px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 70px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 90px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 110px"></div>
 			<div style="position: absolute; background: red; width: 5px; height: 2px; top: 20px; left: 120px"></div>
 		</div>
 		<p>The fragment is shown in red for illustrative purposes; it should be shown in black by a compliant UA.
 	</div>
 	<div class="example">
 		<pre>
 			border: 4px solid black;
 			border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;
 		</pre>
 		<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
 		<div style="position: relative; width: 192px; background: white; padding: 40px">
 			<div style="border: 4px solid black; height: 40px"></div>
 			<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 80px"></div>
 			<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 100px"></div>
 			<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 126px"></div>
 			<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 166px"></div>
 			<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 186px"></div>
 		</div>
 		<p>The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
 	</div>
 	<div class="example">
 		<pre>
 			border: 4px solid black;
 			border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
 		</pre>
 		<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
 		<div style="position: relative; width: 192px; background: white; padding: 40px">
 			<div style="border: 4px solid black; height: 40px"></div>
 			<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 80px"></div>
 			<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 100px"></div>
 			<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 126px"></div>
 			<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 166px"></div>
 			<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 186px"></div>
 		</div>
 		<p>The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
 	</div>
 	<div class="example">
 		<pre>
 			border: 4px solid black;
 			border-clip-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
 		</pre>
 		<p>All but one of the visible border parts are represented as fractions in this example. The length of these border parts will change when the width of the element changes. Here is one rendering where 1fr ends up being 10px:
 		<div style="position: relative; width: 190px; background: white; padding: 40px">
 			<div style="border: 4px solid black; border-top: none; height: 40px"></div>
 			<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 40px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 70px"></div>
 			<div style="position: absolute; background: red; width: 20px; height: 4px; top: 40px; left: 80px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 100px"></div>
 			<div style="position: absolute; background: red; width: 10px; height: 4px; top: 40px; left: 110px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 120px"></div>
 			<div style="position: absolute; background: black; width: 10px; height: 4px; top: 40px; left: 130px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 140px"></div>
 			<div style="position: absolute; background: red; width: 10px; height: 4px; top: 40px; left: 150px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 160px"></div>
 			<div style="position: absolute; background: red; width: 20px; height: 4px; top: 40px; left: 170px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 190px"></div>
 			<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 200px"></div>
 		</div>
 		<p>Here is another rendering where 1fr ends up being 30px:
 		<div style="position: relative; width: 440px; background: white; padding: 40px">
 			<div style="border: 4px solid black; border-top: none; height: 40px"></div>
 			<div style="position: absolute; background: red; width: 90px; height: 4px; top: 40px; left: 40px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 130px"></div>
 			<div style="position: absolute; background: red; width: 60px; height: 4px; top: 40px; left: 140px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 200px"></div>
 			<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 210px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 240px"></div>
 			<div style="position: absolute; background: black; width: 10px; height: 4px; top: 40px; left: 250px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 260px"></div>
 			<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 270px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 300px"></div>
 			<div style="position: absolute; background: red; width: 60px; height: 4px; top: 40px; left: 310px"></div>
 			<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 370px"></div>
 			<div style="position: absolute; background: red; width: 90px; height: 4px; top: 40px; left: 390px"></div>
 		</div>
 		<p>The fragments are shown in red for illustrative purposes; they should be black in compliant UAs.
 	</div>
 <h2 id="changes">
 Changes</h2>
 <h3 id="level-changes">
 Additions Since Level 3</h3>
 	<p class="issue">Additions are a work in progress... here's what we're planning to add. :)
 	<ul>
 		<li>logical 'background-position' values (''background-position/start'', ''background-position/end'')
 		<li>the ''extend'' keyword of 'background-repeat'
 		<li>'corner-shape'
 		<li>multiple borders per element
 		<li>logical border properties
 		<li><a href="#partial-borders">Partial Borders</a> (make part of border shorthand as well!)
 		<li><a href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0314.html">More <css>border-radius</css> shorthands</a> for doing both corners on a side at once.
 		<li>Splitting horizontal / vertical spread radius for box-shadow, if we can come up with a sane syntax for it.
 	</ul>
 <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.

Mercurial > drafts / annotate

css-backgrounds-4/Overview.bs@5be73fbc8592 (annotated)

css-backgrounds-4/Overview.bs