Skip to content

Commit

Permalink
Expand <details> for find-in-page and fragment navigations
Browse files Browse the repository at this point in the history
Closes whatwg#4051.

This also changes the rendering model of hidden <details> content to use content-visibility: none instead of being "removed from the rendering".
  • Loading branch information
josepharhar authored and mfreed7 committed Jun 3, 2022
1 parent ee0adb3 commit 4ead569
Showing 1 changed file with 74 additions and 2 deletions.
76 changes: 74 additions & 2 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -3790,6 +3790,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>


Expand Down Expand Up @@ -57553,6 +57559,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
Expand Down Expand Up @@ -76879,6 +76914,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
Expand Down Expand Up @@ -87924,6 +87982,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>
Expand Down Expand Up @@ -117212,8 +117272,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 -->

Expand Down Expand Up @@ -125157,6 +125226,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>

Expand Down

0 comments on commit 4ead569

Please sign in to comment.