1 files changed, 35 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-blockification.html b/testing/web-platform/tests/html/rendering/the-details-element/details-blockification.html
new file mode 100644
index 0000000000..960074854d
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/the-details-element/details-blockification.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: details children blockification</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">
+<meta name="assert" content="Ensure blockification of <details> children">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+
+<div id="example1">
+  <details style="display: grid" open>
+    <summary style="display: inline">foo</summary>
+    <div style="display: inline">bar</span>
+  </details>
+</div>
+
+<div id="example2" style="display: grid">
+  <details style="display: contents" open>
+    <summary style="display: inline">foo</summary>
+    <div style="display: inline">bar</span>
+  </details>
+</div>
+
+<script>
+  function checkDetails(details) {
+    assert_equals(getComputedStyle(details.querySelector('summary')).display, "block");
+    assert_equals(getComputedStyle(details.querySelector('div')).display, "block");
+  }
+  test(() => {
+    checkDetails(document.querySelector('#example1'));
+    checkDetails(document.querySelector('#example2'));
+    assert_equals(getComputedStyle(document.querySelector('#example2>details')).display, "contents");
+  }, "Summary and content should have display:block computed value");
+
+</script>