Re: [css3-exclusions] how to handle exclusion shape-inside overflow

I think that there are two questions here.

1. What is the correct behavior when the last line in a shape-inside content area is only partially contained by that shape?
2. Where does inline content begin to lay out after it has overflowed the shape-inside?

For the first question, I think that there are three options that make sense (see diagram [1]):
Option 1. Inline content is not allowed to overlap the bottom edge of a shape-inside. The line box that would overlap the bottom edge is instead pushed down to the next available overflow position (determined by the answer to question 2).
Option 2. Inline content can overlap the bottom edge of a shape-inside. The line box that overlaps the shape's bottom edge has a maximum width determined by the shape width at that line's top edge.
Option 3. Inline content can overlap the bottom edge of a shape-inside. The line box that overlaps the shape's bottom edge has a maximum width determined by the minimum shape width between the line's top edge and the shape's bottom edge.

I think option 3 makes the most sense, and it's what is proposed in Hans' diagrams. Previous lines in the shape-inside have not overflowed the shape-inside in the inline direction, and I think we should try to keep that behavior. At the same time, inline content defaults to stacking vertically with no separation [2], and so I think even if a line box overlaps the shape's bottom edge, it should still be placed right below the previous line box.

On to the second question. I think that there are two major options (see diagram [3]):
Option 1. The first line box outside the shape-inside is placed immediately after the previous line box. This aligns with the default behavior for inline formatting contexts.
Option 2. The first line box outside the shape-inside is placed immediately after the logical bottom of its containing element.

Here, I think option 1 makes the most sense, although it is slightly different from the behavior in Hans' diagram. Option 1 is similar to the behavior of overflow within a box that contains padding. Inline content begins laying out at the top padding edge, but continues to stack vertically with no space even if it goes past the bottom padding edge [4].

-Bear

[1] https://dl.dropbox.com/u/1558588/shape-inside-last-linebox.png
[2] http://www.w3.org/TR/CSS2/visuren.html#inline-formatting
[3] https://dl.dropbox.com/u/1558588/shape-inside-overflow-line-box.png
[4] http://jsfiddle.net/hAMN6/1/

From: Hans Muller <hmuller@adobe.com<mailto:hmuller@adobe.com>>
Date: Tuesday, September 25, 2012 5:20 PM
To: "www-style@w3.org<mailto:www-style@w3.org>" <www-style@w3.org<mailto:www-style@w3.org>>
Subject: [css3-exclusions] how to handle exclusion shape-inside overflow
Resent-From: <www-style@w3.org<mailto:www-style@w3.org>>
Resent-Date: Wednesday, September 26, 2012 4:17 AM

Here's a CSS Exclusions issue we'd like to see clarified in the spec.

https://sites.google.com/site/hansmuller/webkit-blog/shape-inside-overflow.png

The diagram above shows two examples of how inline content would overflow in the block direction, given a "shape-inside" exclusion shape. The shape on the left is a rounded rectangle and five line segments, represented by blue rectangles, fit entirely within it. If the rule for block direction layout within a shape is that the width of the last line segment is not constrained by horizontal shape edges, then the width of the last (sixth) line segment is constrained by the X axis radius of the rectangle's rounded corners. Only four line segments fit within the ellipse on the right because, per the rule, the bottom of the ellipse would constrain the width of a fifth line segment to zero.

Assuming overflow is not hidden, content that overflows the shape begins below the shape's element or below the last overlapping line segment, whichever is logically lower.  The width of the overflow content is defined by the shape element's parent.

Does this sound (and look) correct?

This issue was also raised here, https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460.  In this case, overflow content was to begin immediately below the shape and the overflow's width would be defined by the shape-inside element.


Thanks,
- Hans