Skip to content

Commit 9661736

Browse files
astearnsastearns
committed
[css-shapes] Allow negative insets, disallow negative radii
1 parent b2c9a4b commit 9661736

File tree

2 files changed

+36
-21
lines changed

2 files changed

+36
-21
lines changed

‎css-shapes/Overview.html

Lines changed: 19 additions & 11 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=20131111>11 November 2013</span></span></span></h2>
66+
<span class=dt-updated><span class=value-title title=20131114>14 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>
@@ -244,7 +244,7 @@ <h2 class="heading settled heading" data-level=2 id=relation-to-box-model-and-fl
244244
A reduced <a data-link-type=dfn href=#float-area title="float area">float area</a> may have no effect
245245
on some line boxes
246246
that would normally be affected by the float.
247-
An empty <a data-link-type=dfn href=#float-area title="float area">float area</a>
247+
An <dfn data-dfn-type=dfn data-noexport="" id=empty-float-area>empty float area<a class=self-link href=#empty-float-area></a></dfn>
248248
(where the shape encloses no area)
249249
has no effect on line boxes.
250250

@@ -318,6 +318,7 @@ <h2 class="heading settled heading" data-level=2 id=relation-to-box-model-and-fl
318318

319319
<pre><code class=css>
320320
shape-outside: inset(50% 50% 50% 50%);
321+
shape-outside: inset(150% 150% 0% 0%);
321322
</code>
322323
</pre> </div>
323324

@@ -422,15 +423,21 @@ <h3 class="heading settled heading" data-level=3.1 id=supported-basic-shapes><sp
422423
of the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/box.html#propdef-margin title=margin>margin</a> shorthand,
423424
that let you set all four insets
424425
with one, two or four values.
425-
Negative values for any
426-
of these insets are invalid.
427426
</li>
428427
<li>
429428
The optional <a class=production data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#border-radius title=border-radius>&lt;‘border-radius’&gt;</a> argument(s)
430429
define rounded corners for the inset rectangle
431430
using the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-4/#border-radius title=border-radius>border-radius</a> shorthand syntax.
432431
</li>
433432
</ul>
433+
434+
<p> A pair of insets in either dimension
435+
that add up to more than the used dimension
436+
(such as left and right insets of 75% apiece)
437+
define a shape enclosing no area.
438+
For this specification,
439+
this results in an <a data-link-type=dfn href=#empty-float-area title="empty float area">empty float area</a>.
440+
434441
</dd>
435442
<dt><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-circle title=circle()>circle()<a class=self-link href=#funcdef-circle></a></dfn> =
436443
circle( [<a class="production css-code" data-link-type=type href=#typedef-shape-radius title="<shape-radius>">&lt;shape-radius&gt;</a>] [at <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a>]? | at <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a> )
@@ -445,7 +452,8 @@ <h3 class="heading settled heading" data-level=3.1 id=supported-basic-shapes><sp
445452
is resolved from the used width and height
446453
of the <a data-link-type=dfn href=#reference-box title="reference box">reference box</a> as <br>
447454
<code>sqrt((<em>width</em>)**2 +
448-
(<em>height</em>)**2))/sqrt(2)</code>
455+
(<em>height</em>)**2))/sqrt(2)</code>.
456+
Negative values are invalid.
449457
</li>
450458
<li>
451459
The position argument defines
@@ -455,16 +463,17 @@ <h3 class="heading settled heading" data-level=3.1 id=supported-basic-shapes><sp
455463
</ul>
456464
</dd>
457465
<dt><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-ellipse title=ellipse()>ellipse()<a class=self-link href=#funcdef-ellipse></a></dfn> =
458-
ellipse( [<a class="production css-code" data-link-type=type href=#typedef-shape-radius title="<shape-radius>">&lt;shape-radius&gt;</a>{1,2}] [at <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a>]? | at <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a> )
466+
ellipse( [<a class="production css-code" data-link-type=type href=#typedef-shape-radius title="<shape-radius>">&lt;shape-radius&gt;</a>{2}] [at <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a>]? | at <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#position-value title="<position>">&lt;position&gt;</a> )
459467
</dt>
460468
<dd>
461469
<ul>
462470
<li>
463-
The shape-radius argument represent
471+
The shape-radius arguments represent
464472
<strong>rx</strong>, and
465473
<strong>ry</strong>,
466474
the x-axis and y-axis radii
467475
of the ellipse.
476+
Negative values for either radius are invalid.
468477
</li>
469478
<li>
470479
The position argument defines
@@ -504,10 +513,7 @@ <h3 class="heading settled heading" data-level=3.1 id=supported-basic-shapes><sp
504513
polygons with less than three vertices
505514
(or with three or more vertices
506515
arranged to enclose no area)
507-
result in an empty <a data-link-type=dfn href=#float-area title="float area">float area</a>,
508-
which allows inline content
509-
to flow through all
510-
of the float’s box.
516+
result in an <a data-link-type=dfn href=#empty-float-area title="empty float area">empty float area</a>.
511517
</dd>
512518
</dl>
513519

@@ -872,6 +878,7 @@ <h2 class="no-num heading settled heading" id=change-log><span class=content>
872878
<h3 class="no-num heading settled heading" id=20130620><span class=content>
873879
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>
874880
<ul>
881+
<li>Allow negative insets, disallow negative radii</li>
875882
<li>Changed relevant to reference</li>
876883
<li>Remove box-sizing dependency, add relevant box keywords</li>
877884
<li>Changed circle() and ellipse() to use radial gradient syntax</li>
@@ -1059,6 +1066,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
10591066
</ul><li>&lt;box&gt;, <a href=#valuedef-box title="section 5.1">5.1</a>
10601067
<li>circle(), <a href=#funcdef-circle title="section 3.1">3.1</a>
10611068
<li>ellipse(), <a href=#funcdef-ellipse title="section 3.1">3.1</a>
1069+
<li>empty float area, <a href=#empty-float-area title="section 2">2</a>
10621070
<li>&lt;fill-rule&gt;, <a href=#typedef-fill-rule title="section 3.1">3.1</a>
10631071
<li>Float area, <a href=#float-area title="section 1.3">1.3</a>
10641072
<li>&lt;image&gt;, <a href=#valuedef-image title="section 5.1">5.1</a>

‎css-shapes/Overview.src.html

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ <h2 id="relation-to-box-model-and-float-behavior">
122122
A reduced <a>float area</a> may have no effect
123123
on some line boxes
124124
that would normally be affected by the float.
125-
An empty <a>float area</a>
125+
An <dfn>empty float area</dfn>
126126
(where the shape encloses no area)
127127
has no effect on line boxes.
128128

@@ -198,6 +198,7 @@ <h2 id="relation-to-box-model-and-float-behavior">
198198

199199
<pre><code class="css">
200200
shape-outside: inset(50% 50% 50% 50%);
201+
shape-outside: inset(150% 150% 0% 0%);
201202
</code>
202203
</pre>
203204
</div>
@@ -305,15 +306,21 @@ <h3 id="supported-basic-shapes">
305306
of the 'margin' shorthand,
306307
that let you set all four insets
307308
with one, two or four values.
308-
Negative values for any
309-
of these insets are invalid.
310309
</li>
311310
<li>
312311
The optional <<'border-radius'>> argument(s)
313312
define rounded corners for the inset rectangle
314313
using the 'border-radius' shorthand syntax.
315314
</li>
316315
</ul>
316+
317+
A pair of insets in either dimension
318+
that add up to more than the used dimension
319+
(such as left and right insets of 75% apiece)
320+
define a shape enclosing no area.
321+
For this specification,
322+
this results in an <a>empty float area</a>.
323+
317324
</dd>
318325
<dt><dfn>circle()</dfn> =
319326
circle( [<<shape-radius>>] [at <<position>>]? | at <<position>> )
@@ -328,7 +335,8 @@ <h3 id="supported-basic-shapes">
328335
is resolved from the used width and height
329336
of the <a>reference box</a> as <br>
330337
<code>sqrt((<em>width</em>)**2 +
331-
(<em>height</em>)**2))/sqrt(2)</code>
338+
(<em>height</em>)**2))/sqrt(2)</code>.
339+
Negative values are invalid.
332340
</li>
333341
<li>
334342
The position argument defines
@@ -338,16 +346,17 @@ <h3 id="supported-basic-shapes">
338346
</ul>
339347
</dd>
340348
<dt><dfn>ellipse()</dfn> =
341-
ellipse( [<<shape-radius>>{1,2}] [at <<position>>]? | at <<position>> )
349+
ellipse( [<<shape-radius>>{2}] [at <<position>>]? | at <<position>> )
342350
</dt>
343351
<dd>
344352
<ul>
345353
<li>
346-
The shape-radius argument represent
354+
The shape-radius arguments represent
347355
<strong>rx</strong>, and
348356
<strong>ry</strong>,
349357
the x-axis and y-axis radii
350358
of the ellipse.
359+
Negative values for either radius are invalid.
351360
</li>
352361
<li>
353362
The position argument defines
@@ -387,10 +396,7 @@ <h3 id="supported-basic-shapes">
387396
polygons with less than three vertices
388397
(or with three or more vertices
389398
arranged to enclose no area)
390-
result in an empty <a>float area</a>,
391-
which allows inline content
392-
to flow through all
393-
of the float's box.
399+
result in an <a>empty float area</a>.
394400
</dd>
395401
</dl>
396402

@@ -789,6 +795,7 @@ <h2 class="no-num" id="change-log">
789795
<h3 class="no-num" id="20130620">
790796
Since <a href="http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/">June 20th 2013</a></h3>
791797
<ul>
798+
<li>Allow negative insets, disallow negative radii</li>
792799
<li>Changed relevant to reference</li>
793800
<li>Remove box-sizing dependency, add relevant box keywords</li>
794801
<li>Changed circle() and ellipse() to use radial gradient syntax</li>

0 commit comments

Comments
 (0)