Add hidden=until-found HTML attribute and beforematch event #7475
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -74664,21 +74664,67 @@ END:VCARD</pre> | |
|
|
||
| <p>All <span>HTML elements</span> may have the <dfn element-attr for="html-global"><code | ||
| data-x="attr-hidden">hidden</code></dfn> content attribute set. The <code | ||
| data-x="attr-hidden">hidden</code> attribute is an <span>enumerated attribute</span>. The | ||
| following table lists the states for this attribute:</p> | ||
|
|
||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>State | ||
| <th>Keywords | ||
| <th>Notes | ||
| <tbody> | ||
| <tr> | ||
| <td><span data-x="attr-hidden-until-found-state">Until found state</span> | ||
| <td><dfn><code data-x="attr-hidden-until-found-keyword">until-found</code></dfn> | ||
| <td> | ||
| <tr> | ||
| <td><span data-x="attr-hidden-hidden-state">Hidden state</span> | ||
| <td>Anything besides <code data-x="attr-hidden-until-found-keyword">until-found</code> | ||
josepharhar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <td>If the attribute is set and has any value other than <code | ||
| data-x="attr-hidden-until-found-keyword">until-found</code>, it is in the hidden state. | ||
| <tr> | ||
| <td>Visible state | ||
| <td><code data-x="attr-hidden">hidden</code> attribute not present | ||
zcorpan marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <td>If the <code data-x="attr-hidden">hidden</code> attribute is not set at all on the element, it is in the visible | ||
josepharhar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| state. | ||
| </table> | ||
|
|
||
| <p>When an element is in the <dfn data-x="attr-hidden-hidden-state">hidden state</dfn>, it | ||
| indicates that the element is not yet, or is no longer, directly relevant to the page's current | ||
| state, or that it is being used to declare content to be reused by other parts of the page as | ||
| opposed to being directly accessed by the user. User agents should not render elements that have | ||
| the <code data-x="attr-hidden">hidden</code> attribute specified. This requirement may be | ||
josepharhar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| implemented indirectly through the style layer. For example, an HTML+CSS user agent could | ||
| implement these requirements <a href="#hiddenCSS">using the rules suggested in the Rendering | ||
| section</a>.</p> | ||
|
|
||
| <p>When an element is in the <dfn data-x="attr-hidden-until-found-state">hidden until found | ||
| state</dfn>, it indicates that the element is hidden like the <span | ||
| data-x="attr-hidden-hidden-state">hidden state</span> but the content inside the element should be | ||
| accessible to <span>find-in-page</span> and <span data-x="navigate-fragid">fragment | ||
josepharhar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| navigation</span>. When these features attempt to scroll to a target which is in the element's | ||
| subtree, the user agent is expected to remove the <code data-x="attr-hidden">hidden</code> | ||
| attribute in order to reveal the content before scrolling to it. In addition to removing the <code | ||
| data-x="attr-hidden">hidden</code> attribute, an event named <span | ||
| data-x="event-beforematch">beforematch</span> is also fired on the <code | ||
| data-x="attr-hidden">hidden</code> element before the <code data-x="attr-hidden">hidden</code> | ||
| attribute is removed.</p> | ||
|
|
||
josepharhar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <p>User agents are expected to use content-visibility:hidden instead of display:none when the | ||
| hidden attribute is <code data-x="attr-hidden-until-found-state">"until-found"</code>, as | ||
| specified in the <a href="#hiddenCSS">Rendering section</a>.</p> | ||
|
There was a problem hiding this comment. This probably needs a lot more details, about the timing of this event, whether it can be default-prevented, what should the UA do if the element is still hidden after the event fires, etc. There was a problem hiding this comment. This sentence is non-normative. The normative part is at https://github.com/whatwg/html/pull/7475/files#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947dR74841 There was a problem hiding this comment. That still doesn't mention whether the event should bubble, whether it's composed, etc, right? And that algorithm is only called from find-in-page, but then some other bits mention fragment navigation too... There was a problem hiding this comment. It does: "fire an event" is defined here: https://dom.spec.whatwg.org/#concept-event-fire -- the IDL members (e.g. The fragment navigation part is here I think: https://github.com/whatwg/html/pull/7475/files#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947dR77882 |
||
|
|
||
| <p class="note">Because this attribute is typically implemented using CSS, it's also possible to | ||
josepharhar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| override it using CSS. For instance, a rule that applies 'display: block' to all elements will | ||
| cancel the effects of the <code data-x="attr-hidden">hidden</code> attribute. Authors therefore | ||
| have to take care when writing their style sheets to make sure that the attribute is still styled | ||
| as expected.</p> | ||
|
|
||
| <p class="warning">Since hidden=until-found uses content-visibility:hidden instead of | ||
| display:none, the hidden element is expected to be display:block and will have a <a | ||
| href="https://drafts.csswg.org/css2/#visibility">generated box</a> unlike display:none.</p> | ||
|
|
||
| <div class="example"> | ||
|
|
||
| <p>In the following skeletal example, the attribute is used to hide the web game's main screen | ||
|
|
@@ -74755,6 +74801,34 @@ END:VCARD</pre> | |
| <p>The <dfn attribute for="HTMLElement"><code data-x="dom-hidden">hidden</code></dfn> IDL | ||
| attribute must <span>reflect</span> the content attribute of the same name.</p> | ||
|
|
||
| <p>The <dfn>ancestor hidden=until-found 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> has the <code | ||
| data-x="attr-hidden-until-found-state">hidden=until-found</code> attribute, then run the following | ||
| steps:</p> | ||
|
|
||
| <ol> | ||
| <li><p><span data-x="concept-event-fire">Fire an event</span> named <code | ||
| data-x="event-beforematch">beforematch</code> at <var>currentNode</var>.</p></li> | ||
|
|
||
| <li><p>Remove the <code data-x="attr-hidden">hidden</code> attribute from | ||
| <var>currentNode</var>.</p></li> | ||
| </ol> | ||
| </li> | ||
|
|
||
| <li><p>Set <var>currentNode</var> to the parent node of <var>currentNode</var> within the | ||
| <span>flat tree</span>.</p></li> | ||
josepharhar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </ol> | ||
| </li> | ||
| </ol> | ||
|
|
||
| </div> | ||
|
There was a problem hiding this comment. This should check if the content attribute is set, to match reflecting boolean IDL attribute getter behavior. There was a problem hiding this comment. Ok, I made it look at the attribute instead of |
||
|
|
||
| <h3>Page visibility</h3> | ||
|
|
@@ -77751,16 +77825,21 @@ 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> and <code | ||
| data-x="attr-hidden-until-found-state">hidden=until-found</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 | ||
domenic marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <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. Similarly, all HTML elements with the <code | ||
| data-x="attr-hidden-until-found-state">hidden=until-found</code> attribute should have their <span | ||
| data-x="skips its contents">skipped contents</span> become accessible without modifying the <span | ||
| data-x="attr-hidden">hidden</span> attribute in order to make find-in-page able to search through | ||
| them. After find-in-page finishes searching for matches, the <code>details</code> elements and the | ||
| <code data-x="attr-hidden-until-found-state">hidden=until-found</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> | ||
|
|
@@ -77770,8 +77849,18 @@ body { display:none } | |
| match</span>.</p></li> | ||
|
|
||
josepharhar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <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 following steps:</p> | ||
|
|
||
| <ol> | ||
josepharhar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <li><p>Run the <span>ancestor details revealing algorithm</span> on <var>node</var>.</p></li> | ||
|
|
||
| <li><p>Run the <span>ancestor hidden=until-found revealing algorithm</span> on | ||
| <var>node</var>.</p></li> | ||
|
|
||
| <li><p><span data-x="scroll an element into view">Scroll <var>node</var> into | ||
josepharhar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| view</span>.</p></li> | ||
| </ol> | ||
| </li> | ||
| </ol> | ||
|
|
||
| <p class="warning"> | ||
|
|
@@ -89209,6 +89298,9 @@ new PaymentRequest(…); // Allowed to use | |
|
|
||
| <li><p>Run the <span>ancestor details revealing algorithm</span> on <var>target</var>.</p></li> | ||
|
|
||
| <li><p>Run the <span>ancestor hidden=until-found 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> | ||
|
|
@@ -117133,11 +117225,19 @@ console.assert(container.firstChild instanceof SuperP); | |
|
|
||
| <pre><code class="css">@namespace url(http://www.w3.org/1999/xhtml); | ||
|
|
||
| area, base, basefont, datalist, head, link, meta, noembed, | ||
| noframes, param, rp, script, style, template, title { | ||
| display: none; | ||
| } | ||
|
|
||
| <span id="hiddenCSS" data-x="">[hidden]:not([hidden=until-found i])</span> { | ||
| display: none; | ||
| } | ||
|
|
||
| [hidden=until-found] { | ||
| content-visibility: hidden; | ||
| } | ||
|
|
||
| embed[hidden] { display: inline; height: 0; width: 0; } <!-- because for legacy reasons it still needs to instantiate the plugin --> | ||
|
|
||
| input[type=hidden i] { display: none !important; } | ||
|
|
@@ -126255,6 +126355,14 @@ INSERT INTERFACES HERE | |
| <td> <code>Window</code> | ||
| <td> Fired at the <code>Window</code> before printing | ||
|
|
||
| <tr> <!-- beforematch --> | ||
| <td> <dfn event for="HTMLElement"><code data-x="event-beforematch">beforematch</code></dfn> | ||
| <td> <code>Event</code> | ||
| <td> Elements | ||
| <td> Fired on elements with the <code | ||
| data-x="attr-hidden-until-found-state">hidden=until-found</code> attribute before they are | ||
| revealed. | ||
|
|
||
| <tr> <!-- beforeunload --> | ||
| <td> <dfn event for="Window"><code data-x="event-beforeunload">beforeunload</code></dfn> | ||
| <td> <code>BeforeUnloadEvent</code> | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You need to specify that the element is an enumerated attribute, per the comment in #6040 (comment). See other examples of enumerated attribute, and how they specify keywords and states, by searching for "enumerated attribute" in https://html.spec.whatwg.org/ .
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This doesn't seem like an enumerated attribute because instead of having a bunch of different relevant string values, it has these relevant states:
Should I still say that it's an enumerated attribute anyway?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Enumerated attributes are exactly attributes with multiple states. "not set" = missing valid default state. anything else = invalid value default state.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see, thanks!
I made it an enumerated attribute with a table like the other enumerated attributes.
How does it look?