Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add hidden=until-found HTML attribute and beforematch event #7475

Merged
merged 68 commits into from
Mar 23, 2022
Merged

Add hidden=until-found HTML attribute and beforematch event #7475

Changes from 29 commits
Commits
Show all changes
68 commits
Select commit Hold shift + click to select a range
30b0552
hidden=until-found attribute
josepharhar Aug 16, 2021
61a3a41
Add beforematch event
josepharhar Nov 10, 2021
387c131
Tried to fix a couple errors, there are still more
josepharhar Nov 11, 2021
9d25907
update scrolling
josepharhar Jan 7, 2022
d04e4d6
merged into hidden section
josepharhar Jan 13, 2022
93e1841
fixed some errors
josepharhar Jan 13, 2022
8089440
fixed all errors
josepharhar Jan 13, 2022
12cbbda
wrapping
josepharhar Jan 13, 2022
ca8eb40
Merge with main
josepharhar Jan 13, 2022
0d6b2eb
must -> is expected to
josepharhar Jan 21, 2022
b411034
move ol into li
josepharhar Jan 21, 2022
7aace23
add i to attribute selector
josepharhar Jan 25, 2022
65448e1
make hidden enumerated
josepharhar Jan 25, 2022
ca6d534
add i to attribute selector
josepharhar Jan 26, 2022
e725820
rewrite content-visibility note
josepharhar Jan 26, 2022
09fdbde
hidden attribute -> hidden state
josepharhar Jan 26, 2022
3dc6833
use invalid value default and missing value default
josepharhar Jan 27, 2022
206a802
add until found attribute selector for embed
josepharhar Jan 27, 2022
f7a1366
remove extra selector
josepharhar Jan 27, 2022
08adbe7
shouldnt -> discouraged
josepharhar Jan 27, 2022
16eaebe
remove second should in note
josepharhar Jan 27, 2022
08635ea
add dfn for not hidden state
josepharhar Jan 27, 2022
e8d2b9a
is expected -> will
josepharhar Jan 27, 2022
e701e98
expected -> will
josepharhar Jan 27, 2022
90e266c
code -> span
josepharhar Jan 27, 2022
81c9644
rewrite note intro
josepharhar Jan 27, 2022
d18bd7b
dependency for layout containment
josepharhar Jan 27, 2022
9321fb7
hidden=until-found -> hidden attribute in the hidden until found state
josepharhar Jan 27, 2022
63060cf
fix compile errors
josepharhar Jan 27, 2022
1cb11b2
custom getter and setter steps
josepharhar Feb 2, 2022
05c2dbf
until-found value => until-found state
josepharhar Feb 9, 2022
ec99d06
look at attribute instead of value
josepharhar Feb 9, 2022
8fe8e25
add DOMString to IDL
josepharhar Feb 9, 2022
642c996
Merge with 4 weeks of upstream commits
josepharhar Feb 10, 2022
732f694
expand note about interactions with page css
josepharhar Feb 10, 2022
ab5485b
add code around hidden
josepharhar Mar 2, 2022
0bb2751
fix hidden until found state
josepharhar Mar 2, 2022
be0e978
move quote marks outside of code
josepharhar Mar 2, 2022
a065268
remove scroll into view step
josepharhar Mar 2, 2022
064105d
separate hidden attribute and state
josepharhar Mar 2, 2022
1466e3c
Remove otherwise
josepharhar Mar 8, 2022
e380a50
user agents with css -> web browsers
josepharhar Mar 8, 2022
a5f07b8
combine notes
josepharhar Mar 8, 2022
ad370de
remove variable from idl setter steps
josepharhar Mar 8, 2022
bb761d0
replace truthy with checks for false and empty string
josepharhar Mar 8, 2022
95042f1
add null to idl
josepharhar Mar 8, 2022
377a2d5
2 small nits
josepharhar Mar 8, 2022
3b7158c
replace = with - in algorithm name
josepharhar Mar 8, 2022
d043b77
2 more nits
josepharhar Mar 8, 2022
5d51c96
ASCII case-insensitive match
josepharhar Mar 8, 2022
24a2b8f
wrap ascii case insensitive in span
josepharhar Mar 9, 2022
e0726f9
nits
josepharhar Mar 10, 2022
c955cf3
Merge with 4 weeks of upstream commits
josepharhar Mar 10, 2022
bfcb672
onbeforematch
josepharhar Mar 15, 2022
cb88ab9
combine css containment definition lists
josepharhar Mar 15, 2022
39db0dc
code -> span
josepharhar Mar 15, 2022
ecd4a32
should->will
josepharhar Mar 15, 2022
c173bd4
code->span
josepharhar Mar 15, 2022
282af51
remove extra hidden
josepharhar Mar 15, 2022
75621bd
use external resource for visibility
josepharhar Mar 15, 2022
f3456c2
use attr-value
josepharhar Mar 15, 2022
ec6f978
getter and setter fixes
josepharhar Mar 15, 2022
16ceccc
span->code
josepharhar Mar 15, 2022
383e976
make hidden=until-found not apply to embed
josepharhar Mar 15, 2022
291e33c
fix normativeness of note
josepharhar Mar 15, 2022
fa64e8c
add unrestricted number to idl
josepharhar Mar 15, 2022
c9bdf96
span->code
josepharhar Mar 16, 2022
c885c5e
move question mark outside parenthesis
josepharhar Mar 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
179 changes: 156 additions & 23 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3813,6 +3813,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#skips-its-contents">skips its contents</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/#containment-layout">layout
containment</dfn></li>
</ul>
</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved


Expand Down Expand Up @@ -74664,20 +74671,82 @@ 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 a <span>boolean attribute</span>. When specified
on an element, 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. <span w-nodev>User agents should not
render elements that have the <code data-x="attr-hidden">hidden</code> attribute specified. This
requirement may be 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>.</span></p>
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
Copy link
Member

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/ .

Copy link
Contributor Author

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:

  • the attribute is not set
  • the attribute is set to "until-found"
  • the attribute is set to anything else

Should I still say that it's an enumerated attribute anyway?

Copy link
Member

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.

Copy link
Contributor Author

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?

<tbody>
<tr>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<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 rowspan=2><span data-x="attr-hidden-hidden-state">Hidden state</span>
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<td>The empty string
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<tr>
<td><dfn><code data-x="attr-hidden-hidden-keyword">hidden</code></dfn>
</table>

<p>The attribute may be omitted. The <i data-x="invalid value default">invalid value default</i>
is the <span data-x="attr-hidden-hidden-state">hidden state</span>. The <i data-x="missing value
default">missing value default</i> is the <dfn data-x="attr-hidden-not-hidden-state">not
hidden</dfn> state.</p>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<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 are in
the <code data-x="attr-hidden-hidden-state">hidden state</code>. This requirement may be
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
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
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
navigation</span>. When these features attempt to scroll to a target which is in the element's
subtree, the user agent will to remove the <code data-x="attr-hidden">hidden</code> attribute in
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sentence is non-normative. The normative part is at https://github.com/whatwg/html/pull/7475/files#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947dR74841

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does: "fire an event" is defined here: https://dom.spec.whatwg.org/#concept-event-fire -- the IDL members (e.g. bubbles) have default values.

The fragment navigation part is here I think: https://github.com/whatwg/html/pull/7475/files#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947dR77882

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 that support CSS will use 'content-visibility: hidden' instead of 'display: none'
when the <code data-x="attr-hidden">hidden</code> attribute is in the <span
data-x="attr-hidden-until-found-state">hidden until found state</span>, as specified in the <a
href="#hiddenCSS">Rendering section</a>.</p>

<p class="note">Because this attribute is typically implemented using CSS, it's also possible to
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>
cancel the effects of the <span data-x="attr-hidden-hidden-state">hidden</span> state. Authors
therefore have to take care when writing their style sheets to make sure that the attribute is
still styled as expected.</p>

<div class="note">
<p>Since elements with the <code data-x="attr-hidden">hidden</code> attribute in the <span
data-x="attr-hidden-until-found-state">hidden until found state</span> use 'content-visibility:
hidden' instead of 'display: none', there are two caveats of the <span
data-x="attr-hidden-until-found-state">hidden until found state</span> that make it different
from the <span data-x="attr-hidden-hidden-state">hidden state</span>:</p>

<ol>
<li><p>The element needs to be affected by <span>layout containment</span> in order to be
hidden. This means that the element in the <span data-x="attr-hidden-until-found-state">hidden
until found state</span> can't have a 'display' value of 'none', or 'contents' for
example.</p></li>

<li><p>The element will still have a <a
href="https://drafts.csswg.org/css2/#visibility">generated box</a> when in the <span
data-x="attr-hidden-until-found-state">hidden until found state</span>, which means that
borders, margin, and padding will still be rendered around the element.</p></li>
</ol>
</div>

<div class="example">

Expand Down Expand Up @@ -74755,6 +74824,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
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<var>currentNode</var>:</p>

<ol>
<li>
<p>While <var>currentNode</var> has a parent node within the <span>flat tree</span>:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should check if the content attribute is set, to match reflecting boolean IDL attribute getter behavior.
https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I made it look at the attribute instead of <var>value</var>. How does it look? Is it OK that I didn't use the term "content attribute"?


<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
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
steps:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can remove "run the following steps"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, the sentence now ends with "then:"


<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>
</ol>
</li>
</ol>

</div>

<h3>Page visibility</h3>
Expand Down Expand Up @@ -77751,16 +77848,23 @@ body { display:none }
standardizing how <span>find-in-page</span> underlies the currently-unspecified <code
data-x="">window.find()</code> API.</p>

josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<h4>Interaction with <code>details</code></h4>
<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
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
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>
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. Similarly, all HTML elements with the <code
data-x="attr-hidden">hidden</code> attribute in the <span
data-x="attr-hidden-until-found-state">hidden until found</span> state should have their <span
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
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
elements with the <code data-x="attr-hidden">hidden</code> attribute in the <span
data-x="attr-hidden-until-found-state">hidden until found state</span> 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>
Expand All @@ -77770,8 +77874,18 @@ body { display:none }
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>
<var>node</var>'s <span>relevant global object</span> to run the following steps:</p>

<ol>
<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
view</span>.</p></li>
</ol>
</li>
</ol>

<p class="warning">
Expand Down Expand Up @@ -89209,6 +89323,9 @@ new PaymentRequest(&hellip;); // 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>
Expand Down Expand Up @@ -117133,12 +117250,20 @@ console.assert(container.firstChild instanceof SuperP);

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

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

embed[hidden] { display: inline; height: 0; width: 0; } <!-- because for legacy reasons it still needs to instantiate the plugin -->
<span id="hiddenCSS" data-x="">[hidden]:not([hidden=until-found i])</span> {
display: none;
}

[hidden=until-found i] {
content-visibility: hidden;
}

embed[hidden]:not([hidden=until-found]) { display: inline; height: 0; width: 0; } <!-- because for legacy reasons it still needs to instantiate the plugin -->

input[type=hidden i] { display: none !important; }

Expand Down Expand Up @@ -126255,6 +126380,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>
Expand Down