Skip to content

Commit

Permalink
Attachment: Use opaque background color to ensure readability
Browse files Browse the repository at this point in the history 
https://bugs.webkit.org/show_bug.cgi?id=267253
rdar://117749005

Reviewed by Tim Nguyen.

The system colors used for the attachment background are very transparent,
which could render the attachment contents less readable if whatever is
under the attachment is of a similar color as the attachment text.
This issue can be prevented by making the background fully opaque.
The original transparent color has been moved to a new child div.

* 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: Removed.
* LayoutTests/platform/mac/fast/attachment/cocoa/wide-attachment-rendering-expected.txt:
* Source/WebCore/html/HTMLAttachmentElement.cpp:
(WebCore::attachmentBackgroundIdentifier):
(WebCore::HTMLAttachmentElement::ensureWideLayoutShadowTree):
* Source/WebCore/html/shadow/attachmentElementShadow.css:
(div#attachment-container):
(div#attachment-background):

Canonical link: https://commits.webkit.org/273642@main
  • Loading branch information
@squelart
squelart committed Jan 29, 2024
1 parent 6f399c4 commit 58e3ab0
Show file tree
Hide file tree
Showing 6 changed files with 208 additions and 315 deletions.
11 changes: 6 additions & 5 deletions LayoutTests/fast/attachment/mac/wide-attachment-image-controls-basic-expected.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ layer at (0,0) size 800x98
RenderBlock {HTML} at (0,0) size 800x98
RenderBody {BODY} at (8,8) size 784x82
RenderAttachment {ATTACHMENT} at (1,1) size 266x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000C]
RenderGrid {DIV} at (14,14) size 52x52
RenderImage {IMG} at (0,0) size 52x52
RenderFlexibleBox {DIV} at (84,0) size 158x80
RenderGrid {DIV} at (0,40) size 158x0
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#FFFFFF]
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000C]
RenderGrid {DIV} at (14,14) size 52x52
RenderImage {IMG} at (0,0) size 52x52
RenderFlexibleBox {DIV} at (80,0) size 162x80
RenderGrid {DIV} at (0,40) size 162x0
RenderText {#text} at (268,52) size 4x18
text run at (268,52) width 4: " "
RenderImage {IMG} at (272,46) size 20x20
Expand Down
100 changes: 54 additions & 46 deletions LayoutTests/platform/ios-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,80 +7,88 @@ layer at (0,0) size 800x777
RenderText {#text} at (0,31) size 47x19
text run at (0,31) width 47: "Blank: "
RenderAttachment {ATTACHMENT} at (47,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 0x72
RenderImage {IMG} at (0,36) size 0x0
RenderFlexibleBox {DIV} at (20,0) size 292x92
RenderGrid {DIV} at (0,46) size 292x0
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#FFFFFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 0x72
RenderImage {IMG} at (0,36) size 0x0
RenderFlexibleBox {DIV} at (20,0) size 292x92
RenderGrid {DIV} at (0,46) size 292x0
RenderBlock {DIV} at (0,94) size 784x94
RenderText {#text} at (0,31) size 39x19
text run at (0,31) width 39: "Title: "
RenderAttachment {ATTACHMENT} at (39,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 0x72
RenderImage {IMG} at (0,36) size 0x0
RenderFlexibleBox {DIV} at (20,0) size 292x92
RenderGrid {DIV} at (0,31) size 292x30
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#FFFFFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 0x72
RenderImage {IMG} at (0,36) size 0x0
RenderFlexibleBox {DIV} at (20,0) size 292x92
RenderGrid {DIV} at (0,31) size 292x30
RenderBlock {DIV} at (0,188) size 784x94
RenderText {#text} at (0,31) size 83x19
text run at (0,31) 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 (10,10) size 0x72
RenderImage {IMG} at (0,36) size 0x0
RenderFlexibleBox {DIV} at (20,0) size 292x92
RenderGrid {DIV} at (0,31) size 292x30
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#FFFFFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 0x72
RenderImage {IMG} at (0,36) size 0x0
RenderFlexibleBox {DIV} at (20,0) size 292x92
RenderGrid {DIV} at (0,31) size 292x30
RenderBlock {DIV} at (0,282) size 784x94
RenderText {#text} at (0,31) size 52x19
text run at (0,31) width 52: "Action: "
RenderAttachment {ATTACHMENT} at (52,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 0x72
RenderImage {IMG} at (0,36) size 0x0
RenderFlexibleBox {DIV} at (20,0) size 292x92
RenderGrid {DIV} at (0,22) size 292x48
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#FFFFFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 0x72
RenderImage {IMG} at (0,36) size 0x0
RenderFlexibleBox {DIV} at (20,0) size 292x92
RenderGrid {DIV} at (0,22) size 292x48
RenderBlock {DIV} at (0,376) size 784x94
RenderText {#text} at (0,31) size 40x19
text run at (0,31) width 40: "Save: "
RenderAttachment {ATTACHMENT} at (40,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 0x72
RenderImage {IMG} at (0,36) size 0x0
RenderFlexibleBox {DIV} at (20,0) size 292x92
RenderGrid {DIV} at (0,26) size 292x40
RenderBlock {DIV} at (252,0) size 40x40
RenderButton {BUTTON} at (0,0) size 40x40 [bgcolor=#7676801F]
RenderBlock (anonymous) at (0,0) size 40x40
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#FFFFFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 0x72
RenderImage {IMG} at (0,36) size 0x0
RenderFlexibleBox {DIV} at (20,0) size 292x92
RenderGrid {DIV} at (0,26) size 292x40
RenderBlock {DIV} at (252,0) size 40x40
RenderButton {BUTTON} at (0,0) size 40x40 [bgcolor=#7676801F]
RenderBlock (anonymous) at (0,0) size 40x40
RenderBlock {DIV} at (0,470) size 784x97
RenderText {#text} at (0,77) size 97x19
text run at (0,77) width 97: "Zero progress: "
RenderAttachment {ATTACHMENT} at (97,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 54x72
RenderFlexibleBox {DIV} at (74,0) size 238x92
RenderGrid {DIV} at (0,37) size 238x18
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#FFFFFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 54x72
RenderFlexibleBox {DIV} at (74,0) size 238x92
RenderGrid {DIV} at (0,37) size 238x18
RenderBlock {DIV} at (0,567) size 784x97
RenderText {#text} at (0,77) size 96x19
text run at (0,77) width 96: "75% progress: "
RenderAttachment {ATTACHMENT} at (96,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 54x72
RenderBlock {DIV} at (0,9) size 54x54 [color=#3C3C4399]
RenderBlock (generated) at (0,0) size 54x54 [border: (4px solid #3C3C4399)]
RenderText at (0,0) size 0x0
RenderFlexibleBox {DIV} at (74,0) size 238x92
RenderGrid {DIV} at (0,37) size 238x18
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#FFFFFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 54x72
RenderBlock {DIV} at (0,9) size 54x54 [color=#3C3C4399]
RenderBlock (generated) at (0,0) size 54x54 [border: (4px solid #3C3C4399)]
RenderText at (0,0) size 0x0
RenderFlexibleBox {DIV} at (74,0) size 238x92
RenderGrid {DIV} at (0,37) size 238x18
RenderBlock {DIV} at (0,664) size 784x97
RenderText {#text} at (0,77) size 104x19
text run at (0,77) width 104: "100% progress: "
RenderAttachment {ATTACHMENT} at (104,1) size 339x92 [color=#007AFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 54x72
RenderBlock {DIV} at (0,9) size 54x54 [color=#3C3C4399]
RenderBlock (generated) at (0,0) size 54x54 [border: (4px solid #3C3C4399)]
RenderText at (0,0) size 0x0
RenderFlexibleBox {DIV} at (74,0) size 238x92
RenderGrid {DIV} at (0,37) size 238x18
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#FFFFFF]
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (10,10) size 54x72
RenderBlock {DIV} at (0,9) size 54x54 [color=#3C3C4399]
RenderBlock (generated) at (0,0) size 54x54 [border: (4px solid #3C3C4399)]
RenderText at (0,0) size 0x0
RenderFlexibleBox {DIV} at (74,0) size 238x92
RenderGrid {DIV} at (0,37) size 238x18
layer at (67,134) size 292x17
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 292x17 [color=#000000]
RenderBlock (anonymous) at (0,0) size 292x17
Expand Down
147 changes: 0 additions & 147 deletions LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt
View file

This file was deleted.

Loading

0 comments on commit 58e3ab0

Please sign in to comment.