Remove anonymous box from details/summary shadow dom

Previously, there was an anonymous <div> in the shadow dom for the <summary> element, which caused display:contents to not behave in an interoperable way. See [1] for a spec PR that clarifies the spec, and this CL matches the new clarification. The new WPT added here passes already on Gecko and WebKit. [1] whatwg/html#4746 Fixed: 973074 Change-Id: Iba54616c4e54e357dd71b7de30de18bde8ff3983 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2462217 Commit-Queue: Mason Freed <masonfreed@chromium.org> Reviewed-by: Oriol Brufau <obrufau@igalia.com> Auto-Submit: Mason Freed <masonfreed@chromium.org> Cr-Commit-Position: refs/heads/master@{#815731}
web-platform-tests · Oct 9, 2020 · 167f83c · 167f83c
1 parent 9243d59
commit 167f83c
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/html/rendering/the-details-element/details-blockification.html b/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" title="Mason Freed" href="mailto:masonfreed@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>