LibWeb: Adjust buttons computed display style

lpas · AtkinsSJ · commit f54793315c2b · 2025-11-01T13:02:44.000Z
diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -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.
diff --git a/Libraries/LibWeb/HTML/HTMLButtonElement.cpp b/Libraries/LibWeb/HTML/HTMLButtonElement.cpp
@@ -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);
diff --git a/Libraries/LibWeb/HTML/HTMLButtonElement.h b/Libraries/LibWeb/HTML/HTMLButtonElement.h
@@ -31,6 +31,7 @@ class HTMLButtonElement final
     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,
diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-width.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-width.txt
@@ -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
diff --git a/Tests/LibWeb/Text/expected/wpt-import/html/rendering/widgets/button-layout/display-other.txt b/Tests/LibWeb/Text/expected/wpt-import/html/rendering/widgets/button-layout/display-other.txt
@@ -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

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