Skip to content

Commit f5def65

Browse files
josepharharjosepharhar
authored
Add hidden=until-found and beforematch
Closes #6040. Explainer: https://github.com/WICG/display-locking/blob/main/explainers/hidden-content-explainer.md
1 parent 332b8b8 commit f5def65

File tree

1 file changed

+203
-29
lines changed

1 file changed

+203
-29
lines changed

‎source‎

Lines changed: 203 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3814,10 +3814,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
38143814
<li><dfn data-x-href="https://drafts.csswg.org/css-pseudo/#file-selector-button-pseudo">'::file-selector-button'</dfn></li>
38153815
</ul>
38163816

3817-
<p>The following term is defined in <cite>CSS Containment</cite>: <ref spec=CSSCONTAIN></p>
3817+
<p>The following terms are defined in <cite>CSS Containment</cite>: <ref spec=CSSCONTAIN></p>
38183818

38193819
<ul class="brief">
38203820
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#skips-its-contents">skips its contents</dfn></li>
3821+
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#containment-layout">layout
3822+
containment</dfn></li>
38213823
</ul>
38223824
</dd>
38233825

@@ -10405,7 +10407,7 @@ interface <dfn interface>HTMLElement</dfn> : <span>Element</span> {
1040510407
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-dir">dir</span>;
1040610408

1040710409
// <span>user interaction</span>
10408-
[<span>CEReactions</span>] attribute boolean <span data-x="dom-hidden">hidden</span>;
10410+
[<span>CEReactions</span>] attribute (boolean or unrestricted double or DOMString)? <span data-x="dom-hidden">hidden</span>;
1040910411
[<span>CEReactions</span>] attribute boolean <span data-x="dom-inert">inert</span>;
1041010412
undefined <span data-x="dom-click">click</span>();
1041110413
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-accessKey">accessKey</span>;
@@ -11793,6 +11795,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
1179311795

1179411796
<ul class="brief">
1179511797
<li><code data-x="handler-onauxclick">onauxclick</code></li>
11798+
<li><code data-x="handler-onbeforematch">onbeforematch</code></li>
1179611799
<li><code data-x="handler-onblur">onblur</code>*</li>
1179711800
<li><code data-x="handler-oncancel">oncancel</code></li>
1179811801
<li><code data-x="handler-oncanplay">oncanplay</code></li>
@@ -75010,20 +75013,85 @@ END:VCARD</pre>
7501075013

7501175014
<p>All <span>HTML elements</span> may have the <dfn element-attr for="html-global"><code
7501275015
data-x="attr-hidden">hidden</code></dfn> content attribute set. The <code
75013-
data-x="attr-hidden">hidden</code> attribute is a <span>boolean attribute</span>. When specified
75014-
on an element, it indicates that the element is not yet, or is no longer, directly relevant to the
75015-
page's current state, or that it is being used to declare content to be reused by other parts of
75016-
the page as opposed to being directly accessed by the user. <span w-nodev>User agents should not
75017-
render elements that have the <code data-x="attr-hidden">hidden</code> attribute specified. This
75018-
requirement may be implemented indirectly through the style layer. For example, an HTML+CSS user
75019-
agent could implement these requirements <a href="#hiddenCSS">using the rules suggested in the
75020-
Rendering section</a>.</span></p>
75021-
75022-
<p class="note">Because this attribute is typically implemented using CSS, it's also possible to
75023-
override it using CSS. For instance, a rule that applies 'display: block' to all elements will
75024-
cancel the effects of the <code data-x="attr-hidden">hidden</code> attribute. Authors therefore
75025-
have to take care when writing their style sheets to make sure that the attribute is still styled
75026-
as expected.</p>
75016+
data-x="attr-hidden">hidden</code> attribute is an <span>enumerated attribute</span>. The
75017+
following table lists the states for this attribute:</p>
75018+
75019+
<table>
75020+
<thead>
75021+
<tr>
75022+
<th>State
75023+
<th>Keywords
75024+
<tbody>
75025+
<tr>
75026+
<td><span data-x="attr-hidden-until-found-state">Until found state</span>
75027+
<td><dfn attr-value for="html-global/hidden"><code data-x="attr-hidden-until-found-keyword">until-found</code></dfn>
75028+
<td>
75029+
<tr>
75030+
<td rowspan=2><span data-x="attr-hidden-hidden-state">Hidden state</span>
75031+
<td>The empty string
75032+
<tr>
75033+
<td><dfn attr-value for="html-global/hidden"><code data-x="attr-hidden-hidden-keyword">hidden</code></dfn>
75034+
</table>
75035+
75036+
<p>The attribute may be omitted. The <i data-x="invalid value default">invalid value default</i>
75037+
is the <span data-x="attr-hidden-hidden-state">hidden state</span>. The <i data-x="missing value
75038+
default">missing value default</i> is the <dfn data-x="attr-hidden-not-hidden-state">not
75039+
hidden state</dfn>.</p>
75040+
75041+
<p>When an element has the <code data-x="attr-hidden">hidden</code> attribute in the <dfn
75042+
data-x="attr-hidden-hidden-state">hidden state</dfn>, it indicates that the element is not yet, or
75043+
is no longer, directly relevant to the page's current state, or that it is being used to declare
75044+
content to be reused by other parts of the page as opposed to being directly accessed by the user.
75045+
User agents should not render elements that are in the <span
75046+
data-x="attr-hidden-hidden-state">hidden state</span>. This requirement may be implemented
75047+
indirectly through the style layer. For example, a web browser could implement these requirements
75048+
<a href="#hiddenCSS">using the rules suggested in the Rendering section</a>.</p>
75049+
75050+
<p>When an element has the <code data-x="attr-hidden">hidden</code> attribute in the <dfn
75051+
data-x="attr-hidden-until-found-state">hidden until found state</dfn>, it indicates that the
75052+
element is hidden like the <span data-x="attr-hidden-hidden-state">hidden state</span> but the
75053+
content inside the element will be accessible to <span>find-in-page</span> and <span
75054+
data-x="navigate-fragid">fragment navigation</span>. When these features attempt to scroll to a
75055+
target which is in the element's subtree, the user agent will remove the <code
75056+
data-x="attr-hidden">hidden</code> attribute in order to reveal the content before scrolling to
75057+
it. In addition to removing the <code data-x="attr-hidden">hidden</code> attribute, an event named
75058+
<code data-x="event-beforematch">beforematch</code> is also fired on the element before the <code
75059+
data-x="attr-hidden">hidden</code> attribute is removed.</p>
75060+
75061+
<p>Web browsers will use 'content-visibility: hidden' instead of 'display: none' when the <code
75062+
data-x="attr-hidden">hidden</code> attribute is in the <span
75063+
data-x="attr-hidden-until-found-state">hidden until found state</span>, as specified in the <a
75064+
href="#hiddenCSS">Rendering section</a>.</p>
75065+
75066+
75067+
<div class="note">
75068+
<p>Because this attribute is typically implemented using CSS, it's also possible to override it
75069+
using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the
75070+
effects of the <span data-x="attr-hidden-hidden-state">hidden</span> state. Authors therefore
75071+
have to take care when writing their style sheets to make sure that the attribute is still styled
75072+
as expected. In addition, legacy user agents which don't support the <span
75073+
data-x="attr-hidden-until-found-state">hidden until found state</span> will have 'display: none'
75074+
instead of 'content-visibility: hidden', so authors are encouraged to make sure that their style
75075+
sheets don't change the 'display' or 'content-visibility' properties of <span
75076+
data-x="attr-hidden-until-found-state">hidden until found</span> elements.</p>
75077+
75078+
<p>Since elements with the <code data-x="attr-hidden">hidden</code> attribute in the <span
75079+
data-x="attr-hidden-until-found-state">hidden until found state</span> use 'content-visibility:
75080+
hidden' instead of 'display: none', there are two caveats of the <span
75081+
data-x="attr-hidden-until-found-state">hidden until found state</span> that make it different
75082+
from the <span data-x="attr-hidden-hidden-state">hidden state</span>:</p>
75083+
75084+
<ol>
75085+
<li><p>The element needs to be affected by <span>layout containment</span> in order to be
75086+
revealed by find-in-page. This means that if the element in the <span
75087+
data-x="attr-hidden-until-found-state">hidden until found state</span> has a 'display' value of
75088+
'none', 'contents', or 'inline', then the element will not be revealed by find-in-page.</p></li>
75089+
75090+
<li><p>The element will still have a <span data-x="'visibility'">generated box</span> when in
75091+
the <span data-x="attr-hidden-until-found-state">hidden until found state</span>, which means
75092+
that borders, margin, and padding will still be rendered around the element.</p></li>
75093+
</ol>
75094+
</div>
7502775095

7502875096
<div class="example">
7502975097

@@ -75098,8 +75166,73 @@ END:VCARD</pre>
7509875166

7509975167
<div w-nodev>
7510075168

75101-
<p>The <dfn attribute for="HTMLElement"><code data-x="dom-hidden">hidden</code></dfn> IDL
75102-
attribute must <span>reflect</span> the content attribute of the same name.</p>
75169+
<p>The <dfn attribute for="HTMLElement"><code data-x="dom-hidden">hidden</code></dfn> getter steps
75170+
are:</p>
75171+
75172+
<ol>
75173+
<li><p>If the <code data-x="attr-hidden">hidden</code> attribute is in the <span
75174+
data-x="attr-hidden-until-found-state">until-found</span> state, then return "<code
75175+
data-x="attr-hidden-until-found-keyword">until-found</code>".</p></li>
75176+
75177+
<li><p>If the <code data-x="attr-hidden">hidden</code> attribute is set, then return
75178+
true.</p></li>
75179+
75180+
<li><p>Return false.</p></li>
75181+
</ol>
75182+
75183+
<p>The <code data-x="dom-hidden">hidden</code> setter steps are:</p>
75184+
75185+
<ol>
75186+
<li><p>If the given value is a string that is an <span>ASCII case-insensitive</span> match for
75187+
"<code data-x="attr-hidden-until-found-keyword">until-found</code>", then set the <code
75188+
data-x="attr-hidden">hidden</code> attribute to "<code
75189+
data-x="attr-hidden-until-found-keyword">until-found</code>".</p></li>
75190+
75191+
<li><p>Otherwise, if the given value is false, then remove the <code
75192+
data-x="attr-hidden">hidden</code> attribute.</p></li>
75193+
75194+
<li><p>Otherwise, if the given value is the empty string, then remove the <code
75195+
data-x="attr-hidden">hidden</code> attribute.</p></li>
75196+
75197+
<li><p>Otherwise, if the given value is null, then remove the <code
75198+
data-x="attr-hidden">hidden</code> attribute.</p></li>
75199+
75200+
<li><p>Otherwise, if the given value is 0, then remove the <code
75201+
data-x="attr-hidden">hidden</code> attribute.</p></li>
75202+
75203+
<li><p>Otherwise, if the given value is NaN, then remove the <code
75204+
data-x="attr-hidden">hidden</code> attribute.</p></li>
75205+
75206+
<li><p>Otherwise, set the <code data-x="attr-hidden">hidden</code> attribute to the empty
75207+
string.</p></li>
75208+
</ol>
75209+
75210+
<p>The <dfn>ancestor hidden-until-found revealing algorithm</dfn> is to run the following steps on
75211+
<var>currentNode</var>:</p>
75212+
75213+
<ol>
75214+
<li>
75215+
<p>While <var>currentNode</var> has a parent node within the <span>flat tree</span>:</p>
75216+
75217+
<ol>
75218+
<li>
75219+
<p>If <var>currentNode</var> has the <code data-x="attr-hidden">hidden</code> attribute in the
75220+
<span data-x="attr-hidden-until-found-state">hidden until found</span> state, then:</p>
75221+
75222+
<ol>
75223+
<li><p><span data-x="concept-event-fire">Fire an event</span> named <code
75224+
data-x="event-beforematch">beforematch</code> at <var>currentNode</var>.</p></li>
75225+
75226+
<li><p>Remove the <code data-x="attr-hidden">hidden</code> attribute from
75227+
<var>currentNode</var>.</p></li>
75228+
</ol>
75229+
</li>
75230+
75231+
<li><p>Set <var>currentNode</var> to the parent node of <var>currentNode</var> within the
75232+
<span>flat tree</span>.</p></li>
75233+
</ol>
75234+
</li>
75235+
</ol>
7510375236

7510475237
</div>
7510575238

@@ -78121,16 +78254,23 @@ body { display:none }
7812178254
standardizing how <span>find-in-page</span> underlies the currently-unspecified <code
7812278255
data-x="">window.find()</code> API.</p>
7812378256

78124-
<h4>Interaction with <code>details</code></h4>
78257+
<h4>Interaction with <code>details</code> and <code
78258+
data-x="attr-hidden-until-found-state">hidden=until-found</code></h4>
7812578259

7812678260
<p>When find-in-page begins searching for matches, all <code>details</code> elements in the page
78127-
which do not have their <code data-x="attr-details-open">open</code> attribute set should have
78128-
the <span data-x="skips its contents">skipped contents</span> of their second slot become
78129-
accessible, without modifying the <code data-x="attr-details-open">open</code> attribute, in
78130-
order to make find-in-page able to search through it. After find-in-page finishes searching for
78131-
matches, those <code>details</code> elements should have their contents become skipped again.
78132-
This entire process must happen synchronously (and so is not observable to users or to author
78133-
code). <ref spec=CSSCONTAIN></p>
78261+
which do not have their <code data-x="attr-details-open">open</code> attribute set should have the
78262+
<span data-x="skips its contents">skipped contents</span> of their second slot become accessible,
78263+
without modifying the <code data-x="attr-details-open">open</code> attribute, in order to make
78264+
find-in-page able to search through it. Similarly, all HTML elements with the <code
78265+
data-x="attr-hidden">hidden</code> attribute in the <span
78266+
data-x="attr-hidden-until-found-state">hidden until found state</span> should have their <span
78267+
data-x="skips its contents">skipped contents</span> become accessible without modifying the <code
78268+
data-x="attr-hidden">hidden</code> attribute in order to make find-in-page able to search through
78269+
them. After find-in-page finishes searching for matches, the <code>details</code> elements and the
78270+
elements with the <code data-x="attr-hidden">hidden</code> attribute in the <span
78271+
data-x="attr-hidden-until-found-state">hidden until found state</span> should have their contents
78272+
become skipped again. This entire process must happen synchronously (and so is not observable to
78273+
users or to author code). <ref spec=CSSCONTAIN></p>
7813478274

7813578275
<p>When find-in-page chooses a new <span data-x="fip-active-match">active match</span>, perform
7813678276
the following steps:</p>
@@ -78140,8 +78280,15 @@ body { display:none }
7814078280
match</span>.</p></li>
7814178281

7814278282
<li><p><span>Queue a global task</span> on the <span>user interaction task source</span> given
78143-
<var>node</var>'s <span>relevant global object</span> to run the <span>ancestor details
78144-
revealing algorithm</span> on <var>node</var>.</p></li>
78283+
<var>node</var>'s <span>relevant global object</span> to run the following steps:</p>
78284+
78285+
<ol>
78286+
<li><p>Run the <span>ancestor details revealing algorithm</span> on <var>node</var>.</p></li>
78287+
78288+
<li><p>Run the <span>ancestor hidden-until-found revealing algorithm</span> on
78289+
<var>node</var>.</p></li>
78290+
</ol>
78291+
</li>
7814578292
</ol>
7814678293

7814778294
<p class="warning">
@@ -89629,6 +89776,9 @@ new PaymentRequest(&hellip;); // Allowed to use
8962989776

8963089777
<li><p>Run the <span>ancestor details revealing algorithm</span> on <var>target</var>.</p></li>
8963189778

89779+
<li><p>Run the <span>ancestor hidden-until-found revealing algorithm</span> on
89780+
<var>target</var>.</p></li>
89781+
8963289782
<li><p><span data-x="scroll an element into view">Scroll <var>target</var> into view</span>,
8963389783
with <var>behavior</var> set to "auto", <var>block</var> set to "start", and <var>inline</var>
8963489784
set to "nearest". <ref spec=CSSOMVIEW></p></li>
@@ -96510,6 +96660,7 @@ typedef <span>OnBeforeUnloadEventHandlerNonNull</span>? <dfn typedef>OnBeforeUnl
9651096660
<tbody>
9651196661
<tr><td><dfn attribute for="HTMLElement,Document,Window,GlobalEventHandlers"><code data-x="handler-onabort">onabort</code></dfn> <td> <code data-x="">abort</code>
9651296662
<tr><td><dfn attribute for="HTMLElement,Document,Window,GlobalEventHandlers"><code data-x="handler-onauxclick">onauxclick</code></dfn> <td> <code data-x="event-auxclick">auxclick</code>
96663+
<tr><td><dfn attribute for="HTMLElement,Document,Window,GlobalEventHandlers"><code data-x="handler-onbeforematch">onbeforematch</code></dfn> <td> <code data-x="event-beforematch">beforematch</code>
9651396664
<tr><td><dfn attribute for="HTMLElement,Document,Window,GlobalEventHandlers"><code data-x="handler-oncancel">oncancel</code></dfn> <td> <code data-x="event-cancel">cancel</code>
9651496665
<tr><td><dfn attribute for="HTMLElement,Document,Window,GlobalEventHandlers"><code data-x="handler-oncanplay">oncanplay</code></dfn> <td> <code data-x="event-media-canplay">canplay</code>
9651596666
<tr><td><dfn attribute for="HTMLElement,Document,Window,GlobalEventHandlers"><code data-x="handler-oncanplaythrough">oncanplaythrough</code></dfn> <td> <code data-x="event-media-canplaythrough">canplaythrough</code>
@@ -96694,6 +96845,7 @@ typedef <span>OnBeforeUnloadEventHandlerNonNull</span>? <dfn typedef>OnBeforeUnl
9669496845
<pre><code class="idl">interface mixin <dfn interface>GlobalEventHandlers</dfn> {
9669596846
attribute <span>EventHandler</span> <span data-x="handler-onabort">onabort</span>;
9669696847
attribute <span>EventHandler</span> <span data-x="handler-onauxclick">onauxclick</span>;
96848+
attribute <span>EventHandler</span> <span data-x="handler-onbeforematch">onbeforematch</span>;
9669796849
attribute <span>EventHandler</span> <span data-x="handler-onblur">onblur</span>;
9669896850
attribute <span>EventHandler</span> <span data-x="handler-oncancel">oncancel</span>;
9669996851
attribute <span>EventHandler</span> <span data-x="handler-oncanplay">oncanplay</span>;
@@ -116731,11 +116883,19 @@ console.assert(container.firstChild instanceof SuperP);
116731116883

116732116884
<pre><code class="css">@namespace url(http://www.w3.org/1999/xhtml);
116733116885

116734-
<span id="hiddenCSS" data-x="">[hidden]</span>, area, base, basefont, datalist, head, link, meta, noembed,
116886+
area, base, basefont, datalist, head, link, meta, noembed,
116735116887
noframes, param, rp, script, style, template, title {
116736116888
display: none;
116737116889
}
116738116890

116891+
<span id="hiddenCSS" data-x="">[hidden]:not([hidden=until-found i])</span> {
116892+
display: none;
116893+
}
116894+
116895+
[hidden=until-found i]:not(embed) {
116896+
content-visibility: hidden;
116897+
}
116898+
116739116899
embed[hidden] { display: inline; height: 0; width: 0; } <!-- because for legacy reasons it still needs to instantiate the plugin -->
116740116900

116741116901
input[type=hidden i] { display: none !important; }
@@ -124899,6 +125059,12 @@ interface <dfn interface>External</dfn> {
124899125059
<td> <code data-x="event-afterprint">afterprint</code> event handler for <code>Window</code> object
124900125060
<td> <span data-x="event handler content attributes">Event handler content attribute</span>
124901125061

125062+
<tr>
125063+
<th id="ix-handler-onbeforematch"> <code data-x="">onbeforematch</code>
125064+
<td> <span data-x="handler-onbeforematch">HTML elements</span>
125065+
<td> <code data-x="event-beforematch">beforematch</code> event handler
125066+
<td> <span data-x="event handler content attributes">Event handler content attribute</span>
125067+
124902125068
<tr>
124903125069
<th id="ix-handler-window-onbeforeprint"> <code data-x="">onbeforeprint</code>
124904125070
<td> <code data-x="handler-window-onbeforeprint">body</code>
@@ -125887,6 +126053,14 @@ INSERT INTERFACES HERE
125887126053
<td> <code>Window</code>
125888126054
<td> Fired at the <code>Window</code> before printing
125889126055

126056+
<tr> <!-- beforematch -->
126057+
<td> <dfn event for="HTMLElement"><code data-x="event-beforematch">beforematch</code></dfn>
126058+
<td> <code>Event</code>
126059+
<td> Elements
126060+
<td> Fired on elements with the <code
126061+
data-x="attr-hidden-until-found-state">hidden=until-found</code> attribute before they are
126062+
revealed.
126063+
125890126064
<tr> <!-- beforeunload -->
125891126065
<td> <dfn event for="Window"><code data-x="event-beforeunload">beforeunload</code></dfn>
125892126066
<td> <code>BeforeUnloadEvent</code>

0 commit comments

Comments
 (0)