mirror of
https://github.com/RGBCube/serenity
synced 2025-10-21 06:12:06 +00:00
7d24c13d8b
We now create a flex container inside the input element's UA shadow tree and add the placeholder and non-placeholder text as flex items (wrapped in elements whose style we can manipulate). This fixes the visual glitch where the placeholder would appear below the bounding box of the input element. It also allows us to align the text vertically inside the input element (like we're supposed to). In order to achieve this, I had to make two small architectural changes to layout tree building: - Elements can now report that they represent a given pseudo element. This allows us to instantiate the ::placeholder pseudo element as an actual DOM element inside the input element's UA shadow tree. - We no longer create a separate layout node for the shadow root itself. Instead, children of the shadow root are treated as if they were children of the DOM element itself for the purpose of layout tree building.
9 lines
746 B
Text
9 lines
746 B
Text
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|
BlockContainer <html> at (1,1) content-size 798x45.835937 [BFC] children: not-inline
|
|
BlockContainer <body> at (10,10) content-size 780x27.835937 children: inline
|
|
line 0 width: 202, height: 27.835937, bottom: 27.835937, baseline: 23.835937
|
|
frag 0 from BlockContainer start: 0, length: 0, rect: [11,11 200x25.835937]
|
|
BlockContainer <input> at (11,11) content-size 200x25.835937 inline-block [BFC] children: not-inline
|
|
Box <div> at (13,12) content-size 196x23.835937 flex-container(row) [FFC] children: not-inline
|
|
BlockContainer <div> at (14,13) content-size 0x21.835937 flex-item [BFC] children: inline
|
|
TextNode <#text>
|