Skip to content

Commit 0050553

Browse files
authored
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".
1 parent d58d765 commit 0050553

File tree

1 file changed

+74
-2
lines changed

1 file changed

+74
-2
lines changed

source

Lines changed: 74 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3788,6 +3788,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
37883788
<ul class="brief">
37893789
<li><dfn data-x-href="https://drafts.csswg.org/css-pseudo/#file-selector-button-pseudo">'::file-selector-button'</dfn></li>
37903790
</ul>
3791+
3792+
<p>The following term is defined in <cite>CSS Containment</cite>: <ref spec=CSSCONTAIN></p>
3793+
3794+
<ul class="brief">
3795+
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#skips-its-contents">skips its contents</dfn></li>
3796+
</ul>
37913797
</dd>
37923798

37933799

@@ -57550,6 +57556,35 @@ interface <dfn interface>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
5755057556

5755157557
</div>
5755257558

57559+
<p>The <dfn>ancestor details revealing algorithm</dfn> is to run the following steps on
57560+
<var>currentNode</var>:</p>
57561+
57562+
<ol>
57563+
<li>
57564+
<p>While <var>currentNode</var> has a parent node within the <span>flat tree</span>:</p>
57565+
57566+
<ol>
57567+
<li>
57568+
<p>If <var>currentNode</var> is slotted into the second slot of a <code>details</code>
57569+
element:</p>
57570+
57571+
<ol>
57572+
<li><p>Set <var>currentNode</var> to the <code>details</code> element which
57573+
<var>currentNode</var> is slotted into.</p></li>
57574+
57575+
<li><p>If the <code data-x="attr-details-open">open</code> attribute is not set on
57576+
<var>currentNode</var>, then <span data-x="concept-element-attributes-set-value">set</span>
57577+
the <code data-x="attr-details-open">open</code> attribute on <var>currentNode</var> to the
57578+
empty string.</p></li>
57579+
</ol>
57580+
</li>
57581+
57582+
<li><p>Otherwise, set <var>currentNode</var> to the parent node of
57583+
<var>currentNode</var> within the <span>flat tree</span>.</p></li>
57584+
</ol>
57585+
</li>
57586+
</ol>
57587+
5755357588
<div class="example">
5755457589

5755557590
<p>The following example shows the <code>details</code> element being used to hide technical
@@ -76876,6 +76911,29 @@ body { display:none }
7687676911
standardizing how <span>find-in-page</span> underlies the currently-unspecified <code
7687776912
data-x="">window.find()</code> API.</p>
7687876913

76914+
<h4>Interaction with <code>details</code></h4>
76915+
76916+
<p>When find-in-page begins searching for matches, all <code>details</code> elements in the page
76917+
which do not have their <code data-x="attr-details-open">open</code> attribute set should have
76918+
the <span data-x="skips its contents">skipped contents</span> of their second slot become
76919+
accessible, without modifying the <code data-x="attr-details-open">open</code> attribute, in
76920+
order to make find-in-page able to search through it. After find-in-page finishes searching for
76921+
matches, those <code>details</code> elements should have their contents become skipped again.
76922+
This entire process must happen synchronously (and so is not observable to users or to author
76923+
code). <ref spec=CSSCONTAIN></p>
76924+
76925+
<p>When find-in-page chooses a new <span data-x="fip-active-match">active match</span>, perform
76926+
the following steps:</p>
76927+
76928+
<ol>
76929+
<li><p>Let <var>node</var> be the first node in the <span data-x="fip-active-match">active
76930+
match</span>.</p></li>
76931+
76932+
<li><p><span>Queue a global task</span> on the <span>user interaction task source</span> given
76933+
<var>node</var>'s <span>relevant global object</span> to run the <span>ancestor details
76934+
revealing algorithm</span> on <var>node</var>.</p></li>
76935+
</ol>
76936+
7687976937
<h4>Interaction with selection</h4>
7688076938

7688176939
<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
8792187979
<li><p>Set the <code>Document</code>'s <span>target element</span> to
8792287980
<var>target</var>.</p></li>
8792387981

87982+
<li><p>Run the <span>ancestor details revealing algorithm</span> on <var>target</var>.</p></li>
87983+
8792487984
<li><p><span data-x="scroll an element into view">Scroll <var>target</var> into view</span>,
8792587985
with <var>behavior</var> set to "auto", <var>block</var> set to "start", and <var>inline</var>
8792687986
set to "nearest". <ref spec=CSSOMVIEW></p></li>
@@ -117207,8 +117267,17 @@ details[open] > summary {
117207117267
expected to allow the user to request the details be shown or hidden.</p>
117208117268

117209117269
<p>The <code>details</code> element's second <span data-x="concept-slot">slot</span> is expected
117210-
to be removed from the rendering when the <code>details</code> element does not have an <code
117211-
data-x="attr-details-open">open</code> attribute.</p>
117270+
to have its <code data-x="attr-style">style</code> attribute set to "<code data-x="">display:
117271+
block; content-visibility: hidden;</code>" when the <code>details</code> element does not have an
117272+
<code data-x="attr-details-open">open</code> attribute. When it does have the <code
117273+
data-x="attr-details-open">open</code> attribute, the <code data-x="attr-style">style</code>
117274+
attribute is expected to be removed from the second <span data-x="concept-slot">slot</span>.</p>
117275+
117276+
<p class="note">Because the slots are hidden inside a shadow tree, this <code
117277+
data-x="attr-style">style</code> attribute is not directly visible to author code. Its impacts,
117278+
however, are visible. Notably, the choice of <code data-x="">content-visibility: hidden</code>
117279+
instead of, e.g., <code data-x="">display: none</code>, impacts the results of various APIs that
117280+
query layout information.</p>
117212117281

117213117282
<!-- https://mail.gnome.org/archives/usability/2006-June/msg00015.html -->
117214117283

@@ -125146,6 +125215,9 @@ INSERT INTERFACES HERE
125146125215
<dt id="refsCSSCASCADE">[CSSCASCADE]</dt>
125147125216
<dd><cite><a href="https://drafts.csswg.org/css-cascade/">CSS Cascading and Inheritance</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
125148125217

125218+
<dt id="refsCSSCONTAIN">[CSSCONTAIN]</dt>
125219+
<dd><cite><a href="https://drafts.csswg.org/css-contain/">CSS Containment</a></cite>, T. Atkins, F. Rivoal, V. Levin. W3C.</dd>
125220+
125149125221
<dt id="refsCSSCOLOR">[CSSCOLOR]</dt>
125150125222
<dd><cite><a href="https://drafts.csswg.org/css-color/">CSS Color Module</a></cite>, T. &Ccedil;elik, C. Lilley, L. Baron. W3C.</dd>
125151125223

0 commit comments

Comments
 (0)