Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-12-07 21:59:54 +00:00
Code Issues Projects Releases Packages Wiki Activity

LibWeb: Adjust buttons computed display style

Browse source
This commit is contained in:
Lorenz A 2025-10-15 11:57:00 +02:00 • committed by Sam Atkins
parent 4bcb34d7a0
commit f54793315c
Notes: github-actions[bot] 2025-11-01 13:03:55 +00:00
5 changed files with 41 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -2350,6 +2350,7 @@ GC::Ptr<ComputedProperties> StyleComputer::compute_style_impl(DOM::AbstractEleme
for (auto const& property : inline_style->properties())
style->set_property(property.property_id, property.value);
}
abstract_element.element().adjust_computed_style(style);
return style;
}
@ -2603,7 +2604,8 @@ GC::Ref<ComputedProperties> StyleComputer::compute_properties(DOM::AbstractEleme
compute_text_align(computed_style, abstract_element);
// 8. Let the element adjust computed style
abstract_element.element().adjust_computed_style(computed_style);
if (!abstract_element.pseudo_element().has_value())
abstract_element.element().adjust_computed_style(computed_style);
// 9. Transition declarations [css-transitions-1]
// Theoretically this should be part of the cascade, but it works with computed values, which we don't have until now.

19
Libraries/LibWeb/HTML/HTMLButtonElement.cpp
View file

@ -5,6 +5,8 @@
*/
#include <LibWeb/Bindings/HTMLButtonElementPrototype.h>
#include <LibWeb/CSS/ComputedProperties.h>
#include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
#include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/Event.h>
#include <LibWeb/HTML/CommandEvent.h>
@ -29,6 +31,23 @@ void HTMLButtonElement::initialize(JS::Realm& realm)
Base::initialize(realm);
}
void HTMLButtonElement::adjust_computed_style(CSS::ComputedProperties& style)
{
// https://html.spec.whatwg.org/multipage/rendering.html#button-layout
// If the computed value of 'display' is 'inline-grid', 'grid', 'inline-flex', 'flex', 'none', or 'contents', then behave as the computed value.
auto display = style.display();
if (display.is_flex_inside() || display.is_grid_inside() || display.is_none() || display.is_contents()) {
// No-op
} else if (display.is_inline_outside()) {
// Otherwise, if the computed value of 'display' is a value such that the outer display type is 'inline', then behave as 'inline-block'.
// AD-HOC https://github.com/whatwg/html/issues/11857
style.set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::InlineBlock)));
} else {
// Otherwise, behave as 'flow-root'.
style.set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::FlowRoot)));
}
}
HTMLButtonElement::TypeAttributeState HTMLButtonElement::type_state() const
{
auto value = get_attribute_value(HTML::AttributeNames::type);

1
Libraries/LibWeb/HTML/HTMLButtonElement.h
View file

@ -31,6 +31,7 @@ public:
virtual ~HTMLButtonElement() override;
virtual void initialize(JS::Realm&) override;
virtual void adjust_computed_style(CSS::ComputedProperties&) override;
enum class TypeAttributeState {
#define __ENUMERATE_HTML_BUTTON_TYPE_ATTRIBUTE(_, state) state,

4
Tests/LibWeb/Layout/expected/block-and-inline/button-width.txt
View file

@ -1,13 +1,13 @@
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 60 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 44 0+0+8] children: not-inline
BlockContainer <button.btn.fixed-width> at [13,10] [0+1+4 190 4+1+584] [0+1+1 18 1+1+0] children: not-inline
BlockContainer <button.btn.fixed-width> at [13,10] [0+1+4 190 4+1+584] [0+1+1 18 1+1+0] [BFC] children: not-inline
BlockContainer <(anonymous)> at [13,10] flex-container(column) [0+0+0 190 0+0+0] [0+0+0 18 0+0+0] [FFC] children: not-inline
BlockContainer <(anonymous)> at [13,10] flex-item [0+0+0 190 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
frag 0 from TextNode start: 0, length: 11, rect: [60.53125,10 94.921875x18] baseline: 13.796875
"200px width"
TextNode <#text> (not painted)
BlockContainer <button.btn> at [13,32] [0+1+4 324.671875 4+1+0] [0+1+1 18 1+1+0] children: not-inline
BlockContainer <button.btn> at [13,32] [0+1+4 324.671875 4+1+0] [0+1+1 18 1+1+0] [BFC] children: not-inline
BlockContainer <(anonymous)> at [13,32] flex-container(column) [0+0+0 324.671875 0+0+0] [0+0+0 18 0+0+0] [FFC] children: not-inline
BlockContainer <(anonymous)> at [13,32] flex-item [0+0+0 324.671875 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
frag 0 from TextNode start: 0, length: 39, rect: [13,32 324.671875x18] baseline: 13.796875

33
Tests/LibWeb/Text/expected/wpt-import/html/rendering/widgets/button-layout/display-other.txt
View file

@ -2,23 +2,22 @@ Harness status: OK
Found 18 tests
3 Pass
15 Fail
Fail display: block
18 Pass
Pass display: block
Pass display: run-in
Pass display: flow
Fail display: flow-root
Fail display: table
Pass display: flow-root
Pass display: table
Pass display: list-item
Fail display: table-row-group
Fail display: table-header-group
Fail display: table-footer-group
Fail display: table-row
Fail display: table-cell
Fail display: table-column-group
Fail display: table-column
Fail display: table-caption
Fail display: ruby-base
Fail display: ruby-text
Fail display: ruby-base-container
Fail display: ruby-text-container
Pass display: table-row-group
Pass display: table-header-group
Pass display: table-footer-group
Pass display: table-row
Pass display: table-cell
Pass display: table-column-group
Pass display: table-column
Pass display: table-caption
Pass display: ruby-base
Pass display: ruby-text
Pass display: ruby-base-container
Pass display: ruby-text-container