Skip to content

Commit

Permalink
Simplify <attachment> wide layout CSS
Browse files Browse the repository at this point in the history 
https://bugs.webkit.org/show_bug.cgi?id=258842
rdar://111719672

Reviewed by Wenson Hsieh.

- Use less hardcoded dimensions and write them in terms of HI spec dimensions
- Make top level container use flexbox (since it doesn't need grid)
- Share more code

* 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/shadow/attachmentElementShadow.css:
(div#attachment-container):
(div#attachment-preview-area):
(img#attachment-icon):
(div#attachment-placeholder,):
(div#attachment-placeholder):
(div#attachment-progress):
(div#attachment-information-area):
(div#attachment-information-block):

Canonical link: https://commits.webkit.org/265782@main
  • Loading branch information
@nt1m
nt1m committed Jul 5, 2023
1 parent bdb0943 commit 3033656
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 170 deletions.
8 changes: 4 additions & 4 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,11 @@ 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
RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 68x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderGrid {DIV} at (68,0) size 198x80
RenderGrid {DIV} at (4,40) size 170x0
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
Expand Down
64 changes: 32 additions & 32 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,83 +7,83 @@ layer at (0,0) size 800x888
RenderText {#text} at (0,0) size 47x19
text run at (0,0) width 47: "Blank: "
RenderAttachment {ATTACHMENT} at (47,16) size 339x92 [color=#007AFF]
RenderGrid {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 76x92
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderGrid {DIV} at (76,0) size 262x92
RenderGrid {DIV} at (6,46) size 230x0
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]
RenderGrid {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 76x92
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderGrid {DIV} at (76,0) size 262x92
RenderGrid {DIV} at (6,31) size 230x30
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]
RenderGrid {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 76x92
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderGrid {DIV} at (76,0) size 262x92
RenderGrid {DIV} at (6,31) size 230x30
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]
RenderGrid {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 76x92
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderGrid {DIV} at (76,0) size 262x92
RenderGrid {DIV} at (6,22) size 230x48
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]
RenderGrid {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 76x92
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderGrid {DIV} at (76,0) size 262x92
RenderGrid {DIV} at (6,26) size 230x40
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,26) size 230x40
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
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]
RenderGrid {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 76x92
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderGrid {DIV} at (76,0) size 262x92
RenderGrid {DIV} at (6,37) size 230x18
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,37) size 230x18
RenderBlock {DIV} at (0,654) 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]
RenderGrid {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 76x92
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderBlock {DIV} at (10,10) size 72x72 [color=#3C3C4399]
RenderBlock (generated) at (0,0) size 72x72 [border: (4px solid #3C3C4399)]
RenderText at (0,0) size 0x0
RenderGrid {DIV} at (76,0) size 262x92
RenderGrid {DIV} at (6,37) size 230x18
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,37) size 230x18
RenderBlock {DIV} at (0,763) 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]
RenderGrid {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 76x92
RenderFlexibleBox {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
RenderGrid {DIV} at (0,0) size 82x92
RenderImage {IMG} at (10,10) size 72x72
RenderBlock {DIV} at (10,10) size 72x72 [color=#3C3C4399]
RenderBlock (generated) at (0,0) size 72x72 [border: (4px solid #3C3C4399)]
RenderText at (0,0) size 0x0
RenderGrid {DIV} at (76,0) size 262x92
RenderGrid {DIV} at (6,37) size 230x18
RenderFlexibleBox {DIV} at (82,0) size 230x92
RenderGrid {DIV} at (0,37) size 230x18
layer at (129,164) size 230x17
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 230x17 [color=#000000]
RenderBlock (anonymous) at (0,0) size 230x17
Expand Down
140 changes: 70 additions & 70 deletions LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,140 +7,140 @@ layer at (0,0) size 785x672
RenderText {#text} at (0,54) size 47x18
text run at (0,54) width 47: "Blank: "
RenderAttachment {ATTACHMENT} at (47,1) size 267x80
RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 68x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderGrid {DIV} at (68,0) size 198x80
RenderGrid {DIV} at (4,40) size 170x0
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: "
RenderAttachment {ATTACHMENT} at (39,1) size 267x80
RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 68x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderGrid {DIV} at (68,0) size 198x80
RenderGrid {DIV} at (4,26) size 170x28
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: "
RenderAttachment {ATTACHMENT} at (83,1) size 267x80
RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 68x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderGrid {DIV} at (68,0) size 198x80
RenderGrid {DIV} at (4,26) size 170x28
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: "
RenderAttachment {ATTACHMENT} at (52,1) size 267x80
RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 68x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderGrid {DIV} at (68,0) size 198x80
RenderGrid {DIV} at (4,18) size 170x44
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: "
RenderAttachment {ATTACHMENT} at (40,1) size 267x80
RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 68x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderGrid {DIV} at (68,0) size 198x80
RenderGrid {DIV} at (4,26) size 170x28
RenderBlock {DIV} at (142,0) size 28x28
RenderFlexibleBox {DIV} at (70,0) size 172x80
RenderGrid {DIV} at (0,26) size 172x28
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
RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 68x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
RenderGrid {DIV} at (68,0) size 198x80
RenderGrid {DIV} at (4,32) size 170x16
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
RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 68x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
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
RenderGrid {DIV} at (68,0) size 198x80
RenderGrid {DIV} at (4,32) size 170x16
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
RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 68x80
RenderFlexibleBox {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
RenderGrid {DIV} at (0,0) size 66x80
RenderImage {IMG} at (14,14) size 52x52
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
RenderGrid {DIV} at (68,0) size 198x80
RenderGrid {DIV} at (4,32) size 170x16
layer at (119,117) size 170x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 170x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 170x16
RenderFlexibleBox {DIV} at (70,0) size 172x80
RenderGrid {DIV} at (0,32) size 172x16
layer at (117,117) size 172x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 172x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 172x16
RenderText {#text} at (0,0) size 29x16
text run at (0,0) width 29: "Title"
layer at (119,133) size 170x12
RenderDeprecatedFlexibleBox {DIV} at (0,16) size 170x12 [color=#0000007F]
RenderBlock (anonymous) at (0,0) size 170x12
layer at (117,133) size 172x12
RenderDeprecatedFlexibleBox {DIV} at (0,16) size 172x12 [color=#0000007F]
RenderBlock (anonymous) at (0,0) size 172x12
RenderText {#text} at (0,0) size 38x12
text run at (0,0) width 38: "Subtitle"
layer at (164,199) size 170x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 170x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 170x16
layer at (162,199) size 172x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 172x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 172x16
RenderText {#text} at (0,0) size 29x16
text run at (0,0) width 29: "Title"
layer at (164,215) size 170x12
RenderDeprecatedFlexibleBox {DIV} at (0,16) size 170x12 [color=#0000007F]
RenderBlock (anonymous) at (0,0) size 170x12
layer at (162,215) size 172x12
RenderDeprecatedFlexibleBox {DIV} at (0,16) size 172x12 [color=#0000007F]
RenderBlock (anonymous) at (0,0) size 172x12
RenderText {#text} at (0,0) size 38x12
text run at (0,0) width 38: "Subtitle"
layer at (133,273) size 170x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 170x16 [color=#0000007F]
RenderBlock (anonymous) at (0,0) size 170x16
layer at (131,273) size 172x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 172x16 [color=#0000007F]
RenderBlock (anonymous) at (0,0) size 172x16
RenderText {#text} at (0,0) size 106x16
text run at (0,0) width 106: "Tap to download"
layer at (133,289) size 170x16
RenderDeprecatedFlexibleBox {DIV} at (0,16) size 170x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 170x16
layer at (131,289) size 172x16
RenderDeprecatedFlexibleBox {DIV} at (0,16) size 172x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 172x16
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 (133,305) size 170x12
RenderDeprecatedFlexibleBox {DIV} at (0,32) size 170x12 [color=#0000007F]
RenderBlock (anonymous) at (0,0) size 170x12
layer at (131,305) size 172x12
RenderDeprecatedFlexibleBox {DIV} at (0,32) size 172x12 [color=#0000007F]
RenderBlock (anonymous) at (0,0) size 172x12
RenderText {#text} at (0,0) size 38x12
text run at (0,0) width 38: "Subtitle"
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 (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
layer at (119,363) size 95x4 backgroundClip at (119,363) size 94x4 clip at (119,363) size 94x4
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 95x4 [color=#0000007F]
layer at (119,367) size 95x20 backgroundClip at (119,367) size 94x20 clip at (119,367) size 94x20
RenderDeprecatedFlexibleBox {DIV} at (0,4) size 95x20 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 95x16
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 (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]
layer at (178,451) size 170x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 170x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 170x16
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
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 (177,533) size 170x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 170x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 170x16
layer at (175,533) 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 (185,615) size 170x16
RenderDeprecatedFlexibleBox {DIV} at (0,0) size 170x16 [color=#000000D8]
RenderBlock (anonymous) at (0,0) size 170x16
layer at (183,615) 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
Expand Down
Loading

0 comments on commit 3033656

Please sign in to comment.