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} GitOrigin-RevId: 57f68063f26a1015f6acc649e14135e75eca55a2
mjfroman · Oct 9, 2020 · 0897829 · 0897829
1 parent c7deeda
commit 0897829
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/blink/renderer/core/html/html_details_element.cc b/blink/renderer/core/html/html_details_element.cc
@@ -89,12 +89,12 @@ void HTMLDetailsElement::DidAddUserAgentShadowRoot(ShadowRoot& root) {
   summary_slot->AppendChild(default_summary);
   root.AppendChild(summary_slot);
 
-  auto* content = MakeGarbageCollected<HTMLDivElement>(GetDocument());
-  content->SetIdAttribute(shadow_element_names::kIdDetailsContent);
-  content->AppendChild(
-      HTMLSlotElement::CreateUserAgentDefaultSlot(GetDocument()));
-  content->SetInlineStyleProperty(CSSPropertyID::kDisplay, CSSValueID::kNone);
-  root.AppendChild(content);
+  HTMLSlotElement* content_slot =
+      HTMLSlotElement::CreateUserAgentDefaultSlot(GetDocument());
+  content_slot->SetIdAttribute(shadow_element_names::kIdDetailsContent);
+  content_slot->SetInlineStyleProperty(CSSPropertyID::kDisplay,
+                                       CSSValueID::kNone);
+  root.AppendChild(content_slot);
 }
 
 Element* HTMLDetailsElement::FindMainSummary() const {

diff --git a/blink/web_tests/external/wpt/html/rendering/the-details-element/details-blockification.html b/blink/web_tests/external/wpt/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>
diff --git a/blink/web_tests/fast/dom/shadow/shadow-dom-event-dispatching-details-summary-expected.txt b/blink/web_tests/fast/dom/shadow/shadow-dom-event-dispatching-details-summary-expected.txt
@@ -8,8 +8,7 @@ DIV	 id=sandbox
 				SUMMARY	 id=summary
 					DIV	 id=details-marker
 					SLOT	
-			DIV	 id=details-content
-				SLOT	
+			SLOT	 id=details-content
 
 
 Moving mouse from details to summary