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

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 53 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
223 changes: 195 additions & 28 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3819,6 +3819,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>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#containment-layout">layout
containment</dfn></li>
</ul>
</dd>


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

// <span>user interaction</span>
[<span>CEReactions</span>] attribute boolean <span data-x="dom-hidden">hidden</span>;
[<span>CEReactions</span>] attribute (boolean or DOMString?) <span data-x="dom-hidden">hidden</span>;
[<span>CEReactions</span>] attribute boolean <span data-x="dom-inert">inert</span>;
undefined <span data-x="dom-click">click</span>();
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-accessKey">accessKey</span>;
Expand Down Expand Up @@ -75002,20 +75009,87 @@ 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>

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

<p>When an element has the <code data-x="attr-hidden">hidden</code> attribute 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
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
data-x="attr-hidden-hidden-state">hidden state</code>. This requirement may be implemented
indirectly through the style layer. For example, a web browser could implement these requirements
<a href="#hiddenCSS">using the rules suggested in the Rendering section</a>.</p>

<p>When an element has the <code data-x="attr-hidden">hidden</code> attribute 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
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
data-x="navigate-fragid">fragment navigation</span>. When these features attempt to scroll to a
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
target which is in the element's subtree, the user agent will 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
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
data-x="attr-hidden">hidden</code> element before the <code data-x="attr-hidden">hidden</code>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
attribute is removed.</p>

<p>Web browsers 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>


<div class="note">
<p>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 <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. In addition, legacy user agents which don't support the <span
data-x="attr-hidden-until-found-state">hidden until found state</span> will have 'display: none'
instead of 'content-visibility: hidden', so authors are encouraged to make sure that their style
sheets don't change the 'display' or 'content-visibility' properties of <span
data-x="attr-hidden-until-found-state">hidden until found</span> elements.</p>

<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>
domenic marked this conversation as resolved.
Show resolved Hide resolved

<li><p>The element will still have a <a
href="https://drafts.csswg.org/css2/#visibility">generated box</a> when in the <span
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
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 @@ -75091,7 +75165,67 @@ END:VCARD</pre>
<div w-nodev>

<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>
attribute has the following getter steps:</p>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<ol>
<li><p>If the <code data-x="attr-hidden">hidden</code> attribute is in the <span
data-x="attr-hidden-until-found-state">until-found</span> state, then return "<code
data-x="attr-hidden-until-found-keyword">until-found</code>".</p></li>

<li><p>If the <code data-x="attr-hidden">hidden</code> attribute is set, then return
true.</p></li>

<li><p>Return false.</p></li>
</ol>

<p>The <code data-x="dom-hidden">hidden</code> IDL attribute has the following setter steps when
set to <var>value</var>:</p>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<ol>
<li><p>If <var>value</var> is an <span>ASCII case-insensitive</span> match for "<code
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
data-x="attr-hidden-until-found-keyword">until-found</code>", then set the <code
data-x="attr-hidden">hidden</code> attribute to "<code
data-x="attr-hidden-until-found-keyword">until-found</code>".</p></li>

<li><p>Otherwise, if <var>value</var> is false, then remove the <code
data-x="attr-hidden">hidden</code> attribute.</p></li>

<li><p>Otherwise, if <var>value</var> is the empty string, then remove the <code
data-x="attr-hidden">hidden</code> attribute.</p></li>

<li><p>Otherwise, if <var>value</var> is null, then remove the <code
data-x="attr-hidden">hidden</code> attribute.</p></li>

<li><p>Otherwise, set the <code data-x="attr-hidden">hidden</code> attribute to the empty
string.</p></li>
</ol>

<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">hidden</code> attribute in the
<span data-x="attr-hidden-until-found-state">hidden until found</span> state, then:</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>
</ol>
</li>
</ol>

</div>

Expand Down Expand Up @@ -78113,16 +78247,23 @@ 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>
<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 <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 state</span> should have their <span
data-x="skips its contents">skipped contents</span> become accessible without modifying the <span
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
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 @@ -78132,8 +78273,15 @@ 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>
domenic marked this conversation as resolved.
Show resolved Hide resolved
</ol>
</li>
</ol>

<p class="warning">
Expand Down Expand Up @@ -89626,6 +89774,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 @@ -116747,12 +116898,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 i]) { display: inline; height: 0; width: 0; } <!-- because for legacy reasons it still needs to instantiate the plugin -->
Copy link
Member

Choose a reason for hiding this comment

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

This change means that <embed hidden=until-found> will display the whole embed, i.e. it will not hide it. Is that intentional?

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 changed this to make hidden=until-found not apply to embed so that embed can continue to have its funny hidden-attribute-ignoring behavior. This aligns with how it is implemented in chromium.

Copy link
Member

Choose a reason for hiding this comment

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

embed doesn't ignore the hidden attribute. It displays inline but with zero width/height.

Before this change, <embed hidden=until-found>...</embed> will have 0x0 width/height. After this change, <embed hidden=until-found>...</embed> will have 300x150 width/height.

This is probably not a serious compat issue, since hopefully nobody is using hidden=until-found yet. But it doesn't seem like a good behavior either; if you're trying to hide the embed element, and the browser just ignores your request and leaves at its original size, that feels wrong.

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 changed the selectors to [hidden=until-found]:not(embed) and embed[hidden] which should prevent changes to embed and make <embed hidden=until-found> 0x0. Does it look good?

Copy link
Member

Choose a reason for hiding this comment

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

This looks good! We should be sure this is tested. I'd also appreciate if @zcorpan had time to weigh in since I believe he was discussing hidden embeds earlier in the PR, but we don't need to block on that if he's busy.

Copy link
Member

Choose a reason for hiding this comment

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

This makes sense. Maybe until-found should be disallowed on embed (as a document conformance requirement)?

Copy link
Member

Choose a reason for hiding this comment

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

Although that makes sense, I think it's probably not worth it, as I'd rather just work to deprecate embed (and maybe object) in general.


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

Expand Down Expand Up @@ -125899,6 +126058,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