diff --git a/Libraries/LibWeb/HTML/HTMLElement.cpp b/Libraries/LibWeb/HTML/HTMLElement.cpp
index 944fc1c9ee2..476d0b16137 100644
--- a/Libraries/LibWeb/HTML/HTMLElement.cpp
+++ b/Libraries/LibWeb/HTML/HTMLElement.cpp
@@ -460,7 +460,7 @@ int HTMLElement::offset_top() const
     // NOTE: Ensure that layout is up-to-date before looking at metrics.
     const_cast<DOM::Document&>(document()).update_layout();
 
-    if (!layout_node())
+    if (!paintable_box())
         return 0;
 
     CSSPixels top_border_edge_of_element = paintable_box()->absolute_border_box_rect().y();
@@ -502,7 +502,7 @@ int HTMLElement::offset_left() const
     // NOTE: Ensure that layout is up-to-date before looking at metrics.
     const_cast<DOM::Document&>(document()).update_layout();
 
-    if (!layout_node())
+    if (!paintable_box())
         return 0;
 
     CSSPixels left_border_edge_of_element = paintable_box()->absolute_border_box_rect().x();
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
new file mode 100644
index 00000000000..b615d8746ff
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/html/rendering/widgets/button-layout/display-other.txt
@@ -0,0 +1,24 @@
+Harness status: OK
+
+Found 18 tests
+
+3 Pass
+15 Fail
+Fail	display: block
+Pass	display: run-in
+Pass	display: flow
+Fail	display: flow-root
+Fail	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
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/html/rendering/widgets/button-layout/display-other.html b/Tests/LibWeb/Text/input/wpt-import/html/rendering/widgets/button-layout/display-other.html
new file mode 100644
index 00000000000..92db86d89eb
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/html/rendering/widgets/button-layout/display-other.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<title>button with other display values</title>
+<script src=../../../../resources/testharness.js></script>
+<script src=../../../../resources/testharnessreport.js></script>
+<style>
+body { margin: 0 }
+.float { width: 100px; height: 100px; float: left; background: blue; margin: 10px }
+</style>
+<div class=float></div>
+<button id=button style="display: block;"><div class=float></div></button><span id=after>after</span>
+<script>
+// These should all behave as flow-root.
+const displayValues = ['run-in', 'flow', 'flow-root', 'table', 'list-item',
+                       'table-row-group', 'table-header-group', 'table-footer-group',
+                       'table-row', 'table-cell', 'table-column-group', 'table-column',
+                       'table-caption', 'ruby-base', 'ruby-text', 'ruby-base-container',
+                       'ruby-text-container'];
+const button = document.getElementById('button');
+const after = document.getElementById('after');
+function getValues() {
+  return {
+    buttonLeft: button.offsetLeft,
+    buttonTop: button.offsetTop,
+    buttonWidth: button.clientWidth,
+    buttonHeight: button.clientHeight,
+    afterLeft: after.offsetLeft,
+    afterTop: after.offsetTop,
+  };
+}
+const expected = getValues();
+test(t => {
+  assert_equals(expected.buttonLeft, 120, 'buttonLeft');
+  assert_equals(expected.buttonTop, 0, 'buttonTop');
+  assert_greater_than_equal(expected.buttonWidth, 120, 'buttonWidth');
+  assert_greater_than_equal(expected.buttonHeight, 120, 'buttonHeight');
+  assert_equals(expected.afterLeft, 0, 'afterLeft');
+  assert_greater_than_equal(expected.afterTop, 120, 'afterTop');
+}, 'display: block');
+for (const val of displayValues) {
+  test(t => {
+    t.add_cleanup(() => {
+      button.style.display = 'block';
+    });
+    assert_true(CSS.supports(`display: ${val}`), `display: ${val} is not supported`);
+    button.style.display = val;
+    const values = getValues();
+    for (const prop in values) {
+      assert_equals(values[prop], expected[prop], prop);
+    }
+  }, `display: ${val}`);
+}
+</script>
