Bug 237616 – WebKit doesn't properly scale 'shape-outside' image area on floats

• Status: NEW
• Component: Layout and Rendering

[Daniel Holbert]

(note: this same bug exists in WebKit and Chromium. The Chromium version of this bug report is at https://bugs.chromium.org/p/chromium/issues/detail?id=1304373 .)

What steps will reproduce the problem?
(1) Load https://bugzilla.mozilla.org/attachment.cgi?id=9266906

What is the expected result?
The "abc" text should be at the right edge of the black area on each line.

What happens instead?
The "abc" text is at the same position on the first 3 lines, and at a different position but still too-far-to-the-right on the 4th line.

Firefox gives the expected result here.  Chrome and Safari (Chromium/Blink + WebKit) give the above-described result which I'm pretty sure is incorrect.

The relevant spec text is here, in the css-shapes-1 spec (where shape-outside is defined):
https://www.w3.org/TR/css-shapes-1/#shapes-from-image

Quoting:
> The image is sized and positioned as if it were a replaced element whose specified width and height are the same as the element’s used content box size. 

In my testcase, I've included a replaced element (`<img>`) of that size on each line, so that you can see the proper size/position of the shape-outside image.

Firefox seems to honor this spec text, whereas Chromium/WebKit don't seem to resize the shape-outside image at all, as far as I can tell.

[Daniel Holbert]

Created attachment 454144 [details]
testcase

Here's a copy of the testcase that I linked in the initial comment, BTW.

[Radar WebKit Bug Importer]

<rdar://problem/90106520>