Skip to content

Commit f9f2aaf

Browse files
astearnsastearns
committed
[css-shapes] redoing interpolation again
1 parent f0868c8 commit f9f2aaf

2 files changed

Lines changed: 63 additions & 69 deletions

File tree

‎css-shapes/Overview.html‎

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
</p>
6464
<h1 class="p-name no-ref" id=title>CSS Shapes Module Level 1</h1>
6565
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
66-
<span class=dt-updated><span class=value-title title=20131114>14 November 2013</span></span></span></h2>
66+
<span class=dt-updated><span class=value-title title=20131118>18 November 2013</span></span></span></h2>
6767
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-shapes/>http://www.w3.org/TR/css-shapes/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a>
6868
<dt>Feedback:</dt>
6969
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-shapes%5D%20feedback">www-style@w3.org</a>
@@ -529,7 +529,7 @@ <h3 class="heading settled heading" data-level=3.1 id=supported-basic-shapes><sp
529529
Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.
530530
<ul>
531531
<li>
532-
<strong>closest-side</strong>
532+
<dfn data-dfn-type=dfn data-noexport="" id=closest-side>closest-side<a class=self-link href=#closest-side></a></dfn>
533533
uses the length from the center
534534
of the shape to the closest side
535535
of the <a data-link-type=dfn href=#reference-box title="reference box">reference box</a>.
@@ -541,7 +541,7 @@ <h3 class="heading settled heading" data-level=3.1 id=supported-basic-shapes><sp
541541
in the radius dimension.
542542
</li>
543543
<li>
544-
<strong>farthest-side</strong>
544+
<dfn data-dfn-type=dfn data-noexport="" id=farthest-side>farthest-side<a class=self-link href=#farthest-side></a></dfn>
545545
uses the length from the center
546546
of the shape to the farthest side
547547
of the <a data-link-type=dfn href=#reference-box title="reference box">reference box</a>.
@@ -560,41 +560,40 @@ <h3 class="heading settled heading" data-level=3.2 id=basic-shape-interpolation>
560560

561561
<p> For interpolating between
562562
one basic shape and a second,
563-
the rules described below are applied.
563+
the rules below are applied.
564564

565565
<p> <ul>
566566
<li>
567-
For interpolating between two shapes that are type inset rectangle, ellipse or circle:
568-
<ul>
569-
<li>
570-
Replace each inset rectangle with a temporary inset rectangle with offsets relative to the margin-box.
571-
</li>
572-
<li>
573-
Replace each circle and ellipse with a temporary inset rectangle with offsets relative to the margin-box, and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#border-radius title=border-radius>border-radius</a> values to make the inset rectangle equivalent to the original circle or ellipse
574-
</li>
575-
<li>
576-
Interpolate between each value of the temporary inset rectangles.
577-
</li>
578-
</ul>
567+
If the second shape uses
568+
a different <a data-link-type=dfn href=#reference-box title="reference box">reference box</a>
569+
than the first,
570+
replace the second shape
571+
with a temporary equivalent shape
572+
that uses the <a data-link-type=dfn href=#reference-box title="reference box">reference box</a>
573+
of the first shape.
574+
</li>
575+
<li>
576+
If both shapes are the same type,
577+
that type is <a class=css data-link-type=maybe href=#funcdef-ellipse title=ellipse()>ellipse()</a> or <a class=css data-link-type=maybe href=#funcdef-circle title=circle()>circle()</a>,
578+
and none of the radii use
579+
the <a class=css data-link-type=maybe href=#closest-side title=closest-side>closest-side</a> or <a class=css data-link-type=maybe href=#farthest-side title=farthest-side>farthest-side</a> keywords,
580+
interpolate between each value
581+
in the shape functions.
579582
</li>
580583
<li>
581-
If both basic shapes are of type polygon
582-
and if both polygons have the same number of vertices:
583-
<ul>
584-
<li>
585-
If the polygons use a different <a data-link-type=dfn href=#reference-box title="reference box">reference box</a>, replace the second polygon with a temporary equivalent polygon that uses the <a data-link-type=dfn href=#reference-box title="reference box">reference box</a> of the first.
586-
<li>
587-
Interpolate between each value.
588-
</li>
589-
</ul>
584+
If both shapes are of type <a class=css data-link-type=maybe href=#funcdef-inset title=inset()>inset()</a>,
585+
interpolate between each value
586+
in the shape functions.
590587
</li>
591588
<li>
592-
In all other cases:
593-
<ul>
594-
<li>
595-
No interpolation is specified.
596-
</li>
597-
</ul>
589+
If both shapes are of type <a class=css data-link-type=maybe href=#funcdef-polygon title=polygon()>polygon()</a>
590+
and both polygons
591+
have the same number of vertices,
592+
interpolate between each value
593+
in the shape functions.
594+
</li>
595+
<li>
596+
In all other cases no interpolation is specified.
598597
</li>
599598
</ul>
600599

@@ -878,24 +877,21 @@ <h2 class="no-num heading settled heading" id=change-log><span class=content>
878877
<h3 class="no-num heading settled heading" id=20130620><span class=content>
879878
Since <a href=http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/>June 20th 2013</a></span><a class=self-link href=#20130620></a></h3>
880879
<ul>
880+
<li>Updated basic-shape interpolation</li>
881881
<li>Allow negative insets, disallow negative radii</li>
882882
<li>Changed relevant to reference</li>
883883
<li>Remove box-sizing dependency, add relevant box keywords</li>
884884
<li>Changed circle() and ellipse() to use radial gradient syntax</li>
885885
<li>Postponed rectangle() to level 2</li>
886886
<li>Clarified shape-from-image sizing and positioning</li>
887887
<li>Change inset-rectangle() to inset()</li>
888-
<li>Much basic shape syntax bikeshedding</li>
889-
<li>Use Concrete Object Size Resolution from CSS3-IMAGES in shape from image</li>
890888
<li>Future-proof shape-image-threshold to possibly apply to luminance</li>
891889
<li>Added CORS fetching to shape-outside URLs</li>
892890
<li>Changed shape-outside value from &lt;uri&gt; to &lt;image&gt;</li>
893-
<li>Fixed basic shape grammar to use comma separators</li>
894891
<li>Remove 'percentages based on auto-sizing resolve to 0'</li>
895892
<li>Change initial value of shape-image-threshold to 0.0</li>
896893
<li>Change float positioning to be unaffected by shape-outside</li>
897894
<li>Shapes on floats clipped to float’s margin box</li>
898-
<li>Inline content constrained to at least the float’s farthest margin edge</li>
899895
</ul>
900896

901897
<h3 class="no-num heading settled heading" id=20120503><span class=content>
@@ -1065,8 +1061,10 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
10651061
<li>value for shape-outside, <a href=#valuedef-basic-shape title="section 5.1">5.1</a>
10661062
</ul><li>&lt;box&gt;, <a href=#valuedef-box title="section 5.1">5.1</a>
10671063
<li>circle(), <a href=#funcdef-circle title="section 3.1">3.1</a>
1064+
<li>closest-side, <a href=#closest-side title="section 3.1">3.1</a>
10681065
<li>ellipse(), <a href=#funcdef-ellipse title="section 3.1">3.1</a>
10691066
<li>empty float area, <a href=#empty-float-area title="section 2">2</a>
1067+
<li>farthest-side, <a href=#farthest-side title="section 3.1">3.1</a>
10701068
<li>&lt;fill-rule&gt;, <a href=#typedef-fill-rule title="section 3.1">3.1</a>
10711069
<li>Float area, <a href=#float-area title="section 1.3">1.3</a>
10721070
<li>&lt;image&gt;, <a href=#valuedef-image title="section 5.1">5.1</a>

‎css-shapes/Overview.src.html‎

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@ <h3 id="supported-basic-shapes">
412412
Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.
413413
<ul>
414414
<li>
415-
<strong>closest-side</strong>
415+
<dfn>closest-side</dfn>
416416
uses the length from the center
417417
of the shape to the closest side
418418
of the <a>reference box</a>.
@@ -424,7 +424,7 @@ <h3 id="supported-basic-shapes">
424424
in the radius dimension.
425425
</li>
426426
<li>
427-
<strong>farthest-side</strong>
427+
<dfn>farthest-side</dfn>
428428
uses the length from the center
429429
of the shape to the farthest side
430430
of the <a>reference box</a>.
@@ -443,41 +443,40 @@ <h3 id='basic-shape-interpolation'>
443443

444444
For interpolating between
445445
one basic shape and a second,
446-
the rules described below are applied.
446+
the rules below are applied.
447447

448448
<ul>
449449
<li>
450-
For interpolating between two shapes that are type inset rectangle, ellipse or circle:
451-
<ul>
452-
<li>
453-
Replace each inset rectangle with a temporary inset rectangle with offsets relative to the margin-box.
454-
</li>
455-
<li>
456-
Replace each circle and ellipse with a temporary inset rectangle with offsets relative to the margin-box, and 'border-radius' values to make the inset rectangle equivalent to the original circle or ellipse
457-
</li>
458-
<li>
459-
Interpolate between each value of the temporary inset rectangles.
460-
</li>
461-
</ul>
450+
If the second shape uses
451+
a different <a>reference box</a>
452+
than the first,
453+
replace the second shape
454+
with a temporary equivalent shape
455+
that uses the <a>reference box</a>
456+
of the first shape.
457+
</li>
458+
<li>
459+
If both shapes are the same type,
460+
that type is ''ellipse()'' or ''circle()'',
461+
and none of the radii use
462+
the ''closest-side'' or ''farthest-side'' keywords,
463+
interpolate between each value
464+
in the shape functions.
462465
</li>
463466
<li>
464-
If both basic shapes are of type polygon
465-
and if both polygons have the same number of vertices:
466-
<ul>
467-
<li>
468-
If the polygons use a different <a>reference box</a>, replace the second polygon with a temporary equivalent polygon that uses the <a>reference box</a> of the first.
469-
<li>
470-
Interpolate between each value.
471-
</li>
472-
</ul>
467+
If both shapes are of type ''inset()'',
468+
interpolate between each value
469+
in the shape functions.
473470
</li>
474471
<li>
475-
In all other cases:
476-
<ul>
477-
<li>
478-
No interpolation is specified.
479-
</li>
480-
</ul>
472+
If both shapes are of type ''polygon()''
473+
and both polygons
474+
have the same number of vertices,
475+
interpolate between each value
476+
in the shape functions.
477+
</li>
478+
<li>
479+
In all other cases no interpolation is specified.
481480
</li>
482481
</ul>
483482

@@ -795,24 +794,21 @@ <h2 class="no-num" id="change-log">
795794
<h3 class="no-num" id="20130620">
796795
Since <a href="http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/">June 20th 2013</a></h3>
797796
<ul>
797+
<li>Updated basic-shape interpolation</li>
798798
<li>Allow negative insets, disallow negative radii</li>
799799
<li>Changed relevant to reference</li>
800800
<li>Remove box-sizing dependency, add relevant box keywords</li>
801801
<li>Changed circle() and ellipse() to use radial gradient syntax</li>
802802
<li>Postponed rectangle() to level 2</li>
803803
<li>Clarified shape-from-image sizing and positioning</li>
804804
<li>Change inset-rectangle() to inset()</li>
805-
<li>Much basic shape syntax bikeshedding</li>
806-
<li>Use Concrete Object Size Resolution from CSS3-IMAGES in shape from image</li>
807805
<li>Future-proof shape-image-threshold to possibly apply to luminance</li>
808806
<li>Added CORS fetching to shape-outside URLs</li>
809807
<li>Changed shape-outside value from &lt;uri&gt; to &lt;image&gt;</li>
810-
<li>Fixed basic shape grammar to use comma separators</li>
811808
<li>Remove 'percentages based on auto-sizing resolve to 0'</li>
812809
<li>Change initial value of shape-image-threshold to 0.0</li>
813810
<li>Change float positioning to be unaffected by shape-outside</li>
814811
<li>Shapes on floats clipped to float's margin box</li>
815-
<li>Inline content constrained to at least the float's farthest margin edge</li>
816812
</ul>
817813

818814
<h3 class="no-num" id="20120503">

0 commit comments

Comments
 (0)