[css3-exclusions] Resolving shape-inside for inline content

Hi All,

I'm trying to understand which shape-inside should be used when there are multiple shapes applied to the content.

As I understand it, a shape-inside on a block can affect all descendant inline content. A common example would be:
<div style='shape-inside: circle(50%, 50%, 50%)'>
  <p>text</p>
  <p>text</p>
</div>

I couldn't find the exact wording, but I believe these [1][2] are the relevant areas of the specification.

My question is, if child blocks also have a shape-inside set (the paragraphs in the above example), which shape-inside should be used? To me, it seems like the shape-inside from the most immediate ancestor should be used.

This also comes into play when shape-inside is set on regions. For example, if the flow content and region both have a shape-inside set, which should be respected? The flow content shape-inside seems like the most immediate to me in this case.

Both of these are probably edge cases, but it would be useful to understand the expected behavior.

-Bear

[1] http://dev.w3.org/csswg/css3-exclusions/#declaring-shapes
[2] http://dev.w3.org/csswg/css3-exclusions/#shape-inside-property

Received on Friday, 22 February 2013 10:27:49 UTC