Skip to content

Commit

Permalink
rewrite
Browse files Browse the repository at this point in the history 
Add pagereveal event

The pagereveal event is fired at the beginning of the first rendering opportunity after activation (initial load or reactivation). It is a way for the author to execute some JS that affects the presentation "just in time" for the first frame.

If there is an inbound cross-document view transition, the reveal event holds a reference to the ViewTransition object.

Closes whatwg#9315.

Use UA styles rather than prose to define <input> clip

The previous prose to make `overflow` act as `visible` with regards to other CSS features but still clip didn't work well with e.g. `text-overflow: ellipsis`. CSS now has a standard way to do what `input` buttons need, i.e. clip and also not affect interaction with `vertical-align`.

Fixes whatwg#9976.

Forbid nesting <details> in the same exclusive accordion

Fixes whatwg#9968.
  • Loading branch information
@rubberyuzu
rubberyuzu committed Dec 21, 2023
1 parent e6743f1 commit 7b17d01
Showing 1 changed file with 99 additions and 9 deletions.
108 changes: 99 additions & 9 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4022,12 +4022,15 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css-values/#math-function">math functions</dfn></li>
</ul>

<p>The following features are defined in <cite>CSS View Transitions 1</cite>:
<p>The following features are defined in <cite>CSS View Transitions</cite>:
<ref>CSSVIEWTRANSITIONS</ref></p>

<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions/#perform-pending-transition-operations">perform pending transition operations</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions/#document-rendering-suppression-for-view-transitions">rendering suppression for view transitions</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions/#activate-view-transition">activate view transition</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions/#viewtransition"><code>ViewTransition</code></dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions-2/#document-resolve-cross-document-view-transition">resolving cross-document view-transition</dfn></li>
</ul>

<p>The term <dfn data-x="css-styling-attribute"
Expand Down Expand Up @@ -60206,6 +60209,9 @@ interface <dfn interface>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
data-x="attr-details-open">open</code> attributes in the markup. This requirement on authors
forbids such misleading markup.</p>

<p>A document must not contain a <code>details</code> element that is a descendant of another
<code>details</code> element in the same <span>details name group</span>.</p>

<p>Documents that use the <code data-x="attr-details-name">name</code> attribute to group multiple
related <code>details</code> elements should keep those related elements together in a containing
element (such as a <code>section</code> element).</p>
Expand Down Expand Up @@ -94521,6 +94527,35 @@ dictionary <dfn dictionary>HashChangeEventInit</dfn> : <span>EventInit</span> {
</div>


<h5>The <code>PageRevealEvent</code> interface</h5>

<pre><code class="idl">[Exposed=Window]
interface <dfn interface>PageRevealEvent</dfn> : <span>Event</span> {
constructor(DOMString type, optional <span>PageRevealEventInit</span> eventInitDict = {});
readonly attribute <code>ViewTransition</code>? <span data-x="dom-PageRevealEvent-viewTransition">viewTransition</span>;
};

dictionary <dfn dictionary>PageRevealEventInit</dfn> : <span>EventInit</span> {
<code>ViewTransition</code>? <dfn dict-member for="PageRevealEventInit" data-x="dom-PageRevealEventInit-viewTransition">viewTransition</dfn> = null;
};</code></pre>

<dl class="domintro">
<dt><code data-x=""><var>event</var>.<span subdfn data-x="dom-PageRevealEvent-viewTransition">viewTransition</span></code></dt>
<dd>
<p>Returns the <code>ViewTransition</code> object that represents an inbound cross-document view
transition, if such transition is active when the event is fired. Otherwise, returns null.</p>
</dd>
</dl>

<div w-nodev>

<p>The <dfn attribute for="PageRevealEvent"><code
data-x="dom-PageRevealEvent-viewTransition">viewTransition</code></dfn> attribute must return the
value it was initialized to.</p>

</div>


<h5>The <code>PageTransitionEvent</code> interface</h5>

<pre><code class="idl">[Exposed=Window]
Expand Down Expand Up @@ -94734,9 +94769,10 @@ interface <dfn interface>NotRestoredReasons</dfn> {

<dt>"<dfn data-x="blocking-masked" export><code>masked</code></dfn>"</dt>
<dd>This <code>Document</code> has children that are in a cross-origin <code>iframe</code>,
and they prevented <a href="#note-bfcache">back/forward cache</a>. This reason only appears
for <span>node navigable</span>'s <span>top-level traversable</span>'s <span
data-x="nav-document">active document</span>.</dd>
and they prevented <a href="#note-bfcache">back/forward cache</a>; or this <code>Document</code>
could not be <a href="#note-bfcache">back/forward cached</a> for user agent-specific reasons.
This reason only appears for <span>node navigable</span>'s <span>top-level traversable</span>'s
<span data-x="nav-document">active document</span>.</dd>
</dl>

<hr>
Expand Down Expand Up @@ -101702,6 +101738,8 @@ location.href = '#foo';</code></pre>
<ol>
<li><p>Set <var>document</var>'s <span>page showing</span> flag to true.</p></li>

<li><p>Set <var>document</var>'s <span>has been revealed</span> to false.</p>

<li><p><span>Update the visibility state</span> of <var>document</var> to "<code
data-x="">visible</code>".</p></li>

Expand Down Expand Up @@ -101867,6 +101905,40 @@ location.href = '#foo';</code></pre>
data-x="blocking-masked">masked</code>".</p></li>
</ol>

<h5>Revealing the document</h5>

<p>A <code>Document</code> has a boolean <dfn>has been revealed</dfn>, initially false. It is used
to ensure that the <code data-x="event-pagereveal">pagereveal</code> event is fired once for each
activation of the <code>Document</code> (once when it's rendered initially, and once for each
<span data-x="reactivate a document">reactivation</span>).</p>

<p>To <dfn>reveal</dfn> a <code>Document</code> <var>document</var>:</p>

<ol>
<li><p>If <var>document</var>'s <span>has been revealed</span> is true, then return.</p></li>

<li><p>Set <var>document</var>'s <span>has been revealed</span> to true.</p></li>

<li><p>Let <var>transition</var> be the result of
<span>resolving cross-document view-transition</span> for <var>document</var>.</p></li>

<li><p><span data-x="concept-event-fire">Fire an event</span> named
<code data-x="event-pagereveal">pagereveal</code> at <var>document</var>'s
<span>relevant global object</span>, using <code>PageRevealEvent</code> with its <code
data-x="dom-PageRevealEvent-viewTransition">viewTransition</code> set to
<var>transition</var>.</p></li>

<li><p>If <var>transition</var> is not null, then <span
data-x="activate view transition">activate</span> <var>transition</var>.</p></li>
</ol>

<p class="note">Though <code data-x="event-pagereveal">pagereveal</code> is guaranteed to be fired
during the first <span>update the rendering</span> step that displays an up-to-date version of the
page, user agents are free to display a cached frame of the page before firing it. This prevents
the presence of a <code data-x="event-pagereveal">pagereveal</code> handler from delaying the
presentation of such cached frame.</p>


<h5>Scrolling to a fragment</h5>

<p>To <dfn id="scroll-to-the-fragment-identifier">scroll to the fragment</dfn> given a
Expand Down Expand Up @@ -108560,6 +108632,9 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
</div>
</li>

<li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>,
<span>reveal</span> that <code>Document</code>.</p></li>

<li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, <span>flush
autofocus candidates</span> for that <code>Document</code> if its <span>node navigable</span>
is a <span>top-level traversable</span>.</p></li>
Expand Down Expand Up @@ -110294,6 +110369,7 @@ typedef <span>OnBeforeUnloadEventHandlerNonNull</span>? <dfn typedef>OnBeforeUnl
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onoffline">onoffline</code></dfn> <td> <code data-x="event-offline">offline</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-ononline">ononline</code></dfn> <td> <code data-x="event-online">online</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onpagehide">onpagehide</code></dfn> <td> <code data-x="event-pagehide">pagehide</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onpagereveal">onpagereveal</code></dfn> <td> <code data-x="event-pagereveal">pagereveal</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onpageshow">onpageshow</code></dfn> <td> <code data-x="event-pageshow">pageshow</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onpopstate">onpopstate</code></dfn> <td> <code data-x="event-popstate">popstate</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onrejectionhandled">onrejectionhandled</code></dfn> <td> <code data-x="event-rejectionhandled">rejectionhandled</code>
Expand Down Expand Up @@ -110421,6 +110497,7 @@ interface mixin <dfn interface>WindowEventHandlers</dfn> {
attribute <span>EventHandler</span> <span data-x="handler-window-onoffline">onoffline</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-ononline">ononline</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onpagehide">onpagehide</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onpagereveal">onpagereveal</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onpageshow">onpageshow</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onpopstate">onpopstate</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onrejectionhandled">onrejectionhandled</span>;
Expand Down Expand Up @@ -131842,6 +131919,11 @@ input, select, button, textarea {
appearance: auto;
}

input:not([type=image i]) {
overflow: clip !important;
overflow-clip-margin: 0 !important;
}

input, select, textarea {
text-align: initial;
}
Expand Down Expand Up @@ -131881,11 +131963,6 @@ input:not([type=image i]), textarea { box-sizing: border-box; }</code></pre>

<ul>
<li><p>The <span>inner display type</span> is always 'flow-root'.</p></li>

<li><p>The <span>'overflow'</span> property is ignored, and always behaves as 'visible' for the
purpose of interaction with other CSS features (in particular, the <span>'vertical-align'</span>
property), but still clips any overflow at the border edge, and no scrolling mechanism is
displayed.</p></li>
</ul>


Expand Down Expand Up @@ -139413,6 +139490,12 @@ interface <dfn interface>External</dfn> {
<td> <code data-x="event-pagehide">pagehide</code> event handler for <code>Window</code> object
<td> <span data-x="event handler content attributes">Event handler content attribute</span>

<tr>
<th id="ix-handler-window-onpagereveal"> <code data-x="">onpagereveal</code>
<td> <code data-x="handler-window-onpagereveal">body</code>
<td> <code data-x="event-pagereveal">pagereveal</code> event handler for <code>Window</code> object
<td> <span data-x="event handler content attributes">Event handler content attribute</span>

<tr>
<th id="ix-handler-window-onpageshow"> <code data-x="">onpageshow</code>
<td> <code data-x="handler-window-onpageshow">body</code>
Expand Down Expand Up @@ -140283,6 +140366,13 @@ INSERT INTERFACES HERE
<td> Fired at the <code>Window</code> when the page's <span>session history entry</span> stops
being the <span data-x="nav-active-history-entry">active entry</span>

<tr> <!-- pagereveal -->
<td> <dfn event for="Window"><code data-x="event-pagereveal">pagereveal</code></dfn>
<td> <code>PageRevealEvent</code>
<td> <code>Window</code>
<td> Fired at the <code>Window</code> when the page begins to render for the first time after
it has been initialized or <span data-x="reactivate a document">reactivated</span>

<tr> <!-- pageshow -->
<td> <dfn event for="Window"><code data-x="event-pageshow">pageshow</code></dfn>
<td> <code>PageTransitionEvent</code>
Expand Down

0 comments on commit 7b17d01

Please sign in to comment.