1758563 - 'shape-outside' image exclusion-area seems to be scaled with element's size, only in Firefox

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:

1. Load attached testcase.

EXPECTED RESULTS:

• No text should overlap the black area.
• In the upper part of the test (above the horizontal line), the fuchsia text should be at the exact same horizontal position in each line.
• Throughout the test, the fuchsia text should be placed just outside of the black area.

ACTUAL RESULTS

• Text overlaps the black area on all but the first two lines.
• The text is too far to the right on the first line.

Essentially, it looks like we're scaling the shape-outside "exclusion area" based on the width of the element.

Chrome and Safari give EXPECTED RESULTS.
Firefox Nightly 99.0a1 (2022-03-07) (64-bit) gives ACTUAL RESULTS.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase in Chrome (left) vs. Firefox (right)

Comment 2

[Daniel Holbert [:dholbert]]

I think maybe we are actually correct here, and this is a Blink/WebKit bug...

The spec says in section 4, "Shapes from Image" (emphasis added by me):

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.
https://www.w3.org/TR/css-shapes-1/#shapes-from-image
https://drafts.csswg.org/css-shapes-1/#shapes-from-image

That appears to be what we're doing here (though it's not super-clear from my testcase since I'm painting the visible analog of the image using background-image which doesn't resize the image).

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (now displaying the image using replaced elements, to show spec-mandated sizing)

Here's a variant of the original testcase where I'm painting the image using replaced elements (<img>) rather than with the background-image property. This shows the spec's above-quoted expected sizing for the shape image area.

Firefox disagrees with Chrome/Safari here, too, but it's pretty clear that Firefox's behavior matches the spec.

I'll close this as invalid and open Blink/WebKit bugs.

Comment 4

[Daniel Holbert [:dholbert]]

Filed:
https://bugs.chromium.org/p/chromium/issues/detail?id=1304373
https://bugs.webkit.org/show_bug.cgi?id=237616

Comment 5

[Daniel Holbert [:dholbert]]

Note, the spec text here is slightly ambiguous. In the phrase "as if it were a replaced element whose specified width and height are the same as the element’s used content box size", I'm assuming the second "the element" refers to the float (the thing that shape-outside is specified on).

But there's another possible interpretation of this sentence - you could interpret "the element" as referring to the sentence's aforementioned replaced element. i.e. you could read it as saying: "...as if it were a replaced element whose specified width and height are the same as [the replaced element]'s used content box size".

This second interpretation would sort-of support the Chromium/WebKit behavior. However, I don't think that second interpretation makes much sense, because (under that reading) the sentence is circular; it talks about a replaced element that's sized under certain constraints, where one of those constraints would require you to already know the used size of the replaced element.

So: I'm pretty confident that our reading is the correct one (in that it matches the intent of the spec).

+CC Alan Stearns in case he wants to weigh in; it looks like he added this language (an earlier version of it) in the second chunk of this commit:
https://github.com/w3c/csswg-drafts/commit/f80fb07befa7dbdeda9b97be935ad038523d3e2c

Comment 6

[Alan Stearns]

If I recall correctly, the intent of this bit of spec was for floated images where we would want shape used for the exclusion to align with the displayed image. So the second 'the element' was indeed meant to refer to the float. I don’t recall considering how this would interact with a displayed background-image that might not match the content area