LibWeb: Adjust buttons computed display style

2025-12-06 00:19:53 +01:00 · 2025-10-15 11:57:00 +02:00 · 2025-10-15 11:57:00 +02:00 · f54793315c
commit f54793315c
parent 4bcb34d7a0
5 changed files with 41 additions and 20 deletions
--- 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.
--- 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);
--- a/Libraries/LibWeb/HTML/HTMLButtonElement.h
+++ b/Libraries/LibWeb/HTML/HTMLButtonElement.h
@ -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,
--- 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
--- 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