8000 csswg-drafts/css-backgrounds-4/Overview.html at d724c6764b1328f1c5b06903f92823c8a9933a2a · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
808 lines (699 loc) · 59.1 KB

Overview.html

File metadata and controls

808 lines (699 loc) · 59.1 KB
<li>top, <a href=#valuedef-top title="section 4.1">4.1</a>
</ul></div>
<h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>
Property index</span><a class=self-link href=#property-index></a></h2>
<div data-fill-with=property-index><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Canonical order<th scope=col>Computed value<th scope=col>Computed value<tbody>
<tr><th scope=row><a data-property="">backround-position</a><td>&lt;position&gt;#<td>top left<td>all<td>no<td>refer to size of background positioning area minus size of background image<td>visual<td><td><td>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<td>
<tr><th scope=row><a data-property="">border-radius</a><td>[ &lt;length&gt; | &lt;percentage&gt; ]{1,4} [ / [ &lt;length&gt; | &lt;percentage&gt; ]{1,4} ]?<td>0<td>all elements, except table element when border-collapse is collapse<td>no<td>n/a<td>visual<td>no<td>n/a<td>specified value<td>
<tr><th scope=row><a data-property="">corner-shape</a><td>[round | bevel | scoop | notch]{1,4}<td>round<td>all elements, except table element when border-collapse is collapse<td>no<td>n/a<td>visual<td>no<td>n/a<td>specified value<td>
<tr><th scope=row><a data-property="">corners</a><td>&lt;‘corner-shape’&gt; || &lt;‘border-radius’&gt;<td>see individual properties<td>see individual properties<td>see individual properties<td>see individual properties<td>visual<td><td><td>see individual properties<td>
<tr><th scope=row><a data-property="">border-limit</a><td>all | [ sides | corners ] [ &lt;length&gt; | &lt;percentage&gt; ]?
| [ top | right | bottom | left ] [ &lt;length&gt; | &lt;percentage&gt; ]<td>round<td>all elements, except table element when border-collapse is
collapse<td>no<td>relative to border-box<td>visual<td><td><td>as specified<td>
<tr><th scope=row><a data-property="">border-clip</a><td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; ]+<td>normal<td>all elements<td>no<td>refer to length of border-edge side<td>visual<td><td><td><td>normal, or a list consisting of absolute lengths, or percentages as specified
<tr><th scope=row><a data-property="">border-clip-top</a><td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; ]+<td>normal<td>all elements<td>no<td>refer to length of border-edge side<td>visual<td><td><td><td>normal, or a list consisting of absolute lengths, or percentages as specified
<tr><th scope=row><a data-property="">border-clip-right</a><td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; ]+<td>normal<td>all elements<td>no<td>refer to length of border-edge side<td>visual<td><td><td><td>normal, or a list consisting of absolute lengths, or percentages as specified
<tr><th scope=row><a data-property="">border-clip-bottom</a><td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; ]+<td>normal<td>all elements<td>no<td>refer to length of border-edge side<td>visual<td><td><td><td>normal, or a list consisting of absolute lengths, or percentages as specified
<tr><th scope=row><a data-property="">border-clip-left</a><td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; ]+<td>normal<td>all elements<td>no<td>refer to length of border-edge side<td>visual<td><td><td><td>normal, or a list consisting of absolute lengths, or percentages as specified</table></div>
<h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div 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).
<a href=#issue-648e34a3> ↵ </a></div><div class=issue>Add logical keywords
<a href=#issue-7b26b643> ↵ </a></div><div class=issue>
For <a class=css data-link-type=maybe href=#valuedef-scoop title=scoop>scoop</a> and <a class=css data-link-type=maybe href=#valuedef-notch title=notch>notch</a>, 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?
<a href=#issue-842710e0> ↵ </a></div><div class=issue>
Add a <span class=css data-link-type=maybe title=cubic-bezier()>cubic-bezier()</span> function for random other shapes?
Or some other functions?
<a href=#issue-05846e60> ↵ </a></div><div 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.
<a href=#issue-32661c58> ↵ </a></div><div class=issue>Should these properties be simplified to only accept <code>normal | [ &lt;length&gt; | &lt;percentage&gt; ] +</code>?
<a href=#issue-14d9ac8f> ↵ </a></div></div>