Bug 1856374 - Add a pref to stop forcing details elements to be blocks. r=TYLin

This is probably something we want to move towards, so it doesn't hurt
adding a pref to allow people to experiment with it.

Differential Revision: https://phabricator.services.mozilla.com/D189919

layout/base/nsCSSFrameConstructor.cpp

@@ -3239,18 +3239,17 @@ nsIFrame* nsCSSFrameConstructor::ConstructFieldSetFrame(
   return fieldsetFrame;
 }
 
-nsIFrame* nsCSSFrameConstructor::ConstructDetails(
+const nsCSSFrameConstructor::FrameConstructionData*
-    nsFrameConstructorState& aState, FrameConstructionItem& aItem,
+nsCSSFrameConstructor::FindDetailsData(const Element& aElement,
-    nsContainerFrame* aParentFrame, const nsStyleDisplay* aStyleDisplay,
+                                       ComputedStyle& aStyle) {
-    nsFrameList& aFrameList) {
+  if (!StaticPrefs::layout_details_force_block_layout()) {
-  if (!aStyleDisplay->IsScrollableOverflow()) {
+    return nullptr;
-    return ConstructNonScrollableBlock(aState, aItem, aParentFrame,
-                                       aStyleDisplay, aFrameList);
   }
-
+  static constexpr FrameConstructionData sBlockData[2] = {
-  // Build a scroll frame if necessary.
+      {&nsCSSFrameConstructor::ConstructNonScrollableBlock},
-  return ConstructScrollableBlock(aState, aItem, aParentFrame, aStyleDisplay,
+      {&nsCSSFrameConstructor::ConstructScrollableBlock},
-                                  aFrameList);
+  };
+  return &sBlockData[aStyle.StyleDisplay()->IsScrollableOverflow()];
 }
 
 nsIFrame* nsCSSFrameConstructor::ConstructBlockRubyFrame(
@@ -3496,7 +3495,8 @@ nsCSSFrameConstructor::FindHTMLData(const Element& aElement,
       SIMPLE_TAG_CREATE(audio, NS_NewHTMLVideoFrame),
       SIMPLE_TAG_CREATE(progress, NS_NewProgressFrame),
       SIMPLE_TAG_CREATE(meter, NS_NewMeterFrame),
-      COMPLEX_TAG_CREATE(details, &nsCSSFrameConstructor::ConstructDetails)};
+      SIMPLE_TAG_CHAIN(details, nsCSSFrameConstructor::FindDetailsData),
+  };
 
   return FindDataByTag(aElement, aStyle, sHTMLData, ArrayLength(sHTMLData));
 }

layout/base/nsCSSFrameConstructor.h

@@ -1377,13 +1377,6 @@ class nsCSSFrameConstructor final : public nsFrameManager {
                                    const nsStyleDisplay* aStyleDisplay,
                                    nsFrameList& aFrameList);
 
-  // <details> always creates a block per spec.
-  nsIFrame* ConstructDetails(nsFrameConstructorState& aState,
-                             FrameConstructionItem& aItem,
-                             nsContainerFrame* aParentFrame,
-                             const nsStyleDisplay* aStyleDisplay,
-                             nsFrameList& aFrameList);
-
   // Creates a block frame wrapping an anonymous ruby frame.
   nsIFrame* ConstructBlockRubyFrame(nsFrameConstructorState& aState,
                                     FrameConstructionItem& aItem,
@@ -1444,6 +1437,9 @@ class nsCSSFrameConstructor final : public nsFrameManager {
                                                      ComputedStyle&);
   static const FrameConstructionData* FindCanvasData(const Element&,
                                                      ComputedStyle&);
+  // <details> always creates a block per spec.
+  static const FrameConstructionData* FindDetailsData(const Element&,
+                                                      ComputedStyle&);
 
   /* Construct a frame from the given FrameConstructionItem.  This function
      will handle adding the frame to frame lists, processing children, setting

modules/libpref/init/StaticPrefList.yaml

@@ -9249,6 +9249,12 @@
   value: true
   mirror: always
 
+# Whether <details> is forced to be a block, see bug 1856374
+- name: layout.details.force-block-layout
+  type: bool
+  value: true
+  mirror: always
+
 #---------------------------------------------------------------------------
 # Prefs starting with "mathml."
 #---------------------------------------------------------------------------

testing/web-platform/meta/html/rendering/the-details-element/details-display-type-001.tentative.html.ini

@@ -1,2 +1,2 @@
 [details-display-type-001.tentative.html]
-  expected: FAIL
+  prefs: [layout.details.force-block-layout:false]

testing/web-platform/meta/html/rendering/the-details-element/details-display-type-002.tentative.html.ini

@@ -0,0 +1,2 @@
+[details-display-type-002.tentative.html]
+  prefs: [layout.details.force-block-layout:false]

testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002-ref.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+  div {
+    margin-top: 3em;
+  }
+</style>
+<details open>
+  <summary>The summary.</summary>
+  <div>Some details.</div>
+</details>

testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002.tentative.html

@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Details display property (flex)</title>
+<link rel="match" href="details-display-type-002-ref.html">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1856374">
+<link rel="help" href="https://github.com/dbaron/details-styling">
+<style>
+  details {
+    display: flex;
+    flex-direction: column;
+    gap: 3em;
+  }
+</style>
+<details open>
+  <summary>The summary.</summary>
+  Some details.
+</details>