Skip to content

Commit

Permalink
Correctly compute baseline of wide-layout attachments
Browse files Browse the repository at this point in the history
https://bugs.webkit.org/show_bug.cgi?id=258868
rdar://problem/111771870

Reviewed by Dean Jackson.

Previously it was falling back on the narrow/legacy renderer's baseline computation, which
happened to look okay.
This is fixed by doing a proper computation using a designated inner element, in this case
the image element because it has the same height&baseline in all attachments (so that
attachments on the same line will be aligned regardless of their contents).

Also, because it was going through the legacy layout path, HTMLAttachmentElement::requestIconWithSize
triggered its debug-assertion that it should only be used with a narrow/legacy attachment; in release
it didn't crash but probably did an extra unnecessary icon request.

* LayoutTests/fast/attachment/mac/wide-attachment-image-controls-basic-expected.txt:
* LayoutTests/platform/ios-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt:
* LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt:
* Source/WebCore/html/HTMLAttachmentElement.cpp:
(WebCore::HTMLAttachmentElement::wideLayoutImageElement const):
* Source/WebCore/html/HTMLAttachmentElement.h:
* Source/WebCore/rendering/RenderAttachment.cpp:
(WebCore::RenderAttachment::baselinePosition const):

Canonical link: https://commits.webkit.org/265831@main
  • Loading branch information
squelart committed Jul 7, 2023
1 parent a5fec4a commit ee150ae
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 76 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ layer at (0,0) size 800x98
RenderImage {IMG} at (14,14) size 52x52
RenderFlexibleBox {DIV} at (70,0) size 172x80
RenderGrid {DIV} at (0,40) size 172x0
RenderText {#text} at (268,54) size 4x18
text run at (268,54) width 4: " "
RenderImage {IMG} at (272,48) size 20x20
RenderText {#text} at (268,51) size 4x18
text run at (268,51) width 4: " "
RenderImage {IMG} at (272,45) size 20x20
RenderText {#text} at (0,0) size 0x0
layer at (9,9) size 266x80
RenderBlock (relative positioned) {DIV} at (0,0) size 266x80 [color=#00000000]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
layer at (0,0) size 800x888
layer at (0,0) size 800x813
RenderView at (0,0) size 800x600
layer at (0,0) size 800x888
RenderBlock {HTML} at (0,0) size 800x888
RenderBody {BODY} at (8,8) size 784x872
RenderBlock {DIV} at (0,0) size 784x109
RenderText {#text} at (0,0) size 47x19
text run at (0,0) width 47: "Blank: "
RenderAttachment {ATTACHMENT} at (47,16) size 339x92 [color=#007AFF]
layer at (0,0) size 800x813
RenderBlock {HTML} at (0,0) size 800x813
RenderBody {BODY} at (8,8) size 784x797
RenderBlock {DIV} at (0,0) size 784x94
RenderText {#text} at (0,67) size 47x19
text run at (0,67) width 47: "Blank: "
RenderAttachment {ATTACHMENT} at (47,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,46) size 230x0
RenderBlock {DIV} at (0,109) size 784x109
RenderText {#text} at (0,0) size 39x19
text run at (0,0) width 39: "Title: "
RenderAttachment {ATTACHMENT} at (39,16) size 339x92 [color=#007AFF]
RenderBlock {DIV} at (0,94) size 784x94
RenderText {#text} at (0,67) size 39x19
text run at (0,67) width 39: "Title: "
RenderAttachment {ATTACHMENT} at (39,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,31) size 230x30
RenderBlock {DIV} at (0,218) size 784x109
RenderText {#text} at (0,0) size 83x19
text run at (0,0) width 83: "and subtitle: "
RenderAttachment {ATTACHMENT} at (83,16) size 339x92 [color=#007AFF]
RenderBlock {DIV} at (0,188) size 784x94
RenderText {#text} at (0,67) size 83x19
text run at (0,67) width 83: "and subtitle: "
RenderAttachment {ATTACHMENT} at (83,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,31) size 230x30
RenderBlock {DIV} at (0,327) size 784x109
RenderText {#text} at (0,0) size 52x19
text run at (0,0) width 52: "Action: "
RenderAttachment {ATTACHMENT} at (52,16) size 339x92 [color=#007AFF]
RenderBlock {DIV} at (0,282) size 784x94
RenderText {#text} at (0,67) size 52x19
text run at (0,67) width 52: "Action: "
RenderAttachment {ATTACHMENT} at (52,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,22) size 230x48
RenderBlock {DIV} at (0,436) size 784x109
RenderText {#text} at (0,0) size 40x19
text run at (0,0) width 40: "Save: "
RenderAttachment {ATTACHMENT} at (40,16) size 339x92 [color=#007AFF]
RenderBlock {DIV} at (0,376) size 784x94
RenderText {#text} at (0,67) size 40x19
text run at (0,67) width 40: "Save: "
RenderAttachment {ATTACHMENT} at (40,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
Expand All @@ -51,15 +51,15 @@ layer at (0,0) size 800x888
RenderBlock {DIV} at (190,0) size 40x40
RenderButton {BUTTON} at (0,0) size 40x40 [bgcolor=#7676801F]
RenderBlock (anonymous) at (11,0) size 18x40
RenderBlock {DIV} at (0,545) size 784x109
RenderBlock {DIV} at (0,470) size 784x109
RenderText {#text} at (0,0) size 97x19
text run at (0,0) width 97: "Zero progress: "
RenderAttachment {ATTACHMENT} at (97,16) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,37) size 230x18
RenderBlock {DIV} at (0,654) size 784x109
RenderBlock {DIV} at (0,579) size 784x109
RenderText {#text} at (0,0) size 96x19
text run at (0,0) width 96: "75% progress: "
RenderAttachment {ATTACHMENT} at (96,16) size 339x92 [color=#007AFF]
Expand All @@ -70,7 +70,7 @@ layer at (0,0) size 800x888
RenderText at (0,0) size 0x0
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,37) size 230x18
RenderBlock {DIV} at (0,763) size 784x109
RenderBlock {DIV} at (0,688) size 784x109
RenderText {#text} at (0,0) size 104x19
text run at (0,0) width 104: "100% progress: "
RenderAttachment {ATTACHMENT} at (104,16) size 339x92 [color=#007AFF]
Expand All @@ -81,66 +81,66 @@ layer at (0,0) size 800x888
RenderText at (0,0) size 0x0
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,37) size 230x18
layer at (129,164) size 230x17
layer at (129,134) size 230x17
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 230x17 [color=#000000]
RenderBlock (anonymous) at (0,0) size 230x17
RenderText {#text} at (0,0) size 29x17
text run at (0,0) width 29: "Title"
layer at (129,181) size 230x13
layer at (129,151) size 230x13
RenderDeprecatedFlexibleBox {DIV} at (0,17) size 230x13 [color=#3C3C4399]
RenderBlock (anonymous) at (0,0) size 230x13
RenderText {#text} at (0,0) size 38x13
text run at (0,0) width 38: "Subtitle"
layer at (174,273) size 230x17
layer at (174,228) size 230x17
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 230x17 [color=#000000]
RenderBlock (anonymous) at (0,0) size 230x17
RenderText {#text} at (0,0) size 29x17
text run at (0,0) width 29: "Title"
layer at (174,290) size 230x13
layer at (174,245) size 230x13
RenderDeprecatedFlexibleBox {DIV} at (0,17) size 230x13 [color=#3C3C4399]
RenderBlock (anonymous) at (0,0) size 230x13
RenderText {#text} at (0,0) size 38x13
text run at (0,0) width 38: "Subtitle"
layer at (143,374) size 230x17
layer at (143,314) size 230x17
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 230x17 [color=#3C3C4399]
RenderBlock (anonymous) at (0,0) size 230x17
RenderText {#text} at (0,0) size 106x17
text run at (0,0) width 106: "Tap to download"
layer at (143,391) size 230x17
layer at (143,331) size 230x17
RenderDeprecatedFlexibleBox {DIV} at (0,17) size 230x17 [color=#000000]
RenderBlock (anonymous) at (0,0) size 230x17
RenderText {#text} at (0,0) size 52x17
text run at (0,0) width 52: "\x{200E}\x{2068}Title\x{2069}\x{200B}.txt"
layer at (143,408) size 230x13
layer at (143,348) size 230x13
RenderDeprecatedFlexibleBox {DIV} at (0,34) size 230x13 [color=#3C3C4399]
RenderBlock (anonymous) at (0,0) size 230x13
RenderText {#text} at (0,0) size 38x13
text run at (0,0) width 38: "Subtitle"
layer at (131,486) size 118x8 backgroundClip at (131,486) size 117x8 clip at (131,486) size 117x8
layer at (131,411) size 118x8 backgroundClip at (131,411) size 117x8 clip at (131,411) size 117x8
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 118x8 [color=#3C3C4399]
layer at (131,494) size 118x24 backgroundClip at (131,494) size 117x24 clip at (131,494) size 117x24
layer at (131,419) size 118x24 backgroundClip at (131,419) size 117x24 clip at (131,419) size 117x24
RenderDeprecatedFlexibleBox {DIV} at (0,7) size 118x26 [color=#000000]
RenderBlock (anonymous) at (0,0) size 118x17
RenderText {#text} at (0,0) size 56x17
text run at (0,0) width 56: "\x{200E}\x{2068}Title\x{2069}\x{200B}.pdf"
layer at (131,518) size 118x8 backgroundClip at (131,518) size 117x8 clip at (131,518) size 117x8
layer at (131,443) size 118x8 backgroundClip at (131,443) size 117x8 clip at (131,443) size 117x8
RenderDeprecatedFlexibleBox {DIV} at (0,32) size 118x8 [color=#3C3C4399]
layer at (188,607) size 230x17
layer at (188,532) size 230x17
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 230x17 [color=#000000]
RenderBlock (anonymous) at (0,0) size 230x17
RenderText {#text} at (0,0) size 56x17
text run at (0,0) width 56: "\x{200E}\x{2068}Title\x{2069}\x{200B}.pdf"
layer at (187,716) size 230x17
layer at (187,641) size 230x17
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 230x17 [color=#000000]
RenderBlock (anonymous) at (0,0) size 230x17
RenderText {#text} at (0,0) size 56x17
text run at (0,0) width 56: "\x{200E}\x{2068}Title\x{2069}\x{200B}.pdf"
layer at (195,825) size 230x17
layer at (195,750) size 230x17
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 230x17 [color=#000000]
RenderBlock (anonymous) at (0,0) size 230x17
RenderText {#text} at (0,0) size 56x17
text run at (0,0) width 56: "\x{200E}\x{2068}Title\x{2069}\x{200B}.pdf"
layer at (332,486) size 18x40
layer at (332,411) size 18x40
RenderBlock {DIV} at (0,0) size 18x40 [bgcolor=#007AFF]
layer at (116,579) size 72x72
layer at (116,504) size 72x72
RenderBlock {DIV} at (10,10) size 72x72 [bgcolor=#000000]
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
layer at (0,0) size 785x672
layer at (0,0) size 785x714
RenderView at (0,0) size 785x600
layer at (0,0) size 785x672
RenderBlock {HTML} at (0,0) size 785x672
RenderBody {BODY} at (8,8) size 769x656
layer at (0,0) size 785x714
RenderBlock {HTML} at (0,0) size 785x714
RenderBody {BODY} at (8,8) size 769x698
RenderBlock {DIV} at (0,0) size 769x82
RenderText {#text} at (0,54) size 47x18
text run at (0,54) width 47: "Blank: "
RenderText {#text} at (0,52) size 47x18
text run at (0,52) width 47: "Blank: "
RenderAttachment {ATTACHMENT} at (47,1) size 267x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderFlexibleBox {DIV} at (70,0) size 172x80
RenderGrid {DIV} at (0,40) size 172x0
RenderBlock {DIV} at (0,82) size 769x82
RenderText {#text} at (0,54) size 39x18
text run at (0,54) width 39: "Title: "
RenderText {#text} at (0,52) size 39x18
text run at (0,52) width 39: "Title: "
RenderAttachment {ATTACHMENT} at (39,1) size 267x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderFlexibleBox {DIV} at (70,0) size 172x80
RenderGrid {DIV} at (0,26) size 172x28
RenderBlock {DIV} at (0,164) size 769x82
RenderText {#text} at (0,54) size 83x18
text run at (0,54) width 83: "and subtitle: "
RenderText {#text} at (0,52) size 83x18
text run at (0,52) width 83: "and subtitle: "
RenderAttachment {ATTACHMENT} at (83,1) size 267x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderFlexibleBox {DIV} at (70,0) size 172x80
RenderGrid {DIV} at (0,26) size 172x28
RenderBlock {DIV} at (0,246) size 769x82
RenderText {#text} at (0,54) size 52x18
text run at (0,54) width 52: "Action: "
RenderText {#text} at (0,52) size 52x18
text run at (0,52) width 52: "Action: "
RenderAttachment {ATTACHMENT} at (52,1) size 267x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderFlexibleBox {DIV} at (70,0) size 172x80
RenderGrid {DIV} at (0,18) size 172x44
RenderBlock {DIV} at (0,328) size 769x82
RenderText {#text} at (0,54) size 40x18
text run at (0,54) width 40: "Save: "
RenderText {#text} at (0,52) size 40x18
text run at (0,52) width 40: "Save: "
RenderAttachment {ATTACHMENT} at (40,1) size 267x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
Expand All @@ -51,29 +51,29 @@ layer at (0,0) size 785x672
RenderBlock {DIV} at (144,0) size 28x28
RenderButton {BUTTON} at (0,0) size 28x28 [color=#00000019] [border: (1px solid #00000019)]
RenderBlock (anonymous) at (7,3) size 14x21
RenderBlock {DIV} at (0,410) size 769x82
RenderText {#text} at (0,54) size 97x18
text run at (0,54) width 97: "Zero progress: "
RenderAttachment {ATTACHMENT} at (97,1) size 267x80
RenderBlock {DIV} at (0,410) size 769x96
RenderText {#text} at (0,0) size 97x18
text run at (0,0) width 97: "Zero progress: "
RenderAttachment {ATTACHMENT} at (97,15) size 267x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderFlexibleBox {DIV} at (70,0) size 172x80
RenderGrid {DIV} at (0,32) size 172x16
RenderBlock {DIV} at (0,492) size 769x82
RenderText {#text} at (0,54) size 96x18
text run at (0,54) width 96: "75% progress: "
RenderAttachment {ATTACHMENT} at (96,1) size 267x80
RenderBlock {DIV} at (0,506) size 769x96
RenderText {#text} at (0,0) size 96x18
text run at (0,0) width 96: "75% progress: "
RenderAttachment {ATTACHMENT} at (96,15) size 267x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderBlock {DIV} at (14,14) size 52x52 [color=#0000007F]
RenderBlock (generated) at (0,0) size 52x52 [border: (4px solid #0000007F)]
RenderText at (0,0) size 0x0
RenderFlexibleBox {DIV} at (70,0) size 172x80
RenderGrid {DIV} at (0,32) size 172x16
RenderBlock {DIV} at (0,574) size 769x82
RenderText {#text} at (0,54) size 104x18
text run at (0,54) width 104: "100% progress: "
RenderAttachment {ATTACHMENT} at (104,1) size 267x80
RenderBlock {DIV} at (0,602) size 769x96
RenderText {#text} at (0,0) size 104x18
text run at (0,0) width 104: "100% progress: "
RenderAttachment {ATTACHMENT} at (104,15) size 267x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderBlock {DIV} at (14,14) size 52x52 [color=#0000007F]
Expand Down Expand Up @@ -125,22 +125,22 @@ layer at (119,367) size 95x20 backgroundClip at (119,367) size 94x20 clip at (11
text run at (0,0) width 56: "\x{200E}\x{2068}Title\x{2069}\x{200B}.pdf"
layer at (119,387) size 95x4 backgroundClip at (119,387) size 94x4 clip at (119,387) size 94x4
RenderDeprecatedFlexibleBox {DIV} at (0,24) size 95x4 [color=#0000007F]
layer at (176,451) size 172x16
layer at (176,465) size 172x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 172x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 172x16
RenderText {#text} at (0,0) size 56x16
text run at (0,0) width 56: "\x{200E}\x{2068}Title\x{2069}\x{200B}.pdf"
layer at (175,533) size 172x16
layer at (175,561) size 172x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 172x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 172x16
RenderText {#text} at (0,0) size 56x16
text run at (0,0) width 56: "\x{200E}\x{2068}Title\x{2069}\x{200B}.pdf"
layer at (183,615) size 172x16
layer at (183,657) size 172x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 172x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 172x16
RenderText {#text} at (0,0) size 56x16
text run at (0,0) width 56: "\x{200E}\x{2068}Title\x{2069}\x{200B}.pdf"
layer at (270,366) size 14x21
RenderBlock {DIV} at (0,0) size 14x21 [bgcolor=#0000007F]
layer at (120,433) size 52x52
layer at (120,447) size 52x52
RenderBlock {DIV} at (14,14) size 52x52 [bgcolor=#000000D8]
5 changes: 5 additions & 0 deletions Source/WebCore/html/HTMLAttachmentElement.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,11 @@ DOMRectReadOnly* HTMLAttachmentElement::saveButtonClientRect() const
return m_saveButtonClientRect.get();
}

HTMLElement* HTMLAttachmentElement::wideLayoutImageElement() const
{
return m_imageElement.get();
}

RenderPtr<RenderElement> HTMLAttachmentElement::createElementRenderer(RenderStyle&& style, const RenderTreePosition&)
{
return createRenderer<RenderAttachment>(*this, WTFMove(style));
Expand Down
1 change: 1 addition & 0 deletions Source/WebCore/html/HTMLAttachmentElement.h
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ class HTMLAttachmentElement final : public HTMLElement {

bool isWideLayout() const { return m_implementation == Implementation::WideLayout; }
HTMLElement* wideLayoutShadowContainer() const { return m_containerElement.get(); }
HTMLElement* wideLayoutImageElement() const;

private:
friend class AttachmentSaveEventListener;
Expand Down
12 changes: 11 additions & 1 deletion Source/WebCore/rendering/RenderAttachment.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,18 @@ void RenderAttachment::layout()
layoutShadowContent(newIntrinsicSize);
}

LayoutUnit RenderAttachment::baselinePosition(FontBaseline, bool, LineDirectionMode, LinePositionMode) const
LayoutUnit RenderAttachment::baselinePosition(FontBaseline fontBaseline, bool firstLine, LineDirectionMode lineDirectionMode, LinePositionMode linePositionMode) const
{
if (auto* baselineElement = attachmentElement().wideLayoutImageElement()) {
bool unusedIsReplaced;
auto attachmentRect = attachmentElement().renderRect(&unusedIsReplaced);
auto baselineElementRect = baselineElement->renderRect(&unusedIsReplaced);
auto baselineElementTop = baselineElementRect.y() - attachmentRect.y();
if (auto* baselineElementRenderBox = baselineElement->renderBoxModelObject())
return baselineElementTop + baselineElementRenderBox->baselinePosition(fontBaseline, firstLine, lineDirectionMode, linePositionMode);
return baselineElementTop + baselineElementRect.height();
}

return theme().attachmentBaseline(*this);
}

Expand Down

0 comments on commit ee150ae

Please sign in to comment.