From b16028ac4f40fe875ce2a2345f68ae02d120d401 Mon Sep 17 00:00:00 2001 From: Gerald Squelart Date: Wed, 3 May 2023 15:37:31 -0700 Subject: [PATCH] Add small margin around attachments https://bugs.webkit.org/show_bug.cgi?id=256242 rdar://108758307 Reviewed by Wenson Hsieh. When attachments are next to each other without margins, they look like one connected mass. * LayoutTests/fast/attachment/mac/wide-attachment-image-controls-basic-expected.txt: * LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt: * Source/WebCore/html/shadow/attachmentElementShadow.css: (div#attachment-container): Canonical link: https://commits.webkit.org/263654@main --- ...tachment-image-controls-basic-expected.txt | 22 +++--- .../wide-attachment-rendering-expected.txt | 70 +++++++++---------- .../html/shadow/attachmentElementShadow.css | 1 + 3 files changed, 47 insertions(+), 46 deletions(-) diff --git a/LayoutTests/fast/attachment/mac/wide-attachment-image-controls-basic-expected.txt b/LayoutTests/fast/attachment/mac/wide-attachment-image-controls-basic-expected.txt index 62547d577127..212051b0da7d 100644 --- a/LayoutTests/fast/attachment/mac/wide-attachment-image-controls-basic-expected.txt +++ b/LayoutTests/fast/attachment/mac/wide-attachment-image-controls-basic-expected.txt @@ -1,20 +1,20 @@ layer at (0,0) size 800x600 RenderView at (0,0) size 800x600 -layer at (0,0) size 800x126 - RenderBlock {HTML} at (0,0) size 800x126 - RenderBody {BODY} at (8,8) size 784x110 - RenderBlock {ATTACHMENT} at (0,0) size 266x110 - RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D] +layer at (0,0) size 800x128 + RenderBlock {HTML} at (0,0) size 800x128 + RenderBody {BODY} at (8,8) size 784x112 + RenderBlock {ATTACHMENT} at (0,0) size 268x112 + RenderGrid {DIV} at (1,1) size 266x80 [bgcolor=#0000000D] RenderGrid {DIV} at (0,0) size 68x80 RenderAttachment {ATTACHMENT} at (8,14) size 52x52 RenderGrid {DIV} at (68,0) size 198x80 RenderGrid {DIV} at (4,40) size 170x0 - RenderBlock (anonymous) at (0,80) size 266x30 - RenderText {#text} at (266,92) size 4x18 - text run at (266,92) width 4: " " - RenderImage {IMG} at (270,86) size 20x20 + RenderBlock (anonymous) at (0,82) size 268x30 + RenderText {#text} at (268,94) size 4x18 + text run at (268,94) width 4: " " + RenderImage {IMG} at (272,88) size 20x20 RenderText {#text} at (0,0) size 0x0 -layer at (8,88) size 28x26 +layer at (8,90) size 28x26 RenderBlock (relative positioned) {DIV} at (0,0) size 28x26 [color=#00000000] -layer at (8,88) size 28x26 +layer at (8,90) size 28x26 RenderButton {BUTTON} at (0,0) size 28x26 [color=#000000D8] [bgcolor=#C0C0C0] [border: (2px outset #C0C0C0)] diff --git a/LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt b/LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt index 963fdb10a3c3..3c500552d848 100644 --- a/LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt +++ b/LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt @@ -3,47 +3,47 @@ layer at (0,0) size 800x600 layer at (0,0) size 800x600 RenderBlock {HTML} at (0,0) size 800x600 RenderBody {BODY} at (8,8) size 784x584 - RenderBlock {DIV} at (0,0) size 784x80 - RenderText {#text} at (0,52) size 47x18 - text run at (0,52) width 47: "Blank: " - RenderBlock {ATTACHMENT} at (46,0) size 267x80 - RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D] + RenderBlock {DIV} at (0,0) size 784x82 + RenderText {#text} at (0,53) size 47x18 + text run at (0,53) width 47: "Blank: " + RenderBlock {ATTACHMENT} at (46,0) size 269x82 + RenderGrid {DIV} at (1,1) size 266x80 [bgcolor=#0000000D] RenderGrid {DIV} at (0,0) size 68x80 RenderAttachment {ATTACHMENT} at (8,14) size 52x52 RenderGrid {DIV} at (68,0) size 198x80 RenderGrid {DIV} at (4,40) size 170x0 - RenderBlock {DIV} at (0,80) size 784x80 - RenderText {#text} at (0,52) size 39x18 - text run at (0,52) width 39: "Title: " - RenderBlock {ATTACHMENT} at (38,0) size 267x80 - RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D] + RenderBlock {DIV} at (0,82) size 784x82 + RenderText {#text} at (0,53) size 39x18 + text run at (0,53) width 39: "Title: " + RenderBlock {ATTACHMENT} at (38,0) size 269x82 + RenderGrid {DIV} at (1,1) size 266x80 [bgcolor=#0000000D] RenderGrid {DIV} at (0,0) size 68x80 RenderAttachment {ATTACHMENT} at (8,14) size 52x52 RenderGrid {DIV} at (68,0) size 198x80 RenderGrid {DIV} at (4,26) size 170x28 - RenderBlock {DIV} at (0,160) size 784x80 - RenderText {#text} at (0,52) size 83x18 - text run at (0,52) width 83: "and subtitle: " - RenderBlock {ATTACHMENT} at (82,0) size 267x80 - RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D] + RenderBlock {DIV} at (0,164) size 784x82 + RenderText {#text} at (0,53) size 83x18 + text run at (0,53) width 83: "and subtitle: " + RenderBlock {ATTACHMENT} at (82,0) size 269x82 + RenderGrid {DIV} at (1,1) size 266x80 [bgcolor=#0000000D] RenderGrid {DIV} at (0,0) size 68x80 RenderAttachment {ATTACHMENT} at (8,14) size 52x52 RenderGrid {DIV} at (68,0) size 198x80 RenderGrid {DIV} at (4,26) size 170x28 - RenderBlock {DIV} at (0,240) size 784x80 - RenderText {#text} at (0,52) size 52x18 - text run at (0,52) width 52: "Action: " - RenderBlock {ATTACHMENT} at (51,0) size 267x80 - RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D] + RenderBlock {DIV} at (0,246) size 784x82 + RenderText {#text} at (0,53) size 52x18 + text run at (0,53) width 52: "Action: " + RenderBlock {ATTACHMENT} at (51,0) size 269x82 + RenderGrid {DIV} at (1,1) size 266x80 [bgcolor=#0000000D] RenderGrid {DIV} at (0,0) size 68x80 RenderAttachment {ATTACHMENT} at (8,14) size 52x52 RenderGrid {DIV} at (68,0) size 198x80 RenderGrid {DIV} at (4,18) size 170x44 - RenderBlock {DIV} at (0,320) size 784x80 - RenderText {#text} at (0,52) size 40x18 - text run at (0,52) width 40: "Save: " - RenderBlock {ATTACHMENT} at (39,0) size 267x80 - RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D] + RenderBlock {DIV} at (0,328) size 784x82 + RenderText {#text} at (0,53) size 40x18 + text run at (0,53) width 40: "Save: " + RenderBlock {ATTACHMENT} at (39,0) size 269x82 + RenderGrid {DIV} at (1,1) size 266x80 [bgcolor=#0000000D] RenderGrid {DIV} at (0,0) size 68x80 RenderAttachment {ATTACHMENT} at (8,14) size 52x52 RenderGrid {DIV} at (68,0) size 198x80 @@ -52,47 +52,47 @@ layer at (0,0) size 800x600 RenderButton {BUTTON} at (0,0) size 28x28 [color=#000000D8] [border: (1px solid #0000007F)] RenderBlock (anonymous) at (1,3) size 26x22 RenderBlock {DIV} at (2,0) size 22x22 -layer at (118,114) size 170x16 +layer at (119,117) size 170x16 RenderDeprecatedFlexibleBox {DIV} at (0,0) size 170x16 [color=#000000D8] RenderBlock (anonymous) at (0,0) size 170x16 RenderText {#text} at (0,0) size 29x16 text run at (0,0) width 29: "Title" -layer at (118,130) size 170x12 +layer at (119,133) size 170x12 RenderDeprecatedFlexibleBox {DIV} at (0,16) size 170x12 [color=#0000007F] RenderBlock (anonymous) at (0,0) size 170x12 RenderText {#text} at (0,0) size 38x12 text run at (0,0) width 38: "Subtitle" -layer at (163,194) size 170x16 +layer at (164,199) size 170x16 RenderDeprecatedFlexibleBox {DIV} at (0,0) size 170x16 [color=#000000D8] RenderBlock (anonymous) at (0,0) size 170x16 RenderText {#text} at (0,0) size 29x16 text run at (0,0) width 29: "Title" -layer at (163,210) size 170x12 +layer at (164,215) size 170x12 RenderDeprecatedFlexibleBox {DIV} at (0,16) size 170x12 [color=#0000007F] RenderBlock (anonymous) at (0,0) size 170x12 RenderText {#text} at (0,0) size 38x12 text run at (0,0) width 38: "Subtitle" -layer at (132,266) size 170x16 +layer at (133,273) size 170x16 RenderDeprecatedFlexibleBox {DIV} at (0,0) size 170x16 [color=#0000007F] RenderBlock (anonymous) at (0,0) size 170x16 RenderText {#text} at (0,0) size 106x16 text run at (0,0) width 106: "Tap to download" -layer at (132,282) size 170x16 +layer at (133,289) size 170x16 RenderDeprecatedFlexibleBox {DIV} at (0,16) size 170x16 [color=#000000D8] RenderBlock (anonymous) at (0,0) size 170x16 RenderText {#text} at (0,0) size 52x16 text run at (0,0) width 52: "\x{200E}\x{2068}Title\x{2069}\x{200B}.txt" -layer at (132,298) size 170x12 +layer at (133,305) size 170x12 RenderDeprecatedFlexibleBox {DIV} at (0,32) size 170x12 [color=#0000007F] RenderBlock (anonymous) at (0,0) size 170x12 RenderText {#text} at (0,0) size 38x12 text run at (0,0) width 38: "Subtitle" -layer at (120,354) size 94x4 backgroundClip at (120,354) size 93x4 clip at (120,354) size 93x4 +layer at (121,363) size 94x4 backgroundClip at (121,363) size 93x4 clip at (121,363) size 93x4 RenderDeprecatedFlexibleBox {DIV} at (0,0) size 94x4 [color=#0000007F] -layer at (120,358) size 94x20 backgroundClip at (120,358) size 93x20 clip at (120,358) size 93x20 +layer at (121,367) size 94x20 backgroundClip at (121,367) size 93x20 clip at (121,367) size 93x20 RenderDeprecatedFlexibleBox {DIV} at (0,4) size 94x20 [color=#000000D8] RenderBlock (anonymous) at (0,0) size 94x16 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 (120,378) size 94x4 backgroundClip at (120,378) size 93x4 clip at (120,378) size 93x4 +layer at (121,387) size 94x4 backgroundClip at (121,387) size 93x4 clip at (121,387) size 93x4 RenderDeprecatedFlexibleBox {DIV} at (0,24) size 94x4 [color=#0000007F] diff --git a/Source/WebCore/html/shadow/attachmentElementShadow.css b/Source/WebCore/html/shadow/attachmentElementShadow.css index efd3a212e954..af719fd008ac 100644 --- a/Source/WebCore/html/shadow/attachmentElementShadow.css +++ b/Source/WebCore/html/shadow/attachmentElementShadow.css @@ -36,6 +36,7 @@ div#attachment-container { height: 80px; background-color: -apple-system-tertiary-fill; #endif + margin: 1px; border-radius: 8px; font: caption; pointer-events: none;