[css-shapes] <basic-shapes> etc. summary 3

Many decisions were made today today in the face-to-face meeting about CSS
Shapes level 1.

We resolved that we keep the current editor's draft syntax for inset() and
polygon()

inset() = inset( <shape-arg>{1,4} [ round <border-radius> ]? )
polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

We change circle() and ellipse() to use radial gradient syntax:

circle() = circle( [<size>] [at <position>] )
ellipse() = ellipse( [<size>] [at <position>] )

And we postpone rectangle() to level 2, because the way SVG and CSS define
rectangles is incompatible, and you can get a rectangle both with inset()
and polygon().

Then, we resolved to remove the dependency on box-sizing in basic shapes
in favor of a raft of new keywords for shapes defined by the relevant
boxes. So you can say:

shape-outside: border-box;

To wrap around a shape defined by the outside border edge. This includes
curvature from border-radius. But you can also use the keyword to
determine how percentages in a basic shape are resolved. So either of
these:

shape-outside: border-box circle(50%);
shape-outside: circle(50%) border-box;

will create a circle shape centered in the border box with a radius 50% of
the width of the border box. You can also use margin-box, padding-box and
content-box as keywords (these include curvature from border radius as
well, in just the same way as background-clip).

Thanks,

Alan

Received on Sunday, 10 November 2013 07:07:39 UTC