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