[css3-exclusions] Shape-outside on floats

Hi Alan,

We were doing some quick brainstorming about shapes this morning, and wanted to iron out some questions. From the spec, floats with shape-outside use the shape-outside's bounding box to position the float [1]. Where does the float element position itself within the float area? It seems like it should position itself such that it lines up with the shape-outside offsets.

For example, if the shape outside is larger than the element (eg circle(50%, 50%, 150%)), then content inside the float should lay out in the center of the circle [2]. In this case, shape-inside would default to outside-shape. If we are clipping shape-inside to the content box, it would occupy a smaller area.

If, however, the shape-outside is smaller than the current element (eg circle(50%, 50%, 25%)), then shape-inside would default to outside-shape and respect the same circle [3]. If we were to add a border, (border: 1px solid green), you would still see an outline larger than the shape.

One of the odd edge cases is for a shape-outside smaller than the float element, where the float element's shape-inside is set to auto [4]. In that case, content could potentially overlap, which would be odd.

Is the behavior outlined here correct?


[1] http://dev.w3.org/csswg/css3-exclusions/#relation-to-box-model-and-float-behavior
[2] https://dl.dropbox.com/u/1558588/www-style/shape-outside-floats-01.png
[3] https://dl.dropbox.com/u/1558588/www-style/shape-outside-floats-02.png
[4] https://dl.dropbox.com/u/1558588/www-style/shape-outside-floats-03.png

Received on Friday, 26 October 2012 20:45:34 UTC