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

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)]

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]

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;