RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 08:07:34 +00:00
Code Issues Activity Actions

LibWeb: Create a shadow tree for <input type=file> elements

Browse source 
This creates a button to prompt users to select a file, and a label to
show information about the selected file(s). Clicking either shadow
element will activate the input element.
This commit is contained in:
Timothy Flynn 2024-02-25 10:54:37 -05:00 • committed by Andreas Kling
parent 8319c7cfb8
commit 435c2c24d1
6 changed files with 119 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

54
Tests/LibWeb/Layout/expected/input-file.txt Normal file
View file

@ -0,0 +1,54 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 236.65625x21] baseline: 13.296875
frag 1 from TextNode start: 0, length: 1, rect: [245,8 8x17] baseline: 13.296875
" "
frag 2 from BlockContainer start: 0, length: 0, rect: [253,8 255.34375x21] baseline: 13.296875
BlockContainer <input> at (8,8) content-size 236.65625x21 inline-block [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 94.375x17] baseline: 13.296875
frag 1 from Label start: 0, length: 0, rect: [116,8 128.28125x17] baseline: 13.296875
BlockContainer <button> at (13,10) content-size 94.375x17 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 94.375x17 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 94.375x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 14, rect: [13,10 94.375x17] baseline: 13.296875
"Select file..."
TextNode <#text>
Label <label> at (116,8) content-size 128.28125x17 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 17, rect: [116,8 128.28125x17] baseline: 13.296875
"No file selected."
TextNode <#text>
TextNode <#text>
BlockContainer <input> at (253,8) content-size 255.34375x21 inline-block [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [258,10 103.71875x17] baseline: 13.296875
frag 1 from Label start: 0, length: 0, rect: [371,8 137.625x17] baseline: 13.296875
BlockContainer <button> at (258,10) content-size 103.71875x17 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (258,10) content-size 103.71875x17 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (258,10) content-size 103.71875x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 15, rect: [258,10 103.71875x17] baseline: 13.296875
"Select files..."
TextNode <#text>
Label <label> at (371,8) content-size 137.625x17 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 18, rect: [371,8 137.625x17] baseline: 13.296875
"No files selected."
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x21]
PaintableWithLines (BlockContainer<INPUT>) [8,8 236.65625x21]
PaintableWithLines (BlockContainer<BUTTON>) [8,8 104.375x21]
PaintableWithLines (BlockContainer(anonymous)) [13,10 94.375x17]
PaintableWithLines (BlockContainer(anonymous)) [13,10 94.375x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (Label<LABEL>) [112,8 132.28125x17]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<INPUT>) [253,8 255.34375x21] overflow: [253,8 255.625x21]
PaintableWithLines (BlockContainer<BUTTON>) [253,8 113.71875x21]
PaintableWithLines (BlockContainer(anonymous)) [258,10 103.71875x17]
PaintableWithLines (BlockContainer(anonymous)) [258,10 103.71875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (Label<LABEL>) [367,8 141.625x17]
TextPaintable (TextNode<#text>)

2
Tests/LibWeb/Layout/input/input-file.html Normal file
View file

@ -0,0 +1,2 @@
<input type="file" />
<input type="file" multiple />