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.

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
Changes from 12 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
108 changes: 94 additions & 14 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -74663,12 +74663,11 @@ END:VCARD</pre>
<h3>The <code data-x="attr-hidden">hidden</code> attribute</h3>

<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
data-x="attr-hidden">hidden</code></dfn> content attribute set. 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>
Expand Down Expand Up @@ -74755,6 +74754,53 @@ 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>When an element has the value <dfn><code
data-x="attr-hidden-until-found">"until-found"</code></dfn> for the hidden attribute, 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 is expected to remove the <code
data-x="attr-hidden">hidden</code> attribute in order to reveal the content before scrolling to
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
it. In addition to removing the <code data-x="attr-hidden">hidden</code> attribute, an event named
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<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>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
attribute is removed.</p>

<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">"until-found"</code>, as specified in
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
the <a href="#hiddenCSS">Rendering section</a>.</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>

<p>The <dfn>ancestor hidden=until-found revealing algorithm</dfn> is to run the following steps on
domenic 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>
zcorpan marked this conversation as resolved.
Show resolved Hide resolved

josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<ol>
<li>
<p>If <var>currentNode</var> has the <code
data-x="attr-hidden-until-found">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>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
</li>

<li><p>Set <var>currentNode</var> to the parent node of <var>currentNode</var> within the
<span>flat tree</span>.</p></li>
Copy link
Member

Choose a reason for hiding this comment

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

Nit: put the <p> above in here? And maybe the <p> before that as well? Doesn't seem to contain a requirement.

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 moved the first <p> above into this <div>.

</ol>
</li>
</ol>

</div>

<h3>Page visibility</h3>
Expand Down Expand Up @@ -77751,16 +77797,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></h4>
<h4>Interaction with <code>details</code> and <code
data-x="attr-hidden-until-found">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>
order to make find-in-page able to search through it. Similarly, all HTML elements with the <code
data-x="attr-hidden-until-found">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">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>
Expand All @@ -77770,8 +77821,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
domenic marked this conversation as resolved.
Show resolved Hide resolved
view</span>.</p></li>
</ol>
</li>
</ol>

<p class="warning">
Expand Down Expand Up @@ -89209,6 +89270,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,11 +117197,19 @@ 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 {
Copy link
Member

Choose a reason for hiding this comment

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

Does this need changes for until-found?

Also see the Tables section in the rendering section for more special styling for hidden (uses visibility: collapse; instead of display: none)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Interesting, it looks like chromium's implementation doesn't do display:inline but does to height:0; width:0: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/html_embed_element.cc;l=81-90;drc=efb59b0cefb13faf55cce3066809f11f99ab9ab8

The only reason I'd want to change this embed[hidden] rule is because display:inline doesn't work well with content-visibility:hidden, but I really don't think anyone is going to be using hidden=until-found directly on an embed element anyway. I'm ok keeping this as is.

Looking at the tables section, it's similar: the hidden attribute there sets display to things other than none, which is also the goal of the fancy selector I have here. I'm ok leaving it as is.

Copy link
Member

Choose a reason for hiding this comment

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

Should <embed hidden="until-found"> be disallowed (for web content)? Or would display: inline-block work better?

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 added a :not(hidden=until-found) to embed here.
Tables still looks ok to me

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 now that I should have done :not(embed) on [hidden=until-found] instead: #7475 (comment)

display: none;
}

<span id="hiddenCSS" data-x="">[hidden]:not([hidden=until-found i])</span> {
display: none;
}

[hidden=until-found] {
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
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; }
Expand Down Expand Up @@ -126255,6 +126327,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">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