mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
LibWeb: Use button layout for input elements with button type
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
8feaecd5c8
commit
b2dcdf0096
Notes:
sideshowbarker
2024-07-17 07:31:31 +09:00
Author: https://github.com/kalenikaliaksandr Commit: https://github.com/LadybirdBrowser/ladybird/commit/b2dcdf0096 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/155
@ -0,0 +1,20 @@
|
||||
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 784x300 children: not-inline
|
||||
BlockContainer <input.btn> at (13,10) content-size 290x296 children: not-inline
|
||||
BlockContainer <(anonymous)> at (13,10) content-size 290x296 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (13,150) content-size 290x16 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 31, rect: [37,150 242.4375x16] baseline: 12.5
|
||||
"Should be located in the center"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,308) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x300]
|
||||
PaintableWithLines (BlockContainer<INPUT>.btn) [8,8 300x300]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [13,10 290x296]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [13,150 290x16]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,308 784x0]
|
||||
@ -0,0 +1,20 @@
|
||||
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 784x36 children: not-inline
|
||||
BlockContainer <input.btn> at (13,10) content-size 195.734375x32 children: not-inline
|
||||
BlockContainer <(anonymous)> at (13,10) content-size 195.734375x32 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (13,18) content-size 195.734375x16 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 26, rect: [13,18 195.734375x16] baseline: 12.5
|
||||
"Width should shrink to fit"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,44) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x36]
|
||||
PaintableWithLines (BlockContainer<INPUT>.btn) [8,8 205.734375x36]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [13,10 195.734375x32]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [13,18 195.734375x16]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,44 784x0]
|
||||
@ -11,10 +11,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
frag 4 from ImageBox start: 0, length: 0, rect: [136,8 128x256] baseline: 256
|
||||
TextNode <#text>
|
||||
ImageBox <input> at (8,216) content-size 48x48 inline-block children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 784x0 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: not-inline
|
||||
TextNode <#text>
|
||||
ImageBox <input> at (64,200) content-size 64x64 inline-block children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 784x0 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: not-inline
|
||||
TextNode <#text>
|
||||
ImageBox <input> at (136,8) content-size 128x256 inline-block children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 784x0 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: not-inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,283) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
@ -23,9 +29,15 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x259] overflow: [8,8 784x275]
|
||||
PaintableWithLines (BlockContainer<FORM>) [8,8 784x259]
|
||||
ImagePaintable (ImageBox<INPUT>) [8,216 48x48]
|
||||
ImagePaintable (ImageBox<INPUT>) [8,216 48x48] overflow: [8,8 48x256]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 0x0]
|
||||
TextPaintable (TextNode<#text>)
|
||||
ImagePaintable (ImageBox<INPUT>) [64,200 64x64]
|
||||
ImagePaintable (ImageBox<INPUT>) [64,200 64x64] overflow: [8,8 120x256]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 0x0]
|
||||
TextPaintable (TextNode<#text>)
|
||||
ImagePaintable (ImageBox<INPUT>) [136,8 128x256]
|
||||
ImagePaintable (ImageBox<INPUT>) [136,8 128x256] overflow: [8,8 256x256]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 0x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,283 784x0]
|
||||
|
||||
@ -3,6 +3,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x120 children: inline
|
||||
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 120x120] baseline: 120
|
||||
ImageBox <input> at (8,8) content-size 120x120 inline-block children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 784x0 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
|
||||
@ -10,3 +12,5 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x120]
|
||||
ImagePaintable (ImageBox<INPUT>) [8,8 120x120]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,8 0x0]
|
||||
|
||||
12
Tests/LibWeb/Layout/input/input-as-button-align-center.html
Normal file
12
Tests/LibWeb/Layout/input/input-as-button-align-center.html
Normal file
@ -0,0 +1,12 @@
|
||||
<style type="text/css">
|
||||
.btn {
|
||||
display: block;
|
||||
background: none rgb(40, 60, 220);
|
||||
color: rgb(255, 255, 255);
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
<input class="btn" type="submit" value="Should be located in the center" />
|
||||
11
Tests/LibWeb/Layout/input/input-as-button-shrink-to-fit.html
Normal file
11
Tests/LibWeb/Layout/input/input-as-button-shrink-to-fit.html
Normal file
@ -0,0 +1,11 @@
|
||||
<style type="text/css">
|
||||
.btn {
|
||||
display: block;
|
||||
background: none rgb(40, 60, 220);
|
||||
color: rgb(255, 255, 255);
|
||||
height: 36px;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
<input class="btn" type="submit" value="Width should shrink to fit" />
|
||||
@ -441,9 +441,22 @@ void TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::Context&
|
||||
layout_mask_or_clip_path(clip_path);
|
||||
}
|
||||
|
||||
auto is_button_layout = [&] {
|
||||
if (dom_node.is_html_button_element())
|
||||
return true;
|
||||
if (!dom_node.is_html_input_element())
|
||||
return false;
|
||||
// https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-button
|
||||
// An input element whose type attribute is in the Submit Button, Reset Button, or Button state, when it generates a CSS box, is expected to depict a button and use button layout
|
||||
auto const& input_element = static_cast<HTML::HTMLInputElement const&>(dom_node);
|
||||
if (input_element.is_button())
|
||||
return true;
|
||||
return false;
|
||||
}();
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/rendering.html#button-layout
|
||||
// If the computed value of 'inline-size' is 'auto', then the used value is the fit-content inline size.
|
||||
if (dom_node.is_html_button_element() && dom_node.layout_node()->computed_values().width().is_auto()) {
|
||||
if (is_button_layout && dom_node.layout_node()->computed_values().width().is_auto()) {
|
||||
auto& computed_values = verify_cast<NodeWithStyle>(*dom_node.layout_node()).mutable_computed_values();
|
||||
computed_values.set_width(CSS::Size::make_fit_content());
|
||||
}
|
||||
@ -452,7 +465,7 @@ void TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::Context&
|
||||
// If the element is an input element, or if it is a button element and its computed value for
|
||||
// 'display' is not 'inline-grid', 'grid', 'inline-flex', or 'flex', then the element's box has
|
||||
// a child anonymous button content box with the following behaviors:
|
||||
if (dom_node.is_html_button_element() && !display.is_grid_inside() && !display.is_flex_inside()) {
|
||||
if (is_button_layout && !display.is_grid_inside() && !display.is_flex_inside()) {
|
||||
auto& parent = *dom_node.layout_node();
|
||||
|
||||
// If the box does not overflow in the vertical axis, then it is centered vertically.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user