Expand <details> for find-in-page and fragment navigations

Closes #4051.

This also changes the rendering model of hidden <details> content to use content-visibility: none instead of being "removed from the rendering".

Author: josepharhar

source

@@ -3788,6 +3788,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-pseudo/#file-selector-button-pseudo">'::file-selector-button'</dfn></li>
     </ul>
+
+    <p>The following term is defined in <cite>CSS Containment</cite>: <ref spec=CSSCONTAIN></p>
+
+    <ul class="brief">
+     <li><dfn data-x-href="https://drafts.csswg.org/css-contain/#skips-its-contents">skips its contents</dfn></li>
+    </ul>
    </dd>
 
 
@@ -57550,6 +57556,35 @@ interface <dfn interface>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <p>The <dfn>ancestor details revealing algorithm</dfn> is to run the following steps on
+  <var>currentNode</var>:</p>
+
+  <ol>
+   <li>
+    <p>While <var>currentNode</var> has a parent node within the <span>flat tree</span>:</p>
+
+    <ol>
+     <li>
+      <p>If <var>currentNode</var> is slotted into the second slot of a <code>details</code>
+      element:</p>
+
+      <ol>
+       <li><p>Set <var>currentNode</var> to the <code>details</code> element which
+       <var>currentNode</var> is slotted into.</p></li>
+
+       <li><p>If the <code data-x="attr-details-open">open</code> attribute is not set on
+       <var>currentNode</var>, then <span data-x="concept-element-attributes-set-value">set</span>
+       the <code data-x="attr-details-open">open</code> attribute on <var>currentNode</var> to the
+       empty string.</p></li>
+      </ol>
+     </li>
+
+     <li><p>Otherwise, set <var>currentNode</var> to the parent node of
+     <var>currentNode</var> within the <span>flat tree</span>.</p></li>
+    </ol>
+   </li>
+  </ol>
+
   <div class="example">
 
    <p>The following example shows the <code>details</code> element being used to hide technical
@@ -76876,6 +76911,29 @@ body { display:none }
   standardizing how <span>find-in-page</span> underlies the currently-unspecified <code
   data-x="">window.find()</code> API.</p>
 
+  <h4>Interaction with <code>details</code></h4>
+
+  <p>When find-in-page begins searching for matches, all <code>details</code> elements in the page
+  which do not have their <code data-x="attr-details-open">open</code> attribute set should have
+  the <span data-x="skips its contents">skipped contents</span> of their second slot become
+  accessible, without modifying the <code data-x="attr-details-open">open</code> attribute, in
+  order to make find-in-page able to search through it. After find-in-page finishes searching for
+  matches, those <code>details</code> elements should have their contents become skipped again.
+  This entire process must happen synchronously (and so is not observable to users or to author
+  code). <ref spec=CSSCONTAIN></p>
+
+  <p>When find-in-page chooses a new <span data-x="fip-active-match">active match</span>, perform
+  the following steps:</p>
+
+  <ol>
+   <li><p>Let <var>node</var> be the first node in the <span data-x="fip-active-match">active
+   match</span>.</p></li>
+
+   <li><p><span>Queue a global task</span> on the <span>user interaction task source</span> given
+   <var>node</var>'s <span>relevant global object</span> to run the <span>ancestor details
+   revealing algorithm</span> on <var>node</var>.</p></li>
+  </ol>
+
   <h4>Interaction with selection</h4>
 
   <p>The find-in-page process is invoked in the context of a document, and may have an effect on
@@ -87921,6 +87979,8 @@ new PaymentRequest(&hellip;); // Allowed to use
      <li><p>Set the <code>Document</code>'s <span>target element</span> to
      <var>target</var>.</p></li>
 
+     <li><p>Run the <span>ancestor details revealing algorithm</span> on <var>target</var>.</p></li>
+
      <li><p><span data-x="scroll an element into view">Scroll <var>target</var> into view</span>,
      with <var>behavior</var> set to "auto", <var>block</var> set to "start", and <var>inline</var>
      set to "nearest". <ref spec=CSSOMVIEW></p></li>
@@ -117207,8 +117267,17 @@ details[open] > summary {
   expected to allow the user to request the details be shown or hidden.</p>
 
   <p>The <code>details</code> element's second <span data-x="concept-slot">slot</span> is expected
-  to be removed from the rendering when the <code>details</code> element does not have an <code
-  data-x="attr-details-open">open</code> attribute.</p>
+  to have its <code data-x="attr-style">style</code> attribute set to "<code data-x="">display:
+  block; content-visibility: hidden;</code>" when the <code>details</code> element does not have an
+  <code data-x="attr-details-open">open</code> attribute. When it does have the <code
+  data-x="attr-details-open">open</code> attribute, the <code data-x="attr-style">style</code>
+  attribute is expected to be removed from the second <span data-x="concept-slot">slot</span>.</p>
+
+  <p class="note">Because the slots are hidden inside a shadow tree, this <code
+  data-x="attr-style">style</code> attribute is not directly visible to author code. Its impacts,
+  however, are visible. Notably, the choice of <code data-x="">content-visibility: hidden</code>
+  instead of, e.g., <code data-x="">display: none</code>, impacts the results of various APIs that
+  query layout information.</p>
 
   <!-- https://mail.gnome.org/archives/usability/2006-June/msg00015.html -->
 
@@ -125146,6 +125215,9 @@ INSERT INTERFACES HERE
    <dt id="refsCSSCASCADE">[CSSCASCADE]</dt>
    <dd><cite><a href="https://drafts.csswg.org/css-cascade/">CSS Cascading and Inheritance</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
 
+   <dt id="refsCSSCONTAIN">[CSSCONTAIN]</dt>
+   <dd><cite><a href="https://drafts.csswg.org/css-contain/">CSS Containment</a></cite>, T. Atkins, F. Rivoal, V. Levin. W3C.</dd>
+
    <dt id="refsCSSCOLOR">[CSSCOLOR]</dt>
    <dd><cite><a href="https://drafts.csswg.org/css-color/">CSS Color Module</a></cite>, T. &Ccedil;elik, C. Lilley, L. Baron. W3C.</dd>