Content1
There is a 400x50px shape-inside rectangle inside the green box.
The Content1 text line's bottom equals to the shape-inside's rectangle bottom boundary, so it should fit in the shape-inside.
Content2
There is a 400x50px shape-inside rectangle inside the green box.
The Content2 text line overlaps with the shape-inside's rectangle bottom boundary, so the Content2 should be pushed below the content box.
Content3
There is a 400x50px shape-inside rectangle inside the green box.
The Content3 text line starts after the shape-inside's rectangle bottom boundary, so the Content3 should be pushed below the content box.
Content4
There is a 100x100px shape-inside rounded rectangle inside the green box.
The shape top and bottom boundaries match with the content box boundaries, the overflow should start on the left, below the green content box.
Content5
There is a 75x75px shape-inside rounded rectangle inside the green 100x100px box.
The forth line should overflow, the overflow should start on the left, below the green content box.
Based on a recent change on the exclusions specification. The 'shape-inside' property adds an exclusion area to the element's wrapping context. This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion area added is defined by subtracting the shape from the element's content area.
Bug 114526: [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box