1 files changed, 52 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/widgets/button-layout/display-other.html b/testing/web-platform/tests/html/rendering/widgets/button-layout/display-other.html
new file mode 100644
index 0000000000..6ed3f5894a
--- /dev/null
+++ b/testing/web-platform/tests/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>